walmartlabs / eslint-config-walmart Goto Github PK

View Code? Open in Web Editor NEW

49.0 21.0 31.0 445 KB

A set of default eslint configurations, Walmart Labs style.

License: Other

JavaScript 100.00%

eslint-config-walmart's Introduction

NOTICE:

This repository has been archived and is not supported.

NOTICE: SUPPORT FOR THIS PROJECT HAS ENDED

This projected was owned and maintained by Walmart. This project has reached its end of life and Walmart no longer supports this project.

We will no longer be monitoring the issues for this project or reviewing pull requests. You are free to continue using this project under the license terms or forks of this project at your own risk. This project is no longer subject to Walmart's bug bounty program or other security monitoring.

Actions you can take

We recommend you take the following action:

Review any configuration files used for build automation and make appropriate updates to remove or replace this project
Notify other members of your team and/or organization of this change
Notify your security team to help you evaluate alternative options

Forking and transition of ownership

For security reasons, Walmart does not transfer the ownership of our primary repos on Github or other platforms to other individuals/organizations. Further, we do not transfer ownership of packages for public package management systems.

If you would like to fork this package and continue development, you should choose a new name for the project and create your own packages, build automation, etc.

Please review the licensing terms of this project, which continue to be in effect even after decommission.

eslint-config-walmart

A composable set of ESLint configurations.

This project is the maintained offshoot of eslint-config-defaults with just the Walmart Labs-flavored rules included. It is eslint@2+-compatible and actively maintained (with love) by the friendly folks at Walmart Labs. Check out the style guide for a comprehensive list of rules.

Installation

Install this config package and ESLint:

$ npm install --save-dev eslint eslint-config-walmart

Then, install any additional dependencies required by your configuration. (See Dependencies section below.)
```
e.g.
```bash
$ npm install --save-dev eslint-plugin-filenames babel-eslint
```
```

Usage

Full Configurations

This package includes the following complete and ready to use configurations:

walmart - ES6 config
walmart/configurations/off - Disable all rules (ESLint's default at 1.0.0+)
walmart/configurations/es5-browser - ES5 + browser
walmart/configurations/es5-node - ES5 + node < 4.x
walmart/configurations/es5-test - ES5 + test
walmart/configurations/es5 - ES5 config
walmart/configurations/es6-browser - ES6 + browser
walmart/configurations/es6-node-test - ES6 + node 4.x + test
walmart/configurations/es6-node - ES6 + node 4.x
walmart/configurations/es6-react-test - ES6 + react + test
walmart/configurations/es6-react - ES6 + react
walmart/configurations/es6-test - ES6 + test
walmart/configurations/es6 - ES6 config

Dependencies

Any config (walmart/configurations/<suffix>) - eslint-plugin-filenames
Any React config (<prefix>-react) - eslint-plugin-react, babel-eslint
Any ES-next config (es6-<suffix>) - babel-eslint

To consume and extend a config in ESLint just add the extends attribute to your .eslintrc. For more details about how shareable configs work, see the ESLint documentation.

---
"extends":
  - "walmart"

---
"extends":
  - "walmart/configurations/es6-browser"

NOTE: Extending multiple complete configs can cause unexpected results, if you need to do this you should consider a piecemeal config as explained below. See walmartlabs/eslint-config-defaults#38 for details.

Piecemeal Configurations

ESLint configuration is broken apart in ./rules containing ESLint's rules and rules for specific ESLint plugins. The full set of ESLint rules (./rules/eslint) are broken into categories that mirror ESLint's documentation. Under each rule type there are sets of configuration as well as an off.js file which turns off every rule in the category.

Examples

---
"extends":
  - "walmart/rules/eslint/best-practices/on",
  - "walmart/rules/eslint/es6/off"
  - "walmart/rules/eslint/node/off"

"env":
  "phantom": true

Limitations

Due to an issue with ESLint, config extension cannot be called from a globally installed (npm install -g eslint) eslint. It can however be run properly using eslint installed directly to your package's node_modules. This can be done by either calling it directly (./node_modules/.bin/eslint .) or from within an npm script since they automatically check local node_modules first. This will be tracked in issue #43.

This package tracks config in the following versions:

And A Special Thanks To

Nicholas C. Zakas for all the amazing work on ESLint
Keith Cirkel for painstakingly formatting all of ESLint's rules into JSON in eslint-config-strict
AirBnB for sharing all of their config in JavaScript Style Guide
Google for sharing their styleguide
ES-Next Compat Table for the excellent docs on node features

License

Licensed under the Apache License, Version 2.0.

eslint-config-walmart's People

Contributors

Stargazers

Watchers

eslint-config-walmart's Issues

Feature: Add tests

Something like:

test/
  fixtures/
    # Example code should _pass_ `configurations/walmart/NAME`
    pass/
      es5-browser.js
      es5-node.js
      es5-test.js
      es5.js
      es6-browser.js
      es6-node.js
      es6-react-test.js
      es6-react.js
      es6-test.js
      es6.js
    # Example code should _fail_ `configurations/walmart/NAME`
    fail/
      es5-browser.js
      es5-node.js
      es5-test.js
      es5.js
      es6-browser.js
      es6-node.js
      es6-react-test.js
      es6-react.js
      es6-test.js
      es6.js
  spec/
    pass.spec.js
    fail.spec.js

The pass|fail.spec.js scripts just read in the files and exec eslint with the respective config and file name.

Current challenge: The configs look like this:

"use strict";

module.exports = {
  "extends": "defaults/configurations/walmart/es5",
  "env": {
    "browser": true
  }
};

but `"defaults/*" isn't available. It really needs to be something like:

"use strict";

module.exports = {
  "extends": "/PATH/TO/configurations/walmart/es5",
  "env": {
    "browser": true
  }
};

Options:

Hack require (used under the hood by eslint) in the exec'ed process (hard and hacky).
Call eslint programmatically and use something like mock-fs to mock and mutate the files in memory.

Adding index as key on react element

Using index as a key on an element in a list is an antipattern because that key is used to unique identify the element, so when changing the index changes and it doesn't really make sense (that's how i understood it), so it should be avoided, but I believe we should follow the advice given by Dan Abramov

see https://github.com/walmartlabs/eslint-config-walmart/blob/master/docs/styleguide.md#jsx--key

Limit number of props in react element

Just thinking of adding an eslint rule that would limit the number of props an element can have, like we limit the number of parameter, a function can have. In function, we generally ask user to send an object rather than so many parameter. I think react element, is exact analogy to function, so this rule should be in place.

//bad
<El prop1={prop1} prop2={prop2} prop3={prop3} prop4={prop4} prop5={prop5} />

//good (because it does not require changes in many files and reduces code change impact)

propMap={prop1, prop2, prop3, prop4, prop5}
<El propMap={propMap}/>
<El {...propMap}/>
or
<El {this.props}/> 
or
<El {...propMap}/>

Let me know your thoughts, would love to make a PR for this restriction to happen

accessing nested properties => suggestion

When accessing a nested property, do not use question marks... I wanted to bring this up as we use this a lot on our team and believe it would be a good add to the coding standard.

const obj = {
  one: {
     two: "hello"
  }
};
temp(obj);

// bad
function temp(object) {
  const one = object ? object.one : undefined;
  const two = one ? object.one.two : undefined;
  // ...
}

// bad
function temp(object) {
  const two = object && object.one  ? object.one.two : undefined
  // ...
}

// good
function temp(object) {
  const two = object && object.one && object.two;
  // ...
}

Let me know if you agree or not and if you agree i will make a PR

Upgrade to eslint@3

Upgrade to eslint@3. This will fix the object-shorthand defect, among other new features.

PR: Add support for `eslint-plugin-compat`

This eslint plugin lints against APIs that are only supported by target browsers 🎉 Would a PR for this be welcome?

Here's a demo of it in action

a11y / accessibility support?

Hi! I am new to electrode but have used airbnb for a long time in previous projects. Any plans for eslint-plugin-jsx-a11y support? If applications require 508 or WCAG 2.0 AA, it is really helpful to have these linting rules in place.

Deleting properties

https://github.com/walmartlabs/eslint-config-walmart/blob/master/docs/styleguide.md#forbidden-delete-var
https://github.com/walmartlabs/eslint-config-walmart/blob/master/docs/styleguide.md#objects--rest-spread

How do you suggest to delete a property in an object, when using object rest spread to get rid of properties, it creates an unused variable, thus requiring in eslint-disable... I have been using object spread and setting the property i don't want anymore to undefined... it still exists but is undefined

The react/wrap-multilines rule is deprecated

Getting the following warning with walmart/configurations/es6-react

The react/wrap-multilines rule is deprecated. Please use the react/jsx-wrap-multilines rule instead.

eslint-index

I have created an ESLint utility module that I thought you might find useful.

The module is called eslint-index and you can read the full documentation on npm.

eslint-index provides a great deal of functionality including:

List all available rules declared by ESLint and any plugins you have included
Colour code rules depending on their status:
- omitted (not declared anywhere in you ESLint config file)
- 0|off (declared, but set to 0|off)
- 1|warn
- 2|error
Display links to the rule documentation page next to each rule
Filter/reject rules by their status and/or their group
- status is as described above (omitted|off|warn|error)
- group is eslint for the core ESLint rules or the name of any of your plugins like react|import|flowtype
Format the output as a number or a table to get an overview of your rule settings
Rules that have been marked as deprecated are removed from all outputs
All of the above filters and formatting can be combined, for example:
- filter omitted and off rules, output them as a list and display the rule doc links alongside
- filter eslint rules and display the rule setting counters in a table

I wrote this plugin to aid the development of my own ESLint config settings and found it incredibly useful for keeping track of everything. I hope you find this module useful and please do let me know if you have any ideas on how to improve it.