mirror of
https://github.com/airbnb/javascript.git
synced 2026-01-14 18:38:29 -05:00
Compare commits
71 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
0e2ef178a2 | ||
|
|
99ade7a6b1 | ||
|
|
11f986fdc7 | ||
|
|
6499695ac1 | ||
|
|
f45bd1ebc0 | ||
|
|
e6080c7bee | ||
|
|
b912288e4b | ||
|
|
39b970f702 | ||
|
|
d1705c389e | ||
|
|
e6f292286b | ||
|
|
7a8f568769 | ||
|
|
c25bce83be | ||
|
|
f20eca9f64 | ||
|
|
932951adc2 | ||
|
|
5f019b1b11 | ||
|
|
b23992033c | ||
|
|
09adc22031 | ||
|
|
51a37d0fa5 | ||
|
|
0681a43e0a | ||
|
|
55899b57a6 | ||
|
|
e95b1f2754 | ||
|
|
11ab37144b | ||
|
|
46ae3e2256 | ||
|
|
cb191776db | ||
|
|
cda44dad40 | ||
|
|
2fc5e2d52c | ||
|
|
749f4c2bd0 | ||
|
|
4aee38f1e7 | ||
|
|
18a08b862b | ||
|
|
fd77bbebb7 | ||
|
|
7916d6f538 | ||
|
|
01f046dc05 | ||
|
|
0f3ca32323 | ||
|
|
95b6b43d63 | ||
|
|
240a3789db | ||
|
|
0e627e2fa3 | ||
|
|
7982931ba7 | ||
|
|
69fc1bf195 | ||
|
|
5c01a10949 | ||
|
|
bf536566ce | ||
|
|
917c8d92a3 | ||
|
|
8091e39343 | ||
|
|
fd96a4fd57 | ||
|
|
81157eec23 | ||
|
|
4ef69edc63 | ||
|
|
d601701730 | ||
|
|
49d08a2f13 | ||
|
|
0d747c6d96 | ||
|
|
1fb7d76add | ||
|
|
38f1488918 | ||
|
|
c6b1a43c48 | ||
|
|
6947138ee3 | ||
|
|
6fb4f8e878 | ||
|
|
ca0ff97f17 | ||
|
|
0b1f62372e | ||
|
|
7dbb7b154f | ||
|
|
75a908aacf | ||
|
|
f6f63b89f6 | ||
|
|
866f441d05 | ||
|
|
5143a7a97a | ||
|
|
3cbf96de7c | ||
|
|
5155aa5fc1 | ||
|
|
cbf9ade10a | ||
|
|
206d25b55a | ||
|
|
a0e94052d5 | ||
|
|
42c0e2ea13 | ||
|
|
7fdc87a8be | ||
|
|
1677ba6c6a | ||
|
|
7c0f28af8b | ||
|
|
fd2f5a1dae | ||
|
|
b4377fb030 |
3
CODE_OF_CONDUCT.md
Normal file
3
CODE_OF_CONDUCT.md
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
Airbnb has adopted a Code of Conduct that we expect project participants to adhere to. Please [read the full Code of Conduct text](https://airbnb.io/codeofconduct/) so that you can understand what actions will and will not be tolerated. Report violations to the maintainers of this project or to [opensource-conduct@airbnb.com](mailto:opensource-conduct@airbnb.com).
|
||||||
|
|
||||||
|
Reports sent to [opensource-conduct@airbnb.com](mailto:opensource-conduct@airbnb.com) are received by Airbnb's open source code of conduct moderation team, which is composed of Airbnb employees. All communications are private and confidential.
|
||||||
313
README.md
313
README.md
@@ -73,6 +73,8 @@ Other Style Guides
|
|||||||
- `symbol`
|
- `symbol`
|
||||||
- `bigint`
|
- `bigint`
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
const foo = 1;
|
const foo = 1;
|
||||||
let bar = foo;
|
let bar = foo;
|
||||||
@@ -91,6 +93,8 @@ Other Style Guides
|
|||||||
- `array`
|
- `array`
|
||||||
- `function`
|
- `function`
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
const foo = [1, 2];
|
const foo = [1, 2];
|
||||||
const bar = foo;
|
const bar = foo;
|
||||||
@@ -105,7 +109,7 @@ Other Style Guides
|
|||||||
## References
|
## References
|
||||||
|
|
||||||
<a name="references--prefer-const"></a><a name="2.1"></a>
|
<a name="references--prefer-const"></a><a name="2.1"></a>
|
||||||
- [2.1](#references--prefer-const) Use `const` for all of your references; avoid using `var`. eslint: [`prefer-const`](https://eslint.org/docs/rules/prefer-const.html), [`no-const-assign`](https://eslint.org/docs/rules/no-const-assign.html)
|
- [2.1](#references--prefer-const) Use `const` for all of your references; avoid using `var`. eslint: [`prefer-const`](https://eslint.org/docs/rules/prefer-const), [`no-const-assign`](https://eslint.org/docs/rules/no-const-assign)
|
||||||
|
|
||||||
> Why? This ensures that you can’t reassign your references, which can lead to bugs and difficult to comprehend code.
|
> Why? This ensures that you can’t reassign your references, which can lead to bugs and difficult to comprehend code.
|
||||||
|
|
||||||
@@ -120,7 +124,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="references--disallow-var"></a><a name="2.2"></a>
|
<a name="references--disallow-var"></a><a name="2.2"></a>
|
||||||
- [2.2](#references--disallow-var) If you must reassign references, use `let` instead of `var`. eslint: [`no-var`](https://eslint.org/docs/rules/no-var.html)
|
- [2.2](#references--disallow-var) If you must reassign references, use `let` instead of `var`. eslint: [`no-var`](https://eslint.org/docs/rules/no-var)
|
||||||
|
|
||||||
> Why? `let` is block-scoped rather than function-scoped like `var`.
|
> Why? `let` is block-scoped rather than function-scoped like `var`.
|
||||||
|
|
||||||
@@ -160,7 +164,7 @@ Other Style Guides
|
|||||||
## Objects
|
## Objects
|
||||||
|
|
||||||
<a name="objects--no-new"></a><a name="3.1"></a>
|
<a name="objects--no-new"></a><a name="3.1"></a>
|
||||||
- [3.1](#objects--no-new) Use the literal syntax for object creation. eslint: [`no-new-object`](https://eslint.org/docs/rules/no-new-object.html)
|
- [3.1](#objects--no-new) Use the literal syntax for object creation. eslint: [`no-new-object`](https://eslint.org/docs/rules/no-new-object)
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// bad
|
// bad
|
||||||
@@ -197,7 +201,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="es6-object-shorthand"></a><a name="3.5"></a>
|
<a name="es6-object-shorthand"></a><a name="3.5"></a>
|
||||||
- [3.3](#es6-object-shorthand) Use object method shorthand. eslint: [`object-shorthand`](https://eslint.org/docs/rules/object-shorthand.html)
|
- [3.3](#es6-object-shorthand) Use object method shorthand. eslint: [`object-shorthand`](https://eslint.org/docs/rules/object-shorthand)
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// bad
|
// bad
|
||||||
@@ -220,7 +224,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="es6-object-concise"></a><a name="3.6"></a>
|
<a name="es6-object-concise"></a><a name="3.6"></a>
|
||||||
- [3.4](#es6-object-concise) Use property value shorthand. eslint: [`object-shorthand`](https://eslint.org/docs/rules/object-shorthand.html)
|
- [3.4](#es6-object-concise) Use property value shorthand. eslint: [`object-shorthand`](https://eslint.org/docs/rules/object-shorthand)
|
||||||
|
|
||||||
> Why? It is shorter and descriptive.
|
> Why? It is shorter and descriptive.
|
||||||
|
|
||||||
@@ -269,7 +273,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="objects--quoted-props"></a><a name="3.8"></a>
|
<a name="objects--quoted-props"></a><a name="3.8"></a>
|
||||||
- [3.6](#objects--quoted-props) Only quote properties that are invalid identifiers. eslint: [`quote-props`](https://eslint.org/docs/rules/quote-props.html)
|
- [3.6](#objects--quoted-props) Only quote properties that are invalid identifiers. eslint: [`quote-props`](https://eslint.org/docs/rules/quote-props)
|
||||||
|
|
||||||
> Why? In general we consider it subjectively easier to read. It improves syntax highlighting, and is also more easily optimized by many JS engines.
|
> Why? In general we consider it subjectively easier to read. It improves syntax highlighting, and is also more easily optimized by many JS engines.
|
||||||
|
|
||||||
@@ -292,7 +296,7 @@ Other Style Guides
|
|||||||
<a name="objects--prototype-builtins"></a>
|
<a name="objects--prototype-builtins"></a>
|
||||||
- [3.7](#objects--prototype-builtins) Do not call `Object.prototype` methods directly, such as `hasOwnProperty`, `propertyIsEnumerable`, and `isPrototypeOf`. eslint: [`no-prototype-builtins`](https://eslint.org/docs/rules/no-prototype-builtins)
|
- [3.7](#objects--prototype-builtins) Do not call `Object.prototype` methods directly, such as `hasOwnProperty`, `propertyIsEnumerable`, and `isPrototypeOf`. eslint: [`no-prototype-builtins`](https://eslint.org/docs/rules/no-prototype-builtins)
|
||||||
|
|
||||||
> Why? These methods may be shadowed by properties on the object in question - consider `{ hasOwnProperty: false }` - or, the object may be a null object (`Object.create(null)`).
|
> Why? These methods may be shadowed by properties on the object in question - consider `{ hasOwnProperty: false }` - or, the object may be a null object (`Object.create(null)`). In modern browsers that support ES2022, or with a polyfill such as <https://npmjs.com/object.hasown>, `Object.hasOwn` can also be used as an alternative to `Object.prototype.hasOwnProperty.call`.
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// bad
|
// bad
|
||||||
@@ -301,12 +305,18 @@ Other Style Guides
|
|||||||
// good
|
// good
|
||||||
console.log(Object.prototype.hasOwnProperty.call(object, key));
|
console.log(Object.prototype.hasOwnProperty.call(object, key));
|
||||||
|
|
||||||
// best
|
// better
|
||||||
const has = Object.prototype.hasOwnProperty; // cache the lookup once, in module scope.
|
const has = Object.prototype.hasOwnProperty; // cache the lookup once, in module scope.
|
||||||
console.log(has.call(object, key));
|
console.log(has.call(object, key));
|
||||||
|
|
||||||
|
// best
|
||||||
|
console.log(Object.hasOwn(object, key)); // only supported in browsers that support ES2022
|
||||||
|
|
||||||
/* or */
|
/* or */
|
||||||
import has from 'has'; // https://www.npmjs.com/package/has
|
import has from 'has'; // https://www.npmjs.com/package/has
|
||||||
console.log(has(object, key));
|
console.log(has(object, key));
|
||||||
|
/* or */
|
||||||
|
console.log(Object.hasOwn(object, key)); // https://www.npmjs.com/package/object.hasown
|
||||||
```
|
```
|
||||||
|
|
||||||
<a name="objects--rest-spread"></a>
|
<a name="objects--rest-spread"></a>
|
||||||
@@ -334,7 +344,7 @@ Other Style Guides
|
|||||||
## Arrays
|
## Arrays
|
||||||
|
|
||||||
<a name="arrays--literals"></a><a name="4.1"></a>
|
<a name="arrays--literals"></a><a name="4.1"></a>
|
||||||
- [4.1](#arrays--literals) Use the literal syntax for array creation. eslint: [`no-array-constructor`](https://eslint.org/docs/rules/no-array-constructor.html)
|
- [4.1](#arrays--literals) Use the literal syntax for array creation. eslint: [`no-array-constructor`](https://eslint.org/docs/rules/no-array-constructor)
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// bad
|
// bad
|
||||||
@@ -376,7 +386,7 @@ Other Style Guides
|
|||||||
|
|
||||||
<a name="arrays--from"></a>
|
<a name="arrays--from"></a>
|
||||||
<a name="arrays--from-iterable"></a><a name="4.4"></a>
|
<a name="arrays--from-iterable"></a><a name="4.4"></a>
|
||||||
- [4.4](#arrays--from-iterable) To convert an iterable object to an array, use spreads `...` instead of [`Array.from`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from).
|
- [4.4](#arrays--from-iterable) To convert an iterable object to an array, use spreads `...` instead of [`Array.from`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
const foo = document.querySelectorAll('.foo');
|
const foo = document.querySelectorAll('.foo');
|
||||||
@@ -458,7 +468,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="arrays--bracket-newline"></a>
|
<a name="arrays--bracket-newline"></a>
|
||||||
- [4.8](#arrays--bracket-newline) Use line breaks after open and before close array brackets if an array has multiple lines
|
- [4.8](#arrays--bracket-newline) Use line breaks after opening array brackets and before closing array brackets, if an array has multiple lines
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// bad
|
// bad
|
||||||
@@ -568,7 +578,7 @@ Other Style Guides
|
|||||||
## Strings
|
## Strings
|
||||||
|
|
||||||
<a name="strings--quotes"></a><a name="6.1"></a>
|
<a name="strings--quotes"></a><a name="6.1"></a>
|
||||||
- [6.1](#strings--quotes) Use single quotes `''` for strings. eslint: [`quotes`](https://eslint.org/docs/rules/quotes.html)
|
- [6.1](#strings--quotes) Use single quotes `''` for strings. eslint: [`quotes`](https://eslint.org/docs/rules/quotes)
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// bad
|
// bad
|
||||||
@@ -603,7 +613,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="es6-template-literals"></a><a name="6.4"></a>
|
<a name="es6-template-literals"></a><a name="6.4"></a>
|
||||||
- [6.3](#es6-template-literals) When programmatically building up strings, use template strings instead of concatenation. eslint: [`prefer-template`](https://eslint.org/docs/rules/prefer-template.html) [`template-curly-spacing`](https://eslint.org/docs/rules/template-curly-spacing)
|
- [6.3](#es6-template-literals) When programmatically building up strings, use template strings instead of concatenation. eslint: [`prefer-template`](https://eslint.org/docs/rules/prefer-template) [`template-curly-spacing`](https://eslint.org/docs/rules/template-curly-spacing)
|
||||||
|
|
||||||
> Why? Template strings give you a readable, concise syntax with proper newlines and string interpolation features.
|
> Why? Template strings give you a readable, concise syntax with proper newlines and string interpolation features.
|
||||||
|
|
||||||
@@ -630,7 +640,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="strings--eval"></a><a name="6.5"></a>
|
<a name="strings--eval"></a><a name="6.5"></a>
|
||||||
- [6.4](#strings--eval) Never use `eval()` on a string, it opens too many vulnerabilities. eslint: [`no-eval`](https://eslint.org/docs/rules/no-eval)
|
- [6.4](#strings--eval) Never use `eval()` on a string; it opens too many vulnerabilities. eslint: [`no-eval`](https://eslint.org/docs/rules/no-eval)
|
||||||
|
|
||||||
<a name="strings--escaping"></a>
|
<a name="strings--escaping"></a>
|
||||||
- [6.5](#strings--escaping) Do not unnecessarily escape characters in strings. eslint: [`no-useless-escape`](https://eslint.org/docs/rules/no-useless-escape)
|
- [6.5](#strings--escaping) Do not unnecessarily escape characters in strings. eslint: [`no-useless-escape`](https://eslint.org/docs/rules/no-useless-escape)
|
||||||
@@ -651,7 +661,7 @@ Other Style Guides
|
|||||||
## Functions
|
## Functions
|
||||||
|
|
||||||
<a name="functions--declarations"></a><a name="7.1"></a>
|
<a name="functions--declarations"></a><a name="7.1"></a>
|
||||||
- [7.1](#functions--declarations) Use named function expressions instead of function declarations. eslint: [`func-style`](https://eslint.org/docs/rules/func-style)
|
- [7.1](#functions--declarations) Use named function expressions instead of function declarations. eslint: [`func-style`](https://eslint.org/docs/rules/func-style), [`func-names`](https://eslint.org/docs/latest/rules/func-names)
|
||||||
|
|
||||||
> Why? Function declarations are hoisted, which means that it’s easy - too easy - to reference the function before it is defined in the file. This harms readability and maintainability. If you find that a function’s definition is large or complex enough that it is interfering with understanding the rest of the file, then perhaps it’s time to extract it to its own module! Don’t forget to explicitly name the expression, regardless of whether or not the name is inferred from the containing variable (which is often the case in modern browsers or when using compilers such as Babel). This eliminates any assumptions made about the Error’s call stack. ([Discussion](https://github.com/airbnb/javascript/issues/794))
|
> Why? Function declarations are hoisted, which means that it’s easy - too easy - to reference the function before it is defined in the file. This harms readability and maintainability. If you find that a function’s definition is large or complex enough that it is interfering with understanding the rest of the file, then perhaps it’s time to extract it to its own module! Don’t forget to explicitly name the expression, regardless of whether or not the name is inferred from the containing variable (which is often the case in modern browsers or when using compilers such as Babel). This eliminates any assumptions made about the Error’s call stack. ([Discussion](https://github.com/airbnb/javascript/issues/794))
|
||||||
|
|
||||||
@@ -674,7 +684,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="functions--iife"></a><a name="7.2"></a>
|
<a name="functions--iife"></a><a name="7.2"></a>
|
||||||
- [7.2](#functions--iife) Wrap immediately invoked function expressions in parentheses. eslint: [`wrap-iife`](https://eslint.org/docs/rules/wrap-iife.html)
|
- [7.2](#functions--iife) Wrap immediately invoked function expressions in parentheses. eslint: [`wrap-iife`](https://eslint.org/docs/rules/wrap-iife)
|
||||||
|
|
||||||
> Why? An immediately invoked function expression is a single unit - wrapping both it, and its invocation parens, in parens, cleanly expresses this. Note that in a world with modules everywhere, you almost never need an IIFE.
|
> Why? An immediately invoked function expression is a single unit - wrapping both it, and its invocation parens, in parens, cleanly expresses this. Note that in a world with modules everywhere, you almost never need an IIFE.
|
||||||
|
|
||||||
@@ -686,7 +696,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="functions--in-blocks"></a><a name="7.3"></a>
|
<a name="functions--in-blocks"></a><a name="7.3"></a>
|
||||||
- [7.3](#functions--in-blocks) Never declare a function in a non-function block (`if`, `while`, etc). Assign the function to a variable instead. Browsers will allow you to do it, but they all interpret it differently, which is bad news bears. eslint: [`no-loop-func`](https://eslint.org/docs/rules/no-loop-func.html)
|
- [7.3](#functions--in-blocks) Never declare a function in a non-function block (`if`, `while`, etc). Assign the function to a variable instead. Browsers will allow you to do it, but they all interpret it differently, which is bad news bears. eslint: [`no-loop-func`](https://eslint.org/docs/rules/no-loop-func)
|
||||||
|
|
||||||
<a name="functions--note-on-blocks"></a><a name="7.4"></a>
|
<a name="functions--note-on-blocks"></a><a name="7.4"></a>
|
||||||
- [7.4](#functions--note-on-blocks) **Note:** ECMA-262 defines a `block` as a list of statements. A function declaration is not a statement.
|
- [7.4](#functions--note-on-blocks) **Note:** ECMA-262 defines a `block` as a list of statements. A function declaration is not a statement.
|
||||||
@@ -774,7 +784,7 @@ Other Style Guides
|
|||||||
> Why? They are confusing to reason about.
|
> Why? They are confusing to reason about.
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
var b = 1;
|
let b = 1;
|
||||||
// bad
|
// bad
|
||||||
function count(a = b++) {
|
function count(a = b++) {
|
||||||
console.log(a);
|
console.log(a);
|
||||||
@@ -807,10 +817,10 @@ Other Style Guides
|
|||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// bad
|
// bad
|
||||||
var add = new Function('a', 'b', 'return a + b');
|
const add = new Function('a', 'b', 'return a + b');
|
||||||
|
|
||||||
// still bad
|
// still bad
|
||||||
var subtract = Function('a', 'b', 'return a - b');
|
const subtract = Function('a', 'b', 'return a - b');
|
||||||
```
|
```
|
||||||
|
|
||||||
<a name="functions--signature-spacing"></a><a name="7.11"></a>
|
<a name="functions--signature-spacing"></a><a name="7.11"></a>
|
||||||
@@ -830,7 +840,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="functions--mutate-params"></a><a name="7.12"></a>
|
<a name="functions--mutate-params"></a><a name="7.12"></a>
|
||||||
- [7.12](#functions--mutate-params) Never mutate parameters. eslint: [`no-param-reassign`](https://eslint.org/docs/rules/no-param-reassign.html)
|
- [7.12](#functions--mutate-params) Never mutate parameters. eslint: [`no-param-reassign`](https://eslint.org/docs/rules/no-param-reassign)
|
||||||
|
|
||||||
> Why? Manipulating objects passed in as parameters can cause unwanted variable side effects in the original caller.
|
> Why? Manipulating objects passed in as parameters can cause unwanted variable side effects in the original caller.
|
||||||
|
|
||||||
@@ -847,7 +857,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="functions--reassign-params"></a><a name="7.13"></a>
|
<a name="functions--reassign-params"></a><a name="7.13"></a>
|
||||||
- [7.13](#functions--reassign-params) Never reassign parameters. eslint: [`no-param-reassign`](https://eslint.org/docs/rules/no-param-reassign.html)
|
- [7.13](#functions--reassign-params) Never reassign parameters. eslint: [`no-param-reassign`](https://eslint.org/docs/rules/no-param-reassign)
|
||||||
|
|
||||||
> Why? Reassigning parameters can lead to unexpected behavior, especially when accessing the `arguments` object. It can also cause optimization issues, especially in V8.
|
> Why? Reassigning parameters can lead to unexpected behavior, especially when accessing the `arguments` object. It can also cause optimization issues, especially in V8.
|
||||||
|
|
||||||
@@ -933,7 +943,7 @@ Other Style Guides
|
|||||||
## Arrow Functions
|
## Arrow Functions
|
||||||
|
|
||||||
<a name="arrows--use-them"></a><a name="8.1"></a>
|
<a name="arrows--use-them"></a><a name="8.1"></a>
|
||||||
- [8.1](#arrows--use-them) When you must use an anonymous function (as when passing an inline callback), use arrow function notation. eslint: [`prefer-arrow-callback`](https://eslint.org/docs/rules/prefer-arrow-callback.html), [`arrow-spacing`](https://eslint.org/docs/rules/arrow-spacing.html)
|
- [8.1](#arrows--use-them) When you must use an anonymous function (as when passing an inline callback), use arrow function notation. eslint: [`prefer-arrow-callback`](https://eslint.org/docs/rules/prefer-arrow-callback), [`arrow-spacing`](https://eslint.org/docs/rules/arrow-spacing)
|
||||||
|
|
||||||
> Why? It creates a version of the function that executes in the context of `this`, which is usually what you want, and is a more concise syntax.
|
> Why? It creates a version of the function that executes in the context of `this`, which is usually what you want, and is a more concise syntax.
|
||||||
|
|
||||||
@@ -954,7 +964,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="arrows--implicit-return"></a><a name="8.2"></a>
|
<a name="arrows--implicit-return"></a><a name="8.2"></a>
|
||||||
- [8.2](#arrows--implicit-return) If the function body consists of a single statement returning an [expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions) without side effects, omit the braces and use the implicit return. Otherwise, keep the braces and use a `return` statement. eslint: [`arrow-parens`](https://eslint.org/docs/rules/arrow-parens.html), [`arrow-body-style`](https://eslint.org/docs/rules/arrow-body-style.html)
|
- [8.2](#arrows--implicit-return) If the function body consists of a single statement returning an [expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions) without side effects, omit the braces and use the implicit return. Otherwise, keep the braces and use a `return` statement. eslint: [`arrow-parens`](https://eslint.org/docs/rules/arrow-parens), [`arrow-body-style`](https://eslint.org/docs/rules/arrow-body-style)
|
||||||
|
|
||||||
> Why? Syntactic sugar. It reads well when multiple functions are chained together.
|
> Why? Syntactic sugar. It reads well when multiple functions are chained together.
|
||||||
|
|
||||||
@@ -1021,7 +1031,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="arrows--one-arg-parens"></a><a name="8.4"></a>
|
<a name="arrows--one-arg-parens"></a><a name="8.4"></a>
|
||||||
- [8.4](#arrows--one-arg-parens) Always include parentheses around arguments for clarity and consistency. eslint: [`arrow-parens`](https://eslint.org/docs/rules/arrow-parens.html)
|
- [8.4](#arrows--one-arg-parens) Always include parentheses around arguments for clarity and consistency. eslint: [`arrow-parens`](https://eslint.org/docs/rules/arrow-parens)
|
||||||
|
|
||||||
> Why? Minimizes diff churn when adding or removing arguments.
|
> Why? Minimizes diff churn when adding or removing arguments.
|
||||||
|
|
||||||
@@ -1367,7 +1377,7 @@ Other Style Guides
|
|||||||
|
|
||||||
<a name="modules--no-mutable-exports"></a>
|
<a name="modules--no-mutable-exports"></a>
|
||||||
- [10.5](#modules--no-mutable-exports) Do not export mutable bindings.
|
- [10.5](#modules--no-mutable-exports) Do not export mutable bindings.
|
||||||
eslint: [`import/no-mutable-exports`](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-mutable-exports.md)
|
eslint: [`import/no-mutable-exports`](https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-mutable-exports.md)
|
||||||
> Why? Mutation should be avoided in general, but in particular when exporting mutable bindings. While this technique may be needed for some special cases, in general, only constant references should be exported.
|
> Why? Mutation should be avoided in general, but in particular when exporting mutable bindings. While this technique may be needed for some special cases, in general, only constant references should be exported.
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
@@ -1382,7 +1392,7 @@ Other Style Guides
|
|||||||
|
|
||||||
<a name="modules--prefer-default-export"></a>
|
<a name="modules--prefer-default-export"></a>
|
||||||
- [10.6](#modules--prefer-default-export) In modules with a single export, prefer default export over named export.
|
- [10.6](#modules--prefer-default-export) In modules with a single export, prefer default export over named export.
|
||||||
eslint: [`import/prefer-default-export`](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/prefer-default-export.md)
|
eslint: [`import/prefer-default-export`](https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/prefer-default-export.md)
|
||||||
> Why? To encourage more files that only ever export one thing, which is better for readability and maintainability.
|
> Why? To encourage more files that only ever export one thing, which is better for readability and maintainability.
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
@@ -1395,7 +1405,7 @@ Other Style Guides
|
|||||||
|
|
||||||
<a name="modules--imports-first"></a>
|
<a name="modules--imports-first"></a>
|
||||||
- [10.7](#modules--imports-first) Put all `import`s above non-import statements.
|
- [10.7](#modules--imports-first) Put all `import`s above non-import statements.
|
||||||
eslint: [`import/first`](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/first.md)
|
eslint: [`import/first`](https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/first.md)
|
||||||
> Why? Since `import`s are hoisted, keeping them all at the top prevents surprising behavior.
|
> Why? Since `import`s are hoisted, keeping them all at the top prevents surprising behavior.
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
@@ -1434,7 +1444,7 @@ Other Style Guides
|
|||||||
|
|
||||||
<a name="modules--no-webpack-loader-syntax"></a>
|
<a name="modules--no-webpack-loader-syntax"></a>
|
||||||
- [10.9](#modules--no-webpack-loader-syntax) Disallow Webpack loader syntax in module import statements.
|
- [10.9](#modules--no-webpack-loader-syntax) Disallow Webpack loader syntax in module import statements.
|
||||||
eslint: [`import/no-webpack-loader-syntax`](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-webpack-loader-syntax.md)
|
eslint: [`import/no-webpack-loader-syntax`](https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-webpack-loader-syntax.md)
|
||||||
> Why? Since using Webpack syntax in the imports couples the code to a module bundler. Prefer using the loader syntax in `webpack.config.js`.
|
> Why? Since using Webpack syntax in the imports couples the code to a module bundler. Prefer using the loader syntax in `webpack.config.js`.
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
@@ -1449,7 +1459,7 @@ Other Style Guides
|
|||||||
|
|
||||||
<a name="modules--import-extensions"></a>
|
<a name="modules--import-extensions"></a>
|
||||||
- [10.10](#modules--import-extensions) Do not include JavaScript filename extensions
|
- [10.10](#modules--import-extensions) Do not include JavaScript filename extensions
|
||||||
eslint: [`import/extensions`](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/extensions.md)
|
eslint: [`import/extensions`](https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/extensions.md)
|
||||||
> Why? Including extensions inhibits refactoring, and inappropriately hardcodes implementation details of the module you're importing in every consumer.
|
> Why? Including extensions inhibits refactoring, and inappropriately hardcodes implementation details of the module you're importing in every consumer.
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
@@ -1469,7 +1479,7 @@ Other Style Guides
|
|||||||
## Iterators and Generators
|
## Iterators and Generators
|
||||||
|
|
||||||
<a name="iterators--nope"></a><a name="11.1"></a>
|
<a name="iterators--nope"></a><a name="11.1"></a>
|
||||||
- [11.1](#iterators--nope) Don’t use iterators. Prefer JavaScript’s higher-order functions instead of loops like `for-in` or `for-of`. eslint: [`no-iterator`](https://eslint.org/docs/rules/no-iterator.html) [`no-restricted-syntax`](https://eslint.org/docs/rules/no-restricted-syntax)
|
- [11.1](#iterators--nope) Don’t use iterators. Prefer JavaScript’s higher-order functions instead of loops like `for-in` or `for-of`. eslint: [`no-iterator`](https://eslint.org/docs/rules/no-iterator) [`no-restricted-syntax`](https://eslint.org/docs/rules/no-restricted-syntax)
|
||||||
|
|
||||||
> Why? This enforces our immutable rule. Dealing with pure functions that return values is easier to reason about than side effects.
|
> Why? This enforces our immutable rule. Dealing with pure functions that return values is easier to reason about than side effects.
|
||||||
|
|
||||||
@@ -1583,7 +1593,7 @@ Other Style Guides
|
|||||||
## Properties
|
## Properties
|
||||||
|
|
||||||
<a name="properties--dot"></a><a name="12.1"></a>
|
<a name="properties--dot"></a><a name="12.1"></a>
|
||||||
- [12.1](#properties--dot) Use dot notation when accessing properties. eslint: [`dot-notation`](https://eslint.org/docs/rules/dot-notation.html)
|
- [12.1](#properties--dot) Use dot notation when accessing properties. eslint: [`dot-notation`](https://eslint.org/docs/rules/dot-notation)
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
const luke = {
|
const luke = {
|
||||||
@@ -1615,7 +1625,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="es2016-properties--exponentiation-operator"></a>
|
<a name="es2016-properties--exponentiation-operator"></a>
|
||||||
- [12.3](#es2016-properties--exponentiation-operator) Use exponentiation operator `**` when calculating exponentiations. eslint: [`no-restricted-properties`](https://eslint.org/docs/rules/no-restricted-properties).
|
- [12.3](#es2016-properties--exponentiation-operator) Use exponentiation operator `**` when calculating exponentiations. eslint: [`prefer-exponentiation-operator`](https://eslint.org/docs/rules/prefer-exponentiation-operator).
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// bad
|
// bad
|
||||||
@@ -1641,7 +1651,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="variables--one-const"></a><a name="13.2"></a>
|
<a name="variables--one-const"></a><a name="13.2"></a>
|
||||||
- [13.2](#variables--one-const) Use one `const` or `let` declaration per variable or assignment. eslint: [`one-var`](https://eslint.org/docs/rules/one-var.html)
|
- [13.2](#variables--one-const) Use one `const` or `let` declaration per variable or assignment. eslint: [`one-var`](https://eslint.org/docs/rules/one-var)
|
||||||
|
|
||||||
> Why? It’s easier to add new variable declarations this way, and you never have to worry about swapping out a `;` for a `,` or introducing punctuation-only diffs. You can also step through each declaration with the debugger, instead of jumping through all of them at once.
|
> Why? It’s easier to add new variable declarations this way, and you never have to worry about swapping out a `;` for a `,` or introducing punctuation-only diffs. You can also step through each declaration with the debugger, instead of jumping through all of them at once.
|
||||||
|
|
||||||
@@ -1796,7 +1806,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="variables--linebreak"></a>
|
<a name="variables--linebreak"></a>
|
||||||
- [13.7](#variables--linebreak) Avoid linebreaks before or after `=` in an assignment. If your assignment violates [`max-len`](https://eslint.org/docs/rules/max-len.html), surround the value in parens. eslint [`operator-linebreak`](https://eslint.org/docs/rules/operator-linebreak.html).
|
- [13.7](#variables--linebreak) Avoid linebreaks before or after `=` in an assignment. If your assignment violates [`max-len`](https://eslint.org/docs/rules/max-len), surround the value in parens. eslint [`operator-linebreak`](https://eslint.org/docs/rules/operator-linebreak).
|
||||||
|
|
||||||
> Why? Linebreaks surrounding `=` can obfuscate the value of an assignment.
|
> Why? Linebreaks surrounding `=` can obfuscate the value of an assignment.
|
||||||
|
|
||||||
@@ -1826,14 +1836,14 @@ Other Style Guides
|
|||||||
```javascript
|
```javascript
|
||||||
// bad
|
// bad
|
||||||
|
|
||||||
var some_unused_var = 42;
|
const some_unused_var = 42;
|
||||||
|
|
||||||
// Write-only variables are not considered as used.
|
// Write-only variables are not considered as used.
|
||||||
var y = 10;
|
let y = 10;
|
||||||
y = 5;
|
y = 5;
|
||||||
|
|
||||||
// A read for a modification of itself is not considered as used.
|
// A read for a modification of itself is not considered as used.
|
||||||
var z = 0;
|
let z = 0;
|
||||||
z = z + 1;
|
z = z + 1;
|
||||||
|
|
||||||
// Unused function arguments.
|
// Unused function arguments.
|
||||||
@@ -1847,14 +1857,14 @@ Other Style Guides
|
|||||||
return x + y;
|
return x + y;
|
||||||
}
|
}
|
||||||
|
|
||||||
var x = 1;
|
const x = 1;
|
||||||
var y = a + 2;
|
const y = a + 2;
|
||||||
|
|
||||||
alert(getXPlusY(x, y));
|
alert(getXPlusY(x, y));
|
||||||
|
|
||||||
// 'type' is ignored even if unused because it has a rest property sibling.
|
// 'type' is ignored even if unused because it has a rest property sibling.
|
||||||
// This is a form of extracting an object that omits the specified keys.
|
// This is a form of extracting an object that omits the specified keys.
|
||||||
var { type, ...coords } = data;
|
const { type, ...coords } = data;
|
||||||
// 'coords' is now the 'data' object without its 'type' property.
|
// 'coords' is now the 'data' object without its 'type' property.
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -1955,6 +1965,56 @@ Other Style Guides
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
<a name="no-use-before-define"></a>
|
||||||
|
- [14.5](#no-use-before-define) Variables, classes, and functions should be defined before they can be used. eslint: [`no-use-before-define`](https://eslint.org/docs/latest/rules/no-use-before-define)
|
||||||
|
|
||||||
|
> Why? When variables, classes, or functions are declared after being used, it can harm readability since a reader won't know what a thing that's referenced is. It's much clearer for a reader to first encounter the source of a thing (whether imported from another module, or defined in the file) before encountering a use of the thing.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// bad
|
||||||
|
|
||||||
|
// Variable a is being used before it is being defined.
|
||||||
|
console.log(a); // this will be undefined, since while the declaration is hoisted, the initialization is not
|
||||||
|
var a = 10;
|
||||||
|
|
||||||
|
// Function fun is being called before being defined.
|
||||||
|
fun();
|
||||||
|
function fun() {}
|
||||||
|
|
||||||
|
// Class A is being used before being defined.
|
||||||
|
new A(); // ReferenceError: Cannot access 'A' before initialization
|
||||||
|
class A {
|
||||||
|
}
|
||||||
|
|
||||||
|
// `let` and `const` are hoisted, but they don't have a default initialization.
|
||||||
|
// The variables 'a' and 'b' are in a Temporal Dead Zone where JavaScript
|
||||||
|
// knows they exist (declaration is hoisted) but they are not accessible
|
||||||
|
// (as they are not yet initialized).
|
||||||
|
|
||||||
|
console.log(a); // ReferenceError: Cannot access 'a' before initialization
|
||||||
|
console.log(b); // ReferenceError: Cannot access 'b' before initialization
|
||||||
|
let a = 10;
|
||||||
|
const b = 5;
|
||||||
|
|
||||||
|
|
||||||
|
// good
|
||||||
|
|
||||||
|
var a = 10;
|
||||||
|
console.log(a); // 10
|
||||||
|
|
||||||
|
function fun() {}
|
||||||
|
fun();
|
||||||
|
|
||||||
|
class A {
|
||||||
|
}
|
||||||
|
new A();
|
||||||
|
|
||||||
|
let a = 10;
|
||||||
|
const b = 5;
|
||||||
|
console.log(a); // 10
|
||||||
|
console.log(b); // 5
|
||||||
|
```
|
||||||
|
|
||||||
- For more information refer to [JavaScript Scoping & Hoisting](https://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting/) by [Ben Cherry](https://www.adequatelygood.com/).
|
- For more information refer to [JavaScript Scoping & Hoisting](https://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting/) by [Ben Cherry](https://www.adequatelygood.com/).
|
||||||
|
|
||||||
**[⬆ back to top](#table-of-contents)**
|
**[⬆ back to top](#table-of-contents)**
|
||||||
@@ -1962,7 +2022,7 @@ Other Style Guides
|
|||||||
## Comparison Operators & Equality
|
## Comparison Operators & Equality
|
||||||
|
|
||||||
<a name="comparison--eqeqeq"></a><a name="15.1"></a>
|
<a name="comparison--eqeqeq"></a><a name="15.1"></a>
|
||||||
- [15.1](#comparison--eqeqeq) Use `===` and `!==` over `==` and `!=`. eslint: [`eqeqeq`](https://eslint.org/docs/rules/eqeqeq.html)
|
- [15.1](#comparison--eqeqeq) Use `===` and `!==` over `==` and `!=`. eslint: [`eqeqeq`](https://eslint.org/docs/rules/eqeqeq)
|
||||||
|
|
||||||
<a name="comparison--if"></a><a name="15.2"></a>
|
<a name="comparison--if"></a><a name="15.2"></a>
|
||||||
- [15.2](#comparison--if) Conditional statements such as the `if` statement evaluate their expression using coercion with the `ToBoolean` abstract method and always follow these simple rules:
|
- [15.2](#comparison--if) Conditional statements such as the `if` statement evaluate their expression using coercion with the `ToBoolean` abstract method and always follow these simple rules:
|
||||||
@@ -2017,10 +2077,10 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="comparison--moreinfo"></a><a name="15.4"></a>
|
<a name="comparison--moreinfo"></a><a name="15.4"></a>
|
||||||
- [15.4](#comparison--moreinfo) For more information see [Truth Equality and JavaScript](https://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/#more-2108) by Angus Croll.
|
- [15.4](#comparison--moreinfo) For more information see [Truth, Equality, and JavaScript](https://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/#more-2108) by Angus Croll.
|
||||||
|
|
||||||
<a name="comparison--switch-blocks"></a><a name="15.5"></a>
|
<a name="comparison--switch-blocks"></a><a name="15.5"></a>
|
||||||
- [15.5](#comparison--switch-blocks) Use braces to create blocks in `case` and `default` clauses that contain lexical declarations (e.g. `let`, `const`, `function`, and `class`). eslint: [`no-case-declarations`](https://eslint.org/docs/rules/no-case-declarations.html)
|
- [15.5](#comparison--switch-blocks) Use braces to create blocks in `case` and `default` clauses that contain lexical declarations (e.g. `let`, `const`, `function`, and `class`). eslint: [`no-case-declarations`](https://eslint.org/docs/rules/no-case-declarations)
|
||||||
|
|
||||||
> Why? Lexical declarations are visible in the entire `switch` block but only get initialized when assigned, which only happens when its `case` is reached. This causes problems when multiple `case` clauses attempt to define the same thing.
|
> Why? Lexical declarations are visible in the entire `switch` block but only get initialized when assigned, which only happens when its `case` is reached. This causes problems when multiple `case` clauses attempt to define the same thing.
|
||||||
|
|
||||||
@@ -2068,7 +2128,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="comparison--nested-ternaries"></a><a name="15.6"></a>
|
<a name="comparison--nested-ternaries"></a><a name="15.6"></a>
|
||||||
- [15.6](#comparison--nested-ternaries) Ternaries should not be nested and generally be single line expressions. eslint: [`no-nested-ternary`](https://eslint.org/docs/rules/no-nested-ternary.html)
|
- [15.6](#comparison--nested-ternaries) Ternaries should not be nested and generally be single line expressions. eslint: [`no-nested-ternary`](https://eslint.org/docs/rules/no-nested-ternary)
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// bad
|
// bad
|
||||||
@@ -2089,23 +2149,25 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="comparison--unneeded-ternary"></a><a name="15.7"></a>
|
<a name="comparison--unneeded-ternary"></a><a name="15.7"></a>
|
||||||
- [15.7](#comparison--unneeded-ternary) Avoid unneeded ternary statements. eslint: [`no-unneeded-ternary`](https://eslint.org/docs/rules/no-unneeded-ternary.html)
|
- [15.7](#comparison--unneeded-ternary) Avoid unneeded ternary statements. eslint: [`no-unneeded-ternary`](https://eslint.org/docs/rules/no-unneeded-ternary)
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// bad
|
// bad
|
||||||
const foo = a ? a : b;
|
const foo = a ? a : b;
|
||||||
const bar = c ? true : false;
|
const bar = c ? true : false;
|
||||||
const baz = c ? false : true;
|
const baz = c ? false : true;
|
||||||
|
const quux = a != null ? a : b;
|
||||||
|
|
||||||
// good
|
// good
|
||||||
const foo = a || b;
|
const foo = a || b;
|
||||||
const bar = !!c;
|
const bar = !!c;
|
||||||
const baz = !c;
|
const baz = !c;
|
||||||
|
const quux = a ?? b;
|
||||||
```
|
```
|
||||||
|
|
||||||
<a name="comparison--no-mixed-operators"></a>
|
<a name="comparison--no-mixed-operators"></a>
|
||||||
- [15.8](#comparison--no-mixed-operators) When mixing operators, enclose them in parentheses. The only exception is the standard arithmetic operators: `+`, `-`, and `**` since their precedence is broadly understood. We recommend enclosing `/` and `*` in parentheses because their precedence can be ambiguous when they are mixed.
|
- [15.8](#comparison--no-mixed-operators) When mixing operators, enclose them in parentheses. The only exception is the standard arithmetic operators: `+`, `-`, and `**` since their precedence is broadly understood. We recommend enclosing `/` and `*` in parentheses because their precedence can be ambiguous when they are mixed.
|
||||||
eslint: [`no-mixed-operators`](https://eslint.org/docs/rules/no-mixed-operators.html)
|
eslint: [`no-mixed-operators`](https://eslint.org/docs/rules/no-mixed-operators)
|
||||||
|
|
||||||
> Why? This improves readability and clarifies the developer’s intention.
|
> Why? This improves readability and clarifies the developer’s intention.
|
||||||
|
|
||||||
@@ -2140,6 +2202,33 @@ Other Style Guides
|
|||||||
const bar = a + (b / c) * d;
|
const bar = a + (b / c) * d;
|
||||||
```
|
```
|
||||||
|
|
||||||
|
<a name="nullish-coalescing-operator"></a>
|
||||||
|
- [15.9](#nullish-coalescing-operator) The nullish coalescing operator (`??`) is a logical operator that returns its right-hand side operand when its left-hand side operand is `null` or `undefined`. Otherwise, it returns the left-hand side operand.
|
||||||
|
|
||||||
|
> Why? It provides precision by distinguishing null/undefined from other falsy values, enhancing code clarity and predictability.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// bad
|
||||||
|
const value = 0 ?? 'default';
|
||||||
|
// returns 0, not 'default'
|
||||||
|
|
||||||
|
// bad
|
||||||
|
const value = '' ?? 'default';
|
||||||
|
// returns '', not 'default'
|
||||||
|
|
||||||
|
// good
|
||||||
|
const value = null ?? 'default';
|
||||||
|
// returns 'default'
|
||||||
|
|
||||||
|
// good
|
||||||
|
const user = {
|
||||||
|
name: 'John',
|
||||||
|
age: null
|
||||||
|
};
|
||||||
|
const age = user.age ?? 18;
|
||||||
|
// returns 18
|
||||||
|
```
|
||||||
|
|
||||||
**[⬆ back to top](#table-of-contents)**
|
**[⬆ back to top](#table-of-contents)**
|
||||||
|
|
||||||
## Blocks
|
## Blocks
|
||||||
@@ -2170,7 +2259,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="blocks--cuddled-elses"></a><a name="16.2"></a>
|
<a name="blocks--cuddled-elses"></a><a name="16.2"></a>
|
||||||
- [16.2](#blocks--cuddled-elses) If you’re using multiline blocks with `if` and `else`, put `else` on the same line as your `if` block’s closing brace. eslint: [`brace-style`](https://eslint.org/docs/rules/brace-style.html)
|
- [16.2](#blocks--cuddled-elses) If you’re using multiline blocks with `if` and `else`, put `else` on the same line as your `if` block’s closing brace. eslint: [`brace-style`](https://eslint.org/docs/rules/brace-style)
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// bad
|
// bad
|
||||||
@@ -2473,7 +2562,7 @@ Other Style Guides
|
|||||||
## Whitespace
|
## Whitespace
|
||||||
|
|
||||||
<a name="whitespace--spaces"></a><a name="18.1"></a>
|
<a name="whitespace--spaces"></a><a name="18.1"></a>
|
||||||
- [19.1](#whitespace--spaces) Use soft tabs (space character) set to 2 spaces. eslint: [`indent`](https://eslint.org/docs/rules/indent.html)
|
- [19.1](#whitespace--spaces) Use soft tabs (space character) set to 2 spaces. eslint: [`indent`](https://eslint.org/docs/rules/indent)
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// bad
|
// bad
|
||||||
@@ -2493,7 +2582,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="whitespace--before-blocks"></a><a name="18.2"></a>
|
<a name="whitespace--before-blocks"></a><a name="18.2"></a>
|
||||||
- [19.2](#whitespace--before-blocks) Place 1 space before the leading brace. eslint: [`space-before-blocks`](https://eslint.org/docs/rules/space-before-blocks.html)
|
- [19.2](#whitespace--before-blocks) Place 1 space before the leading brace. eslint: [`space-before-blocks`](https://eslint.org/docs/rules/space-before-blocks)
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// bad
|
// bad
|
||||||
@@ -2520,7 +2609,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="whitespace--around-keywords"></a><a name="18.3"></a>
|
<a name="whitespace--around-keywords"></a><a name="18.3"></a>
|
||||||
- [19.3](#whitespace--around-keywords) Place 1 space before the opening parenthesis in control statements (`if`, `while` etc.). Place no space between the argument list and the function name in function calls and declarations. eslint: [`keyword-spacing`](https://eslint.org/docs/rules/keyword-spacing.html)
|
- [19.3](#whitespace--around-keywords) Place 1 space before the opening parenthesis in control statements (`if`, `while` etc.). Place no space between the argument list and the function name in function calls and declarations. eslint: [`keyword-spacing`](https://eslint.org/docs/rules/keyword-spacing)
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// bad
|
// bad
|
||||||
@@ -2545,7 +2634,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="whitespace--infix-ops"></a><a name="18.4"></a>
|
<a name="whitespace--infix-ops"></a><a name="18.4"></a>
|
||||||
- [19.4](#whitespace--infix-ops) Set off operators with spaces. eslint: [`space-infix-ops`](https://eslint.org/docs/rules/space-infix-ops.html)
|
- [19.4](#whitespace--infix-ops) Set off operators with spaces. eslint: [`space-infix-ops`](https://eslint.org/docs/rules/space-infix-ops)
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// bad
|
// bad
|
||||||
@@ -2556,7 +2645,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="whitespace--newline-at-end"></a><a name="18.5"></a>
|
<a name="whitespace--newline-at-end"></a><a name="18.5"></a>
|
||||||
- [19.5](#whitespace--newline-at-end) End files with a single newline character. eslint: [`eol-last`](https://github.com/eslint/eslint/blob/master/docs/rules/eol-last.md)
|
- [19.5](#whitespace--newline-at-end) End files with a single newline character. eslint: [`eol-last`](https://eslint.org/docs/rules/eol-last)
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// bad
|
// bad
|
||||||
@@ -2607,7 +2696,7 @@ Other Style Guides
|
|||||||
// bad
|
// bad
|
||||||
const leds = stage.selectAll('.led').data(data).enter().append('svg:svg').classed('led', true)
|
const leds = stage.selectAll('.led').data(data).enter().append('svg:svg').classed('led', true)
|
||||||
.attr('width', (radius + margin) * 2).append('svg:g')
|
.attr('width', (radius + margin) * 2).append('svg:g')
|
||||||
.attr('transform', `translate(${radius + margin},${radius + margin})`)
|
.attr('transform', `translate(${radius + margin}, ${radius + margin})`)
|
||||||
.call(tron.led);
|
.call(tron.led);
|
||||||
|
|
||||||
// good
|
// good
|
||||||
@@ -2617,7 +2706,7 @@ Other Style Guides
|
|||||||
.classed('led', true)
|
.classed('led', true)
|
||||||
.attr('width', (radius + margin) * 2)
|
.attr('width', (radius + margin) * 2)
|
||||||
.append('svg:g')
|
.append('svg:g')
|
||||||
.attr('transform', `translate(${radius + margin},${radius + margin})`)
|
.attr('transform', `translate(${radius + margin}, ${radius + margin})`)
|
||||||
.call(tron.led);
|
.call(tron.led);
|
||||||
|
|
||||||
// good
|
// good
|
||||||
@@ -2625,7 +2714,7 @@ Other Style Guides
|
|||||||
const svg = leds.enter().append('svg:svg');
|
const svg = leds.enter().append('svg:svg');
|
||||||
svg.classed('led', true).attr('width', (radius + margin) * 2);
|
svg.classed('led', true).attr('width', (radius + margin) * 2);
|
||||||
const g = svg.append('svg:g');
|
const g = svg.append('svg:g');
|
||||||
g.attr('transform', `translate(${radius + margin},${radius + margin})`).call(tron.led);
|
g.attr('transform', `translate(${radius + margin}, ${radius + margin})`).call(tron.led);
|
||||||
```
|
```
|
||||||
|
|
||||||
<a name="whitespace--after-blocks"></a><a name="18.7"></a>
|
<a name="whitespace--after-blocks"></a><a name="18.7"></a>
|
||||||
@@ -2687,7 +2776,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="whitespace--padded-blocks"></a><a name="18.8"></a>
|
<a name="whitespace--padded-blocks"></a><a name="18.8"></a>
|
||||||
- [19.8](#whitespace--padded-blocks) Do not pad your blocks with blank lines. eslint: [`padded-blocks`](https://eslint.org/docs/rules/padded-blocks.html)
|
- [19.8](#whitespace--padded-blocks) Do not pad your blocks with blank lines. eslint: [`padded-blocks`](https://eslint.org/docs/rules/padded-blocks)
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// bad
|
// bad
|
||||||
@@ -2700,7 +2789,7 @@ Other Style Guides
|
|||||||
// bad
|
// bad
|
||||||
if (baz) {
|
if (baz) {
|
||||||
|
|
||||||
console.log(qux);
|
console.log(quux);
|
||||||
} else {
|
} else {
|
||||||
console.log(foo);
|
console.log(foo);
|
||||||
|
|
||||||
@@ -2721,7 +2810,7 @@ Other Style Guides
|
|||||||
|
|
||||||
// good
|
// good
|
||||||
if (baz) {
|
if (baz) {
|
||||||
console.log(qux);
|
console.log(quux);
|
||||||
} else {
|
} else {
|
||||||
console.log(foo);
|
console.log(foo);
|
||||||
}
|
}
|
||||||
@@ -2782,7 +2871,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="whitespace--in-parens"></a><a name="18.9"></a>
|
<a name="whitespace--in-parens"></a><a name="18.9"></a>
|
||||||
- [19.10](#whitespace--in-parens) Do not add spaces inside parentheses. eslint: [`space-in-parens`](https://eslint.org/docs/rules/space-in-parens.html)
|
- [19.10](#whitespace--in-parens) Do not add spaces inside parentheses. eslint: [`space-in-parens`](https://eslint.org/docs/rules/space-in-parens)
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// bad
|
// bad
|
||||||
@@ -2807,7 +2896,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="whitespace--in-brackets"></a><a name="18.10"></a>
|
<a name="whitespace--in-brackets"></a><a name="18.10"></a>
|
||||||
- [19.11](#whitespace--in-brackets) Do not add spaces inside brackets. eslint: [`array-bracket-spacing`](https://eslint.org/docs/rules/array-bracket-spacing.html)
|
- [19.11](#whitespace--in-brackets) Do not add spaces inside brackets. eslint: [`array-bracket-spacing`](https://eslint.org/docs/rules/array-bracket-spacing)
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// bad
|
// bad
|
||||||
@@ -2820,7 +2909,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="whitespace--in-braces"></a><a name="18.11"></a>
|
<a name="whitespace--in-braces"></a><a name="18.11"></a>
|
||||||
- [19.12](#whitespace--in-braces) Add spaces inside curly braces. eslint: [`object-curly-spacing`](https://eslint.org/docs/rules/object-curly-spacing.html)
|
- [19.12](#whitespace--in-braces) Add spaces inside curly braces. eslint: [`object-curly-spacing`](https://eslint.org/docs/rules/object-curly-spacing)
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// bad
|
// bad
|
||||||
@@ -2831,7 +2920,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="whitespace--max-len"></a><a name="18.12"></a>
|
<a name="whitespace--max-len"></a><a name="18.12"></a>
|
||||||
- [19.13](#whitespace--max-len) Avoid having lines of code that are longer than 100 characters (including whitespace). Note: per [above](#strings--line-length), long strings are exempt from this rule, and should not be broken up. eslint: [`max-len`](https://eslint.org/docs/rules/max-len.html)
|
- [19.13](#whitespace--max-len) Avoid having lines of code that are longer than 100 characters (including whitespace). Note: per [above](#strings--line-length), long strings are exempt from this rule, and should not be broken up. eslint: [`max-len`](https://eslint.org/docs/rules/max-len)
|
||||||
|
|
||||||
> Why? This ensures readability and maintainability.
|
> Why? This ensures readability and maintainability.
|
||||||
|
|
||||||
@@ -2850,6 +2939,14 @@ Other Style Guides
|
|||||||
&& jsonData.foo.bar.baz.quux
|
&& jsonData.foo.bar.baz.quux
|
||||||
&& jsonData.foo.bar.baz.quux.xyzzy;
|
&& jsonData.foo.bar.baz.quux.xyzzy;
|
||||||
|
|
||||||
|
// better
|
||||||
|
const foo = jsonData
|
||||||
|
?.foo
|
||||||
|
?.bar
|
||||||
|
?.baz
|
||||||
|
?.quux
|
||||||
|
?.xyzzy;
|
||||||
|
|
||||||
// good
|
// good
|
||||||
$.ajax({
|
$.ajax({
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
@@ -2878,12 +2975,12 @@ Other Style Guides
|
|||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// bad
|
// bad
|
||||||
var foo = 1,bar = 2;
|
const foo = 1,bar = 2;
|
||||||
var arr = [1 , 2];
|
const arr = [1 , 2];
|
||||||
|
|
||||||
// good
|
// good
|
||||||
var foo = 1, bar = 2;
|
const foo = 1, bar = 2;
|
||||||
var arr = [1, 2];
|
const arr = [1, 2];
|
||||||
```
|
```
|
||||||
|
|
||||||
<a name="whitespace--computed-property-spacing"></a>
|
<a name="whitespace--computed-property-spacing"></a>
|
||||||
@@ -2893,13 +2990,13 @@ Other Style Guides
|
|||||||
// bad
|
// bad
|
||||||
obj[foo ]
|
obj[foo ]
|
||||||
obj[ 'foo']
|
obj[ 'foo']
|
||||||
var x = {[ b ]: a}
|
const x = {[ b ]: a}
|
||||||
obj[foo[ bar ]]
|
obj[foo[ bar ]]
|
||||||
|
|
||||||
// good
|
// good
|
||||||
obj[foo]
|
obj[foo]
|
||||||
obj['foo']
|
obj['foo']
|
||||||
var x = { [b]: a }
|
const x = { [b]: a }
|
||||||
obj[foo[bar]]
|
obj[foo[bar]]
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -2922,11 +3019,11 @@ Other Style Guides
|
|||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// bad
|
// bad
|
||||||
var obj = { foo : 42 };
|
const obj = { foo : 42 };
|
||||||
var obj2 = { foo:42 };
|
const obj2 = { foo:42 };
|
||||||
|
|
||||||
// good
|
// good
|
||||||
var obj = { foo: 42 };
|
const obj = { foo: 42 };
|
||||||
```
|
```
|
||||||
|
|
||||||
<a name="whitespace--no-trailing-spaces"></a>
|
<a name="whitespace--no-trailing-spaces"></a>
|
||||||
@@ -2938,24 +3035,24 @@ Other Style Guides
|
|||||||
<!-- markdownlint-disable MD012 -->
|
<!-- markdownlint-disable MD012 -->
|
||||||
```javascript
|
```javascript
|
||||||
// bad - multiple empty lines
|
// bad - multiple empty lines
|
||||||
var x = 1;
|
const x = 1;
|
||||||
|
|
||||||
|
|
||||||
var y = 2;
|
const y = 2;
|
||||||
|
|
||||||
// bad - 2+ newlines at end of file
|
// bad - 2+ newlines at end of file
|
||||||
var x = 1;
|
const x = 1;
|
||||||
var y = 2;
|
const y = 2;
|
||||||
|
|
||||||
|
|
||||||
// bad - 1+ newline(s) at beginning of file
|
// bad - 1+ newline(s) at beginning of file
|
||||||
|
|
||||||
var x = 1;
|
const x = 1;
|
||||||
var y = 2;
|
const y = 2;
|
||||||
|
|
||||||
// good
|
// good
|
||||||
var x = 1;
|
const x = 1;
|
||||||
var y = 2;
|
const y = 2;
|
||||||
|
|
||||||
```
|
```
|
||||||
<!-- markdownlint-enable MD012 -->
|
<!-- markdownlint-enable MD012 -->
|
||||||
@@ -2965,7 +3062,7 @@ Other Style Guides
|
|||||||
## Commas
|
## Commas
|
||||||
|
|
||||||
<a name="commas--leading-trailing"></a><a name="19.1"></a>
|
<a name="commas--leading-trailing"></a><a name="19.1"></a>
|
||||||
- [20.1](#commas--leading-trailing) Leading commas: **Nope.** eslint: [`comma-style`](https://eslint.org/docs/rules/comma-style.html)
|
- [20.1](#commas--leading-trailing) Leading commas: **Nope.** eslint: [`comma-style`](https://eslint.org/docs/rules/comma-style)
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// bad
|
// bad
|
||||||
@@ -3000,7 +3097,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="commas--dangling"></a><a name="19.2"></a>
|
<a name="commas--dangling"></a><a name="19.2"></a>
|
||||||
- [20.2](#commas--dangling) Additional trailing comma: **Yup.** eslint: [`comma-dangle`](https://eslint.org/docs/rules/comma-dangle.html)
|
- [20.2](#commas--dangling) Additional trailing comma: **Yup.** eslint: [`comma-dangle`](https://eslint.org/docs/rules/comma-dangle)
|
||||||
|
|
||||||
> Why? This leads to cleaner git diffs. Also, transpilers like Babel will remove the additional trailing comma in the transpiled code which means you don’t have to worry about the [trailing comma problem](https://github.com/airbnb/javascript/blob/es5-deprecated/es5/README.md#commas) in legacy browsers.
|
> Why? This leads to cleaner git diffs. Also, transpilers like Babel will remove the additional trailing comma in the transpiled code which means you don’t have to worry about the [trailing comma problem](https://github.com/airbnb/javascript/blob/es5-deprecated/es5/README.md#commas) in legacy browsers.
|
||||||
|
|
||||||
@@ -3100,7 +3197,7 @@ Other Style Guides
|
|||||||
## Semicolons
|
## Semicolons
|
||||||
|
|
||||||
<a name="semicolons--required"></a><a name="20.1"></a>
|
<a name="semicolons--required"></a><a name="20.1"></a>
|
||||||
- [21.1](#semicolons--required) **Yup.** eslint: [`semi`](https://eslint.org/docs/rules/semi.html)
|
- [21.1](#semicolons--required) **Yup.** eslint: [`semi`](https://eslint.org/docs/rules/semi)
|
||||||
|
|
||||||
> Why? When JavaScript encounters a line break without a semicolon, it uses a set of rules called [Automatic Semicolon Insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion) to determine whether it should regard that line break as the end of a statement, and (as the name implies) place a semicolon into your code before the line break if it thinks so. ASI contains a few eccentric behaviors, though, and your code will break if JavaScript misinterprets your line break. These rules will become more complicated as new features become a part of JavaScript. Explicitly terminating your statements and configuring your linter to catch missing semicolons will help prevent you from encountering issues.
|
> Why? When JavaScript encounters a line break without a semicolon, it uses a set of rules called [Automatic Semicolon Insertion](https://tc39.github.io/ecma262/#sec-automatic-semicolon-insertion) to determine whether it should regard that line break as the end of a statement, and (as the name implies) place a semicolon into your code before the line break if it thinks so. ASI contains a few eccentric behaviors, though, and your code will break if JavaScript misinterprets your line break. These rules will become more complicated as new features become a part of JavaScript. Explicitly terminating your statements and configuring your linter to catch missing semicolons will help prevent you from encountering issues.
|
||||||
|
|
||||||
@@ -3131,7 +3228,7 @@ Other Style Guides
|
|||||||
});
|
});
|
||||||
|
|
||||||
// good
|
// good
|
||||||
const reaction = "No! That’s impossible!";
|
const reaction = 'No! That’s impossible!';
|
||||||
(async function meanwhileOnTheFalcon() {
|
(async function meanwhileOnTheFalcon() {
|
||||||
// handle `leia`, `lando`, `chewie`, `r2`, `c3p0`
|
// handle `leia`, `lando`, `chewie`, `r2`, `c3p0`
|
||||||
// ...
|
// ...
|
||||||
@@ -3199,7 +3296,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="coercion--comment-deviations"></a><a name="21.4"></a>
|
<a name="coercion--comment-deviations"></a><a name="21.4"></a>
|
||||||
- [22.4](#coercion--comment-deviations) If for whatever reason you are doing something wild and `parseInt` is your bottleneck and need to use Bitshift for [performance reasons](https://jsperf.com/coercion-vs-casting/3), leave a comment explaining why and what you’re doing.
|
- [22.4](#coercion--comment-deviations) If for whatever reason you are doing something wild and `parseInt` is your bottleneck and need to use Bitshift for [performance reasons](https://web.archive.org/web/20200414205431/https://jsperf.com/coercion-vs-casting/3), leave a comment explaining why and what you’re doing.
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// good
|
// good
|
||||||
@@ -3256,7 +3353,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="naming--camelCase"></a><a name="22.2"></a>
|
<a name="naming--camelCase"></a><a name="22.2"></a>
|
||||||
- [23.2](#naming--camelCase) Use camelCase when naming objects, functions, and instances. eslint: [`camelcase`](https://eslint.org/docs/rules/camelcase.html)
|
- [23.2](#naming--camelCase) Use camelCase when naming objects, functions, and instances. eslint: [`camelcase`](https://eslint.org/docs/rules/camelcase)
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// bad
|
// bad
|
||||||
@@ -3270,7 +3367,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="naming--PascalCase"></a><a name="22.3"></a>
|
<a name="naming--PascalCase"></a><a name="22.3"></a>
|
||||||
- [23.3](#naming--PascalCase) Use PascalCase only when naming constructors or classes. eslint: [`new-cap`](https://eslint.org/docs/rules/new-cap.html)
|
- [23.3](#naming--PascalCase) Use PascalCase only when naming constructors or classes. eslint: [`new-cap`](https://eslint.org/docs/rules/new-cap)
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// bad
|
// bad
|
||||||
@@ -3295,7 +3392,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="naming--leading-underscore"></a><a name="22.4"></a>
|
<a name="naming--leading-underscore"></a><a name="22.4"></a>
|
||||||
- [23.4](#naming--leading-underscore) Do not use trailing or leading underscores. eslint: [`no-underscore-dangle`](https://eslint.org/docs/rules/no-underscore-dangle.html)
|
- [23.4](#naming--leading-underscore) Do not use trailing or leading underscores. eslint: [`no-underscore-dangle`](https://eslint.org/docs/rules/no-underscore-dangle)
|
||||||
|
|
||||||
> Why? JavaScript does not have the concept of privacy in terms of properties or methods. Although a leading underscore is a common convention to mean “private”, in fact, these properties are fully public, and as such, are part of your public API contract. This convention might lead developers to wrongly think that a change won’t count as breaking, or that tests aren’t needed. tl;dr: if you want something to be “private”, it must not be observably present.
|
> Why? JavaScript does not have the concept of privacy in terms of properties or methods. Although a leading underscore is a common convention to mean “private”, in fact, these properties are fully public, and as such, are part of your public API contract. This convention might lead developers to wrongly think that a change won’t count as breaking, or that tests aren’t needed. tl;dr: if you want something to be “private”, it must not be observably present.
|
||||||
|
|
||||||
@@ -3309,7 +3406,7 @@ Other Style Guides
|
|||||||
this.firstName = 'Panda';
|
this.firstName = 'Panda';
|
||||||
|
|
||||||
// good, in environments where WeakMaps are available
|
// good, in environments where WeakMaps are available
|
||||||
// see https://kangax.github.io/compat-table/es6/#test-WeakMap
|
// see https://compat-table.github.io/compat-table/es6/#test-WeakMap
|
||||||
const firstNames = new WeakMap();
|
const firstNames = new WeakMap();
|
||||||
firstNames.set(this, 'Panda');
|
firstNames.set(this, 'Panda');
|
||||||
```
|
```
|
||||||
@@ -3471,7 +3568,7 @@ Other Style Guides
|
|||||||
|
|
||||||
// good
|
// good
|
||||||
export const MAPPING = {
|
export const MAPPING = {
|
||||||
key: 'value'
|
key: 'value',
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -3622,7 +3719,7 @@ Other Style Guides
|
|||||||
```
|
```
|
||||||
|
|
||||||
<a name="jquery--queries"></a><a name="25.3"></a>
|
<a name="jquery--queries"></a><a name="25.3"></a>
|
||||||
- [26.3](#jquery--queries) For DOM queries use Cascading `$('.sidebar ul')` or parent > child `$('.sidebar > ul')`. [jsPerf](https://jsperf.com/jquery-find-vs-context-sel/16)
|
- [26.3](#jquery--queries) For DOM queries use Cascading `$('.sidebar ul')` or parent > child `$('.sidebar > ul')`. [jsPerf](https://web.archive.org/web/20200414183810/https://jsperf.com/jquery-find-vs-context-sel/16)
|
||||||
|
|
||||||
<a name="jquery--find"></a><a name="25.4"></a>
|
<a name="jquery--find"></a><a name="25.4"></a>
|
||||||
- [26.4](#jquery--find) Use `find` with scoped jQuery object queries.
|
- [26.4](#jquery--find) Use `find` with scoped jQuery object queries.
|
||||||
@@ -3649,7 +3746,7 @@ Other Style Guides
|
|||||||
## ECMAScript 5 Compatibility
|
## ECMAScript 5 Compatibility
|
||||||
|
|
||||||
<a name="es5-compat--kangax"></a><a name="26.1"></a>
|
<a name="es5-compat--kangax"></a><a name="26.1"></a>
|
||||||
- [27.1](#es5-compat--kangax) Refer to [Kangax](https://twitter.com/kangax/)’s ES5 [compatibility table](https://kangax.github.io/es5-compat-table/).
|
- [27.1](#es5-compat--kangax) Refer to [Kangax](https://twitter.com/kangax/)’s ES5 [compatibility table](https://compat-table.github.io/compat-table/es5/).
|
||||||
|
|
||||||
**[⬆ back to top](#table-of-contents)**
|
**[⬆ back to top](#table-of-contents)**
|
||||||
|
|
||||||
@@ -3739,19 +3836,19 @@ Other Style Guides
|
|||||||
- Be cautious about stubs and mocks - they can make your tests more brittle.
|
- Be cautious about stubs and mocks - they can make your tests more brittle.
|
||||||
- We primarily use [`mocha`](https://www.npmjs.com/package/mocha) and [`jest`](https://www.npmjs.com/package/jest) at Airbnb. [`tape`](https://www.npmjs.com/package/tape) is also used occasionally for small, separate modules.
|
- We primarily use [`mocha`](https://www.npmjs.com/package/mocha) and [`jest`](https://www.npmjs.com/package/jest) at Airbnb. [`tape`](https://www.npmjs.com/package/tape) is also used occasionally for small, separate modules.
|
||||||
- 100% test coverage is a good goal to strive for, even if it’s not always practical to reach it.
|
- 100% test coverage is a good goal to strive for, even if it’s not always practical to reach it.
|
||||||
- Whenever you fix a bug, _write a regression test_. A bug fixed without a regression test is almost certainly going to break again in the future.
|
- Whenever you fix a bug, *write a regression test*. A bug fixed without a regression test is almost certainly going to break again in the future.
|
||||||
|
|
||||||
**[⬆ back to top](#table-of-contents)**
|
**[⬆ back to top](#table-of-contents)**
|
||||||
|
|
||||||
## Performance
|
## Performance
|
||||||
|
|
||||||
- [On Layout & Web Performance](https://www.kellegous.com/j/2013/01/26/layout-performance/)
|
- [On Layout & Web Performance](https://www.kellegous.com/j/2013/01/26/layout-performance/)
|
||||||
- [String vs Array Concat](https://jsperf.com/string-vs-array-concat/2)
|
- [String vs Array Concat](https://web.archive.org/web/20200414200857/https://jsperf.com/string-vs-array-concat/2)
|
||||||
- [Try/Catch Cost In a Loop](https://jsperf.com/try-catch-in-loop-cost/12)
|
- [Try/Catch Cost In a Loop](https://web.archive.org/web/20200414190827/https://jsperf.com/try-catch-in-loop-cost/12)
|
||||||
- [Bang Function](https://jsperf.com/bang-function)
|
- [Bang Function](https://web.archive.org/web/20200414205426/https://jsperf.com/bang-function)
|
||||||
- [jQuery Find vs Context, Selector](https://jsperf.com/jquery-find-vs-context-sel/164)
|
- [jQuery Find vs Context, Selector](https://web.archive.org/web/20200414200850/https://jsperf.com/jquery-find-vs-context-sel/164)
|
||||||
- [innerHTML vs textContent for script text](https://jsperf.com/innerhtml-vs-textcontent-for-script-text)
|
- [innerHTML vs textContent for script text](https://web.archive.org/web/20200414205428/https://jsperf.com/innerhtml-vs-textcontent-for-script-text)
|
||||||
- [Long String Concatenation](https://jsperf.com/ya-string-concat/38)
|
- [Long String Concatenation](https://web.archive.org/web/20200414203914/https://jsperf.com/ya-string-concat/38)
|
||||||
- [Are JavaScript functions like `map()`, `reduce()`, and `filter()` optimized for traversing arrays?](https://www.quora.com/JavaScript-programming-language-Are-Javascript-functions-like-map-reduce-and-filter-already-optimized-for-traversing-array/answer/Quildreen-Motta)
|
- [Are JavaScript functions like `map()`, `reduce()`, and `filter()` optimized for traversing arrays?](https://www.quora.com/JavaScript-programming-language-Are-Javascript-functions-like-map-reduce-and-filter-already-optimized-for-traversing-array/answer/Quildreen-Motta)
|
||||||
- Loading...
|
- Loading...
|
||||||
|
|
||||||
@@ -3763,8 +3860,9 @@ Other Style Guides
|
|||||||
|
|
||||||
- [Latest ECMA spec](https://tc39.github.io/ecma262/)
|
- [Latest ECMA spec](https://tc39.github.io/ecma262/)
|
||||||
- [ExploringJS](https://exploringjs.com/)
|
- [ExploringJS](https://exploringjs.com/)
|
||||||
- [ES6 Compatibility Table](https://kangax.github.io/compat-table/es6/)
|
- [ES6 Compatibility Table](https://compat-table.github.io/compat-table/es6/)
|
||||||
- [Comprehensive Overview of ES6 Features](http://es6-features.org/)
|
- [Comprehensive Overview of ES6 Features](https://web.archive.org/web/20240404212626/http://es6-features.org/)
|
||||||
|
- [JavaScript Roadmap](https://roadmap.sh/javascript)
|
||||||
|
|
||||||
**Read This**
|
**Read This**
|
||||||
|
|
||||||
@@ -3815,7 +3913,7 @@ Other Style Guides
|
|||||||
- [Superhero.js](http://superherojs.com/) - Kim Joar Bekkelund, Mads Mobæk, & Olav Bjorkoy
|
- [Superhero.js](http://superherojs.com/) - Kim Joar Bekkelund, Mads Mobæk, & Olav Bjorkoy
|
||||||
- [JSBooks](https://jsbooks.revolunet.com/) - Julien Bouquillon
|
- [JSBooks](https://jsbooks.revolunet.com/) - Julien Bouquillon
|
||||||
- [Third Party JavaScript](https://www.manning.com/books/third-party-javascript) - Ben Vinegar and Anton Kovalyov
|
- [Third Party JavaScript](https://www.manning.com/books/third-party-javascript) - Ben Vinegar and Anton Kovalyov
|
||||||
- [Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript](https://amzn.com/0321812182) - David Herman
|
- [Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript](https://amzn.com/dp/0321812182) - David Herman
|
||||||
- [Eloquent JavaScript](https://eloquentjavascript.net/) - Marijn Haverbeke
|
- [Eloquent JavaScript](https://eloquentjavascript.net/) - Marijn Haverbeke
|
||||||
- [You Don’t Know JS: ES6 & Beyond](https://shop.oreilly.com/product/0636920033769.do) - Kyle Simpson
|
- [You Don’t Know JS: ES6 & Beyond](https://shop.oreilly.com/product/0636920033769.do) - Kyle Simpson
|
||||||
|
|
||||||
@@ -3854,7 +3952,6 @@ Other Style Guides
|
|||||||
- **Axept**: [axept/javascript](https://github.com/axept/javascript)
|
- **Axept**: [axept/javascript](https://github.com/axept/javascript)
|
||||||
- **Billabong**: [billabong/javascript](https://github.com/billabong/javascript)
|
- **Billabong**: [billabong/javascript](https://github.com/billabong/javascript)
|
||||||
- **Bisk**: [bisk](https://github.com/Bisk/)
|
- **Bisk**: [bisk](https://github.com/Bisk/)
|
||||||
- **Bonhomme**: [bonhommeparis/javascript](https://github.com/bonhommeparis/javascript)
|
|
||||||
- **Brainshark**: [brainshark/javascript](https://github.com/brainshark/javascript)
|
- **Brainshark**: [brainshark/javascript](https://github.com/brainshark/javascript)
|
||||||
- **CaseNine**: [CaseNine/javascript](https://github.com/CaseNine/javascript)
|
- **CaseNine**: [CaseNine/javascript](https://github.com/CaseNine/javascript)
|
||||||
- **Cerner**: [Cerner](https://github.com/cerner/)
|
- **Cerner**: [Cerner](https://github.com/cerner/)
|
||||||
@@ -3867,7 +3964,6 @@ Other Style Guides
|
|||||||
- **Digitpaint** [digitpaint/javascript](https://github.com/digitpaint/javascript)
|
- **Digitpaint** [digitpaint/javascript](https://github.com/digitpaint/javascript)
|
||||||
- **Drupal**: [www.drupal.org](https://git.drupalcode.org/project/drupal/blob/8.6.x/core/.eslintrc.json)
|
- **Drupal**: [www.drupal.org](https://git.drupalcode.org/project/drupal/blob/8.6.x/core/.eslintrc.json)
|
||||||
- **Ecosia**: [ecosia/javascript](https://github.com/ecosia/javascript)
|
- **Ecosia**: [ecosia/javascript](https://github.com/ecosia/javascript)
|
||||||
- **Evernote**: [evernote/javascript-style-guide](https://github.com/evernote/javascript-style-guide)
|
|
||||||
- **Evolution Gaming**: [evolution-gaming/javascript](https://github.com/evolution-gaming/javascript)
|
- **Evolution Gaming**: [evolution-gaming/javascript](https://github.com/evolution-gaming/javascript)
|
||||||
- **EvozonJs**: [evozonjs/javascript](https://github.com/evozonjs/javascript)
|
- **EvozonJs**: [evozonjs/javascript](https://github.com/evozonjs/javascript)
|
||||||
- **ExactTarget**: [ExactTarget/javascript](https://github.com/ExactTarget/javascript)
|
- **ExactTarget**: [ExactTarget/javascript](https://github.com/ExactTarget/javascript)
|
||||||
@@ -3880,10 +3976,10 @@ Other Style Guides
|
|||||||
- **Grooveshark**: [grooveshark/javascript](https://github.com/grooveshark/javascript)
|
- **Grooveshark**: [grooveshark/javascript](https://github.com/grooveshark/javascript)
|
||||||
- **Grupo-Abraxas**: [Grupo-Abraxas/javascript](https://github.com/Grupo-Abraxas/javascript)
|
- **Grupo-Abraxas**: [Grupo-Abraxas/javascript](https://github.com/Grupo-Abraxas/javascript)
|
||||||
- **Happeo**: [happeo/javascript](https://github.com/happeo/javascript)
|
- **Happeo**: [happeo/javascript](https://github.com/happeo/javascript)
|
||||||
- **Honey**: [honeyscience/javascript](https://github.com/honeyscience/javascript)
|
|
||||||
- **How About We**: [howaboutwe/javascript](https://github.com/howaboutwe/javascript-style-guide)
|
- **How About We**: [howaboutwe/javascript](https://github.com/howaboutwe/javascript-style-guide)
|
||||||
- **HubSpot**: [HubSpot/javascript](https://github.com/HubSpot/javascript)
|
- **HubSpot**: [HubSpot/javascript](https://github.com/HubSpot/javascript)
|
||||||
- **Hyper**: [hyperoslo/javascript-playbook](https://github.com/hyperoslo/javascript-playbook/blob/master/style.md)
|
- **Hyper**: [hyperoslo/javascript-playbook](https://github.com/hyperoslo/javascript-playbook/blob/master/style.md)
|
||||||
|
- **ILIAS**: [ILIAS](https://github.com/ILIAS-eLearning/ILIAS)
|
||||||
- **InterCity Group**: [intercitygroup/javascript-style-guide](https://github.com/intercitygroup/javascript-style-guide)
|
- **InterCity Group**: [intercitygroup/javascript-style-guide](https://github.com/intercitygroup/javascript-style-guide)
|
||||||
- **Jam3**: [Jam3/Javascript-Code-Conventions](https://github.com/Jam3/Javascript-Code-Conventions)
|
- **Jam3**: [Jam3/Javascript-Code-Conventions](https://github.com/Jam3/Javascript-Code-Conventions)
|
||||||
- **JSSolutions**: [JSSolutions/javascript](https://github.com/JSSolutions/javascript)
|
- **JSSolutions**: [JSSolutions/javascript](https://github.com/JSSolutions/javascript)
|
||||||
@@ -3897,17 +3993,15 @@ Other Style Guides
|
|||||||
- **MinnPost**: [MinnPost/javascript](https://github.com/MinnPost/javascript)
|
- **MinnPost**: [MinnPost/javascript](https://github.com/MinnPost/javascript)
|
||||||
- **MitocGroup**: [MitocGroup/javascript](https://github.com/MitocGroup/javascript)
|
- **MitocGroup**: [MitocGroup/javascript](https://github.com/MitocGroup/javascript)
|
||||||
- **Muber**: [muber](https://github.com/muber/)
|
- **Muber**: [muber](https://github.com/muber/)
|
||||||
- **National Geographic**: [natgeo](https://github.com/natgeo/)
|
- **National Geographic Society**: [natgeosociety](https://github.com/natgeosociety/)
|
||||||
- **NullDev**: [NullDevCo/JavaScript-Styleguide](https://github.com/NullDevCo/JavaScript-Styleguide)
|
- **NullDev**: [NullDevCo/JavaScript-Styleguide](https://github.com/NullDevCo/JavaScript-Styleguide)
|
||||||
- **Nulogy**: [nulogy/javascript](https://github.com/nulogy/javascript)
|
- **Nulogy**: [nulogy/javascript](https://github.com/nulogy/javascript)
|
||||||
- **Orange Hill Development**: [orangehill/javascript](https://github.com/orangehill/javascript)
|
- **Orange Hill Development**: [orangehill/javascript](https://github.com/orangehill/javascript)
|
||||||
- **Orion Health**: [orionhealth/javascript](https://github.com/orionhealth/javascript)
|
- **Orion Health**: [orionhealth/javascript](https://github.com/orionhealth/javascript)
|
||||||
- **OutBoxSoft**: [OutBoxSoft/javascript](https://github.com/OutBoxSoft/javascript)
|
|
||||||
- **Peerby**: [Peerby/javascript](https://github.com/Peerby/javascript)
|
- **Peerby**: [Peerby/javascript](https://github.com/Peerby/javascript)
|
||||||
- **Pier 1**: [Pier1/javascript](https://github.com/pier1/javascript)
|
- **Pier 1**: [Pier1/javascript](https://github.com/pier1/javascript)
|
||||||
- **Qotto**: [Qotto/javascript-style-guide](https://github.com/Qotto/javascript-style-guide)
|
- **Qotto**: [Qotto/javascript-style-guide](https://github.com/Qotto/javascript-style-guide)
|
||||||
- **React**: [facebook.github.io/react/contributing/how-to-contribute.html#style-guide](https://facebook.github.io/react/contributing/how-to-contribute.html#style-guide)
|
- **React**: [reactjs.org/docs/how-to-contribute.html#style-guide](https://reactjs.org/docs/how-to-contribute.html#style-guide)
|
||||||
- **REI**: [reidev/js-style-guide](https://github.com/rei/code-style-guides/)
|
|
||||||
- **Ripple**: [ripple/javascript-style-guide](https://github.com/ripple/javascript-style-guide)
|
- **Ripple**: [ripple/javascript-style-guide](https://github.com/ripple/javascript-style-guide)
|
||||||
- **Sainsbury’s Supermarkets**: [jsainsburyplc](https://github.com/jsainsburyplc)
|
- **Sainsbury’s Supermarkets**: [jsainsburyplc](https://github.com/jsainsburyplc)
|
||||||
- **Shutterfly**: [shutterfly/javascript](https://github.com/shutterfly/javascript)
|
- **Shutterfly**: [shutterfly/javascript](https://github.com/shutterfly/javascript)
|
||||||
@@ -3931,6 +4025,7 @@ Other Style Guides
|
|||||||
- **WeBox Studio**: [weboxstudio/javascript](https://github.com/weboxstudio/javascript)
|
- **WeBox Studio**: [weboxstudio/javascript](https://github.com/weboxstudio/javascript)
|
||||||
- **Weggo**: [Weggo/javascript](https://github.com/Weggo/javascript)
|
- **Weggo**: [Weggo/javascript](https://github.com/Weggo/javascript)
|
||||||
- **Zillow**: [zillow/javascript](https://github.com/zillow/javascript)
|
- **Zillow**: [zillow/javascript](https://github.com/zillow/javascript)
|
||||||
|
- **Zit Software**: [zit-software/javascript](https://github.com/zit-software/javascript)
|
||||||
- **ZocDoc**: [ZocDoc/javascript](https://github.com/ZocDoc/javascript)
|
- **ZocDoc**: [ZocDoc/javascript](https://github.com/ZocDoc/javascript)
|
||||||
|
|
||||||
**[⬆ back to top](#table-of-contents)**
|
**[⬆ back to top](#table-of-contents)**
|
||||||
|
|||||||
@@ -34,7 +34,7 @@
|
|||||||
|
|
||||||
- Use an underscore for modifiers to other styles.
|
- Use an underscore for modifiers to other styles.
|
||||||
|
|
||||||
> Why? Similar to BEM, this naming convention makes it clear that the styles are intended to modify the element preceded by the underscore. Underscores do not need to be quoted, so they are preferred over other characters, such as dashes.
|
> Why? Similar to [BEM](https://getbem.com/introduction/), this naming convention makes it clear that the styles are intended to modify the element preceded by the underscore. Underscores do not need to be quoted, so they are preferred over other characters, such as dashes.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
// bad
|
// bad
|
||||||
|
|||||||
@@ -40,7 +40,7 @@
|
|||||||
},
|
},
|
||||||
"homepage": "https://github.com/airbnb/javascript",
|
"homepage": "https://github.com/airbnb/javascript",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"markdownlint": "^0.20.4",
|
"markdownlint": "^0.29.0",
|
||||||
"markdownlint-cli": "^0.23.2"
|
"markdownlint-cli": "^0.35.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -15,7 +15,7 @@
|
|||||||
- [readme] some updates
|
- [readme] some updates
|
||||||
- [meta] use `prepublishOnly` script for npm 7+
|
- [meta] use `prepublishOnly` script for npm 7+
|
||||||
- [deps] update `eslint-plugin-import`, `eslint-plugin-react`, `object.entries`
|
- [deps] update `eslint-plugin-import`, `eslint-plugin-react`, `object.entries`
|
||||||
- [dev deps] update `@babel/runtime`, ``tape`
|
- [dev deps] update `@babel/runtime`, `tape`
|
||||||
|
|
||||||
14.2.1 / 2020-11-06
|
14.2.1 / 2020-11-06
|
||||||
==================
|
==================
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
"./package.json": "./package.json"
|
"./package.json": "./package.json"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"prelint": "eclint check * rules/* test/*",
|
"prelint": "eclint check $(git ls-files | xargs find 2> /dev/null | grep -vE 'node_modules|\\.git')",
|
||||||
"lint": "eslint --report-unused-disable-directives .",
|
"lint": "eslint --report-unused-disable-directives .",
|
||||||
"pretests-only": "node ./test/requires",
|
"pretests-only": "node ./test/requires",
|
||||||
"tests-only": "babel-tape-runner ./test/test-*.js",
|
"tests-only": "babel-tape-runner ./test/test-*.js",
|
||||||
@@ -68,27 +68,25 @@
|
|||||||
},
|
},
|
||||||
"homepage": "https://github.com/airbnb/javascript",
|
"homepage": "https://github.com/airbnb/javascript",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/runtime": "^7.16.3",
|
"@babel/runtime": "^7.25.6",
|
||||||
"babel-preset-airbnb": "^4.5.0",
|
"babel-preset-airbnb": "^4.5.0",
|
||||||
"babel-tape-runner": "^3.0.0",
|
"babel-tape-runner": "^3.0.0",
|
||||||
"eclint": "^2.8.1",
|
"eclint": "^2.8.1",
|
||||||
"eslint": "^7.32.0 || ^8.2.0",
|
"eslint": "^7.32.0 || ^8.2.0",
|
||||||
"eslint-find-rules": "^4.0.0",
|
"eslint-find-rules": "^4.1.0",
|
||||||
"eslint-plugin-import": "^2.25.3",
|
"eslint-plugin-import": "^2.30.0",
|
||||||
"in-publish": "^2.0.1",
|
"in-publish": "^2.0.1",
|
||||||
"safe-publish-latest": "^2.0.0",
|
"safe-publish-latest": "^2.0.0",
|
||||||
"tape": "^5.3.2"
|
"tape": "^5.9.0"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"eslint": "^7.32.0 || ^8.2.0",
|
"eslint": "^7.32.0 || ^8.2.0",
|
||||||
"eslint-plugin-import": "^2.25.3"
|
"eslint-plugin-import": "^2.30.0"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": "^10.12.0 || >=12.0.0"
|
"node": "^10.12.0 || >=12.0.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"confusing-browser-globals": "^1.0.10",
|
"confusing-browser-globals": "^1.0.11"
|
||||||
"object.assign": "^4.1.2",
|
|
||||||
"object.entries": "^1.1.5"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -67,6 +67,7 @@ module.exports = {
|
|||||||
|
|
||||||
// disallow the use of alert, confirm, and prompt
|
// disallow the use of alert, confirm, and prompt
|
||||||
// https://eslint.org/docs/rules/no-alert
|
// https://eslint.org/docs/rules/no-alert
|
||||||
|
// TODO: enable, semver-major
|
||||||
'no-alert': 'warn',
|
'no-alert': 'warn',
|
||||||
|
|
||||||
// disallow use of arguments.caller or arguments.callee
|
// disallow use of arguments.caller or arguments.callee
|
||||||
@@ -103,6 +104,11 @@ module.exports = {
|
|||||||
// https://eslint.org/docs/rules/no-empty-pattern
|
// https://eslint.org/docs/rules/no-empty-pattern
|
||||||
'no-empty-pattern': 'error',
|
'no-empty-pattern': 'error',
|
||||||
|
|
||||||
|
// Disallow empty static blocks
|
||||||
|
// https://eslint.org/docs/latest/rules/no-empty-static-block
|
||||||
|
// TODO: semver-major, enable
|
||||||
|
'no-empty-static-block': 'off',
|
||||||
|
|
||||||
// disallow comparisons to null without a type-checking operator
|
// disallow comparisons to null without a type-checking operator
|
||||||
// https://eslint.org/docs/rules/no-eq-null
|
// https://eslint.org/docs/rules/no-eq-null
|
||||||
'no-eq-null': 'off',
|
'no-eq-null': 'off',
|
||||||
@@ -211,6 +217,11 @@ module.exports = {
|
|||||||
// https://eslint.org/docs/rules/no-nonoctal-decimal-escape
|
// https://eslint.org/docs/rules/no-nonoctal-decimal-escape
|
||||||
'no-nonoctal-decimal-escape': 'error',
|
'no-nonoctal-decimal-escape': 'error',
|
||||||
|
|
||||||
|
// Disallow calls to the Object constructor without an argument
|
||||||
|
// https://eslint.org/docs/latest/rules/no-object-constructor
|
||||||
|
// TODO: enable, semver-major
|
||||||
|
'no-object-constructor': 'off',
|
||||||
|
|
||||||
// disallow use of (old style) octal literals
|
// disallow use of (old style) octal literals
|
||||||
// https://eslint.org/docs/rules/no-octal
|
// https://eslint.org/docs/rules/no-octal
|
||||||
'no-octal': 'error',
|
'no-octal': 'error',
|
||||||
|
|||||||
@@ -26,6 +26,11 @@ module.exports = {
|
|||||||
// disallow use of console
|
// disallow use of console
|
||||||
'no-console': 'warn',
|
'no-console': 'warn',
|
||||||
|
|
||||||
|
// Disallows expressions where the operation doesn't affect the value
|
||||||
|
// https://eslint.org/docs/rules/no-constant-binary-expression
|
||||||
|
// TODO: semver-major, enable
|
||||||
|
'no-constant-binary-expression': 'off',
|
||||||
|
|
||||||
// disallow use of constant expressions in conditions
|
// disallow use of constant expressions in conditions
|
||||||
'no-constant-condition': 'warn',
|
'no-constant-condition': 'warn',
|
||||||
|
|
||||||
@@ -100,6 +105,11 @@ module.exports = {
|
|||||||
// disallow the use of object properties of the global object (Math and JSON) as functions
|
// disallow the use of object properties of the global object (Math and JSON) as functions
|
||||||
'no-obj-calls': 'error',
|
'no-obj-calls': 'error',
|
||||||
|
|
||||||
|
// Disallow new operators with global non-constructor functions
|
||||||
|
// https://eslint.org/docs/latest/rules/no-new-native-nonconstructor
|
||||||
|
// TODO: semver-major, enable
|
||||||
|
'no-new-native-nonconstructor': 'off',
|
||||||
|
|
||||||
// Disallow returning values from Promise executor functions
|
// Disallow returning values from Promise executor functions
|
||||||
// https://eslint.org/docs/rules/no-promise-executor-return
|
// https://eslint.org/docs/rules/no-promise-executor-return
|
||||||
'no-promise-executor-return': 'error',
|
'no-promise-executor-return': 'error',
|
||||||
|
|||||||
@@ -53,7 +53,7 @@ module.exports = {
|
|||||||
|
|
||||||
// disallow importing from the same path more than once
|
// disallow importing from the same path more than once
|
||||||
// https://eslint.org/docs/rules/no-duplicate-imports
|
// https://eslint.org/docs/rules/no-duplicate-imports
|
||||||
// replaced by https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-duplicates.md
|
// replaced by https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-duplicates.md
|
||||||
'no-duplicate-imports': 'off',
|
'no-duplicate-imports': 'off',
|
||||||
|
|
||||||
// disallow symbol constructor
|
// disallow symbol constructor
|
||||||
|
|||||||
@@ -33,40 +33,40 @@ module.exports = {
|
|||||||
// Static analysis:
|
// Static analysis:
|
||||||
|
|
||||||
// ensure imports point to files/modules that can be resolved
|
// ensure imports point to files/modules that can be resolved
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-unresolved.md
|
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-unresolved.md
|
||||||
'import/no-unresolved': ['error', { commonjs: true, caseSensitive: true }],
|
'import/no-unresolved': ['error', { commonjs: true, caseSensitive: true }],
|
||||||
|
|
||||||
// ensure named imports coupled with named exports
|
// ensure named imports coupled with named exports
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/named.md#when-not-to-use-it
|
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/named.md#when-not-to-use-it
|
||||||
'import/named': 'error',
|
'import/named': 'error',
|
||||||
|
|
||||||
// ensure default import coupled with default export
|
// ensure default import coupled with default export
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/default.md#when-not-to-use-it
|
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/default.md#when-not-to-use-it
|
||||||
'import/default': 'off',
|
'import/default': 'off',
|
||||||
|
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/namespace.md
|
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/namespace.md
|
||||||
'import/namespace': 'off',
|
'import/namespace': 'off',
|
||||||
|
|
||||||
// Helpful warnings:
|
// Helpful warnings:
|
||||||
|
|
||||||
// disallow invalid exports, e.g. multiple defaults
|
// disallow invalid exports, e.g. multiple defaults
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/export.md
|
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/export.md
|
||||||
'import/export': 'error',
|
'import/export': 'error',
|
||||||
|
|
||||||
// do not allow a default import name to match a named export
|
// do not allow a default import name to match a named export
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-named-as-default.md
|
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-named-as-default.md
|
||||||
'import/no-named-as-default': 'error',
|
'import/no-named-as-default': 'error',
|
||||||
|
|
||||||
// warn on accessing default export property names that are also named exports
|
// warn on accessing default export property names that are also named exports
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-named-as-default-member.md
|
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-named-as-default-member.md
|
||||||
'import/no-named-as-default-member': 'error',
|
'import/no-named-as-default-member': 'error',
|
||||||
|
|
||||||
// disallow use of jsdoc-marked-deprecated imports
|
// disallow use of jsdoc-marked-deprecated imports
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-deprecated.md
|
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-deprecated.md
|
||||||
'import/no-deprecated': 'off',
|
'import/no-deprecated': 'off',
|
||||||
|
|
||||||
// Forbid the use of extraneous packages
|
// Forbid the use of extraneous packages
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-extraneous-dependencies.md
|
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-extraneous-dependencies.md
|
||||||
// paths are treated both as absolute paths, and relative to process.cwd()
|
// paths are treated both as absolute paths, and relative to process.cwd()
|
||||||
'import/no-extraneous-dependencies': ['error', {
|
'import/no-extraneous-dependencies': ['error', {
|
||||||
devDependencies: [
|
devDependencies: [
|
||||||
@@ -97,46 +97,46 @@ module.exports = {
|
|||||||
}],
|
}],
|
||||||
|
|
||||||
// Forbid mutable exports
|
// Forbid mutable exports
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-mutable-exports.md
|
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-mutable-exports.md
|
||||||
'import/no-mutable-exports': 'error',
|
'import/no-mutable-exports': 'error',
|
||||||
|
|
||||||
// Module systems:
|
// Module systems:
|
||||||
|
|
||||||
// disallow require()
|
// disallow require()
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-commonjs.md
|
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-commonjs.md
|
||||||
'import/no-commonjs': 'off',
|
'import/no-commonjs': 'off',
|
||||||
|
|
||||||
// disallow AMD require/define
|
// disallow AMD require/define
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-amd.md
|
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-amd.md
|
||||||
'import/no-amd': 'error',
|
'import/no-amd': 'error',
|
||||||
|
|
||||||
// No Node.js builtin modules
|
// No Node.js builtin modules
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-nodejs-modules.md
|
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-nodejs-modules.md
|
||||||
// TODO: enable?
|
// TODO: enable?
|
||||||
'import/no-nodejs-modules': 'off',
|
'import/no-nodejs-modules': 'off',
|
||||||
|
|
||||||
// Style guide:
|
// Style guide:
|
||||||
|
|
||||||
// disallow non-import statements appearing before import statements
|
// disallow non-import statements appearing before import statements
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/first.md
|
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/first.md
|
||||||
'import/first': 'error',
|
'import/first': 'error',
|
||||||
|
|
||||||
// disallow non-import statements appearing before import statements
|
// disallow non-import statements appearing before import statements
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/imports-first.md
|
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/imports-first.md
|
||||||
// deprecated: use `import/first`
|
// deprecated: use `import/first`
|
||||||
'import/imports-first': 'off',
|
'import/imports-first': 'off',
|
||||||
|
|
||||||
// disallow duplicate imports
|
// disallow duplicate imports
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-duplicates.md
|
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-duplicates.md
|
||||||
'import/no-duplicates': 'error',
|
'import/no-duplicates': 'error',
|
||||||
|
|
||||||
// disallow namespace imports
|
// disallow namespace imports
|
||||||
// TODO: enable?
|
// TODO: enable?
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-namespace.md
|
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-namespace.md
|
||||||
'import/no-namespace': 'off',
|
'import/no-namespace': 'off',
|
||||||
|
|
||||||
// Ensure consistent use of file extension within the import path
|
// Ensure consistent use of file extension within the import path
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/extensions.md
|
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/extensions.md
|
||||||
'import/extensions': ['error', 'ignorePackages', {
|
'import/extensions': ['error', 'ignorePackages', {
|
||||||
js: 'never',
|
js: 'never',
|
||||||
mjs: 'never',
|
mjs: 'never',
|
||||||
@@ -144,62 +144,62 @@ module.exports = {
|
|||||||
}],
|
}],
|
||||||
|
|
||||||
// ensure absolute imports are above relative imports and that unassigned imports are ignored
|
// ensure absolute imports are above relative imports and that unassigned imports are ignored
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/order.md
|
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/order.md
|
||||||
// TODO: enforce a stricter convention in module import order?
|
// TODO: enforce a stricter convention in module import order?
|
||||||
'import/order': ['error', { groups: [['builtin', 'external', 'internal']] }],
|
'import/order': ['error', { groups: [['builtin', 'external', 'internal']] }],
|
||||||
|
|
||||||
// Require a newline after the last import/require in a group
|
// Require a newline after the last import/require in a group
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/newline-after-import.md
|
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/newline-after-import.md
|
||||||
'import/newline-after-import': 'error',
|
'import/newline-after-import': 'error',
|
||||||
|
|
||||||
// Require modules with a single export to use a default export
|
// Require modules with a single export to use a default export
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/prefer-default-export.md
|
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/prefer-default-export.md
|
||||||
'import/prefer-default-export': 'error',
|
'import/prefer-default-export': 'error',
|
||||||
|
|
||||||
// Restrict which files can be imported in a given folder
|
// Restrict which files can be imported in a given folder
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-restricted-paths.md
|
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-restricted-paths.md
|
||||||
'import/no-restricted-paths': 'off',
|
'import/no-restricted-paths': 'off',
|
||||||
|
|
||||||
// Forbid modules to have too many dependencies
|
// Forbid modules to have too many dependencies
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/max-dependencies.md
|
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/max-dependencies.md
|
||||||
'import/max-dependencies': ['off', { max: 10 }],
|
'import/max-dependencies': ['off', { max: 10 }],
|
||||||
|
|
||||||
// Forbid import of modules using absolute paths
|
// Forbid import of modules using absolute paths
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-absolute-path.md
|
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-absolute-path.md
|
||||||
'import/no-absolute-path': 'error',
|
'import/no-absolute-path': 'error',
|
||||||
|
|
||||||
// Forbid require() calls with expressions
|
// Forbid require() calls with expressions
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-dynamic-require.md
|
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-dynamic-require.md
|
||||||
'import/no-dynamic-require': 'error',
|
'import/no-dynamic-require': 'error',
|
||||||
|
|
||||||
// prevent importing the submodules of other modules
|
// prevent importing the submodules of other modules
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-internal-modules.md
|
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-internal-modules.md
|
||||||
'import/no-internal-modules': ['off', {
|
'import/no-internal-modules': ['off', {
|
||||||
allow: [],
|
allow: [],
|
||||||
}],
|
}],
|
||||||
|
|
||||||
// Warn if a module could be mistakenly parsed as a script by a consumer
|
// Warn if a module could be mistakenly parsed as a script by a consumer
|
||||||
// leveraging Unambiguous JavaScript Grammar
|
// leveraging Unambiguous JavaScript Grammar
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/unambiguous.md
|
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/unambiguous.md
|
||||||
// this should not be enabled until this proposal has at least been *presented* to TC39.
|
// this should not be enabled until this proposal has at least been *presented* to TC39.
|
||||||
// At the moment, it's not a thing.
|
// At the moment, it's not a thing.
|
||||||
'import/unambiguous': 'off',
|
'import/unambiguous': 'off',
|
||||||
|
|
||||||
// Forbid Webpack loader syntax in imports
|
// Forbid Webpack loader syntax in imports
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-webpack-loader-syntax.md
|
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-webpack-loader-syntax.md
|
||||||
'import/no-webpack-loader-syntax': 'error',
|
'import/no-webpack-loader-syntax': 'error',
|
||||||
|
|
||||||
// Prevent unassigned imports
|
// Prevent unassigned imports
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-unassigned-import.md
|
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-unassigned-import.md
|
||||||
// importing for side effects is perfectly acceptable, if you need side effects.
|
// importing for side effects is perfectly acceptable, if you need side effects.
|
||||||
'import/no-unassigned-import': 'off',
|
'import/no-unassigned-import': 'off',
|
||||||
|
|
||||||
// Prevent importing the default as if it were named
|
// Prevent importing the default as if it were named
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-named-default.md
|
// https://github.com/import-js/eslint-plugin-import/blob/master/docs/rules/no-named-default.md
|
||||||
'import/no-named-default': 'error',
|
'import/no-named-default': 'error',
|
||||||
|
|
||||||
// Reports if a module's default export is unnamed
|
// Reports if a module's default export is unnamed
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/d9b712ac7fd1fddc391f7b234827925c160d956f/docs/rules/no-anonymous-default-export.md
|
// https://github.com/import-js/eslint-plugin-import/blob/d9b712ac7fd1fddc391f7b234827925c160d956f/docs/rules/no-anonymous-default-export.md
|
||||||
'import/no-anonymous-default-export': ['off', {
|
'import/no-anonymous-default-export': ['off', {
|
||||||
allowArray: false,
|
allowArray: false,
|
||||||
allowArrowFunction: false,
|
allowArrowFunction: false,
|
||||||
@@ -210,49 +210,49 @@ module.exports = {
|
|||||||
}],
|
}],
|
||||||
|
|
||||||
// This rule enforces that all exports are declared at the bottom of the file.
|
// This rule enforces that all exports are declared at the bottom of the file.
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/98acd6afd04dcb6920b81330114e146dc8532ea4/docs/rules/exports-last.md
|
// https://github.com/import-js/eslint-plugin-import/blob/98acd6afd04dcb6920b81330114e146dc8532ea4/docs/rules/exports-last.md
|
||||||
// TODO: enable?
|
// TODO: enable?
|
||||||
'import/exports-last': 'off',
|
'import/exports-last': 'off',
|
||||||
|
|
||||||
// Reports when named exports are not grouped together in a single export declaration
|
// Reports when named exports are not grouped together in a single export declaration
|
||||||
// or when multiple assignments to CommonJS module.exports or exports object are present
|
// or when multiple assignments to CommonJS module.exports or exports object are present
|
||||||
// in a single file.
|
// in a single file.
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/44a038c06487964394b1e15b64f3bd34e5d40cde/docs/rules/group-exports.md
|
// https://github.com/import-js/eslint-plugin-import/blob/44a038c06487964394b1e15b64f3bd34e5d40cde/docs/rules/group-exports.md
|
||||||
'import/group-exports': 'off',
|
'import/group-exports': 'off',
|
||||||
|
|
||||||
// forbid default exports. this is a terrible rule, do not use it.
|
// forbid default exports. this is a terrible rule, do not use it.
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/44a038c06487964394b1e15b64f3bd34e5d40cde/docs/rules/no-default-export.md
|
// https://github.com/import-js/eslint-plugin-import/blob/44a038c06487964394b1e15b64f3bd34e5d40cde/docs/rules/no-default-export.md
|
||||||
'import/no-default-export': 'off',
|
'import/no-default-export': 'off',
|
||||||
|
|
||||||
// Prohibit named exports. this is a terrible rule, do not use it.
|
// Prohibit named exports. this is a terrible rule, do not use it.
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/1ec80fa35fa1819e2d35a70e68fb6a149fb57c5e/docs/rules/no-named-export.md
|
// https://github.com/import-js/eslint-plugin-import/blob/1ec80fa35fa1819e2d35a70e68fb6a149fb57c5e/docs/rules/no-named-export.md
|
||||||
'import/no-named-export': 'off',
|
'import/no-named-export': 'off',
|
||||||
|
|
||||||
// Forbid a module from importing itself
|
// Forbid a module from importing itself
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/44a038c06487964394b1e15b64f3bd34e5d40cde/docs/rules/no-self-import.md
|
// https://github.com/import-js/eslint-plugin-import/blob/44a038c06487964394b1e15b64f3bd34e5d40cde/docs/rules/no-self-import.md
|
||||||
'import/no-self-import': 'error',
|
'import/no-self-import': 'error',
|
||||||
|
|
||||||
// Forbid cyclical dependencies between modules
|
// Forbid cyclical dependencies between modules
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/d81f48a2506182738409805f5272eff4d77c9348/docs/rules/no-cycle.md
|
// https://github.com/import-js/eslint-plugin-import/blob/d81f48a2506182738409805f5272eff4d77c9348/docs/rules/no-cycle.md
|
||||||
'import/no-cycle': ['error', { maxDepth: '∞' }],
|
'import/no-cycle': ['error', { maxDepth: '∞' }],
|
||||||
|
|
||||||
// Ensures that there are no useless path segments
|
// Ensures that there are no useless path segments
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/ebafcbf59ec9f653b2ac2a0156ca3bcba0a7cf57/docs/rules/no-useless-path-segments.md
|
// https://github.com/import-js/eslint-plugin-import/blob/ebafcbf59ec9f653b2ac2a0156ca3bcba0a7cf57/docs/rules/no-useless-path-segments.md
|
||||||
'import/no-useless-path-segments': ['error', { commonjs: true }],
|
'import/no-useless-path-segments': ['error', { commonjs: true }],
|
||||||
|
|
||||||
// dynamic imports require a leading comment with a webpackChunkName
|
// dynamic imports require a leading comment with a webpackChunkName
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/ebafcbf59ec9f653b2ac2a0156ca3bcba0a7cf57/docs/rules/dynamic-import-chunkname.md
|
// https://github.com/import-js/eslint-plugin-import/blob/ebafcbf59ec9f653b2ac2a0156ca3bcba0a7cf57/docs/rules/dynamic-import-chunkname.md
|
||||||
'import/dynamic-import-chunkname': ['off', {
|
'import/dynamic-import-chunkname': ['off', {
|
||||||
importFunctions: [],
|
importFunctions: [],
|
||||||
webpackChunknameFormat: '[0-9a-zA-Z-_/.]+',
|
webpackChunknameFormat: '[0-9a-zA-Z-_/.]+',
|
||||||
}],
|
}],
|
||||||
|
|
||||||
// Use this rule to prevent imports to folders in relative parent paths.
|
// Use this rule to prevent imports to folders in relative parent paths.
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/c34f14f67f077acd5a61b3da9c0b0de298d20059/docs/rules/no-relative-parent-imports.md
|
// https://github.com/import-js/eslint-plugin-import/blob/c34f14f67f077acd5a61b3da9c0b0de298d20059/docs/rules/no-relative-parent-imports.md
|
||||||
'import/no-relative-parent-imports': 'off',
|
'import/no-relative-parent-imports': 'off',
|
||||||
|
|
||||||
// Reports modules without any exports, or with unused exports
|
// Reports modules without any exports, or with unused exports
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/f63dd261809de6883b13b6b5b960e6d7f42a7813/docs/rules/no-unused-modules.md
|
// https://github.com/import-js/eslint-plugin-import/blob/f63dd261809de6883b13b6b5b960e6d7f42a7813/docs/rules/no-unused-modules.md
|
||||||
// TODO: enable once it supports CJS
|
// TODO: enable once it supports CJS
|
||||||
'import/no-unused-modules': ['off', {
|
'import/no-unused-modules': ['off', {
|
||||||
ignoreExports: [],
|
ignoreExports: [],
|
||||||
@@ -261,13 +261,23 @@ module.exports = {
|
|||||||
}],
|
}],
|
||||||
|
|
||||||
// Reports the use of import declarations with CommonJS exports in any module except for the main module.
|
// Reports the use of import declarations with CommonJS exports in any module except for the main module.
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/1012eb951767279ce3b540a4ec4f29236104bb5b/docs/rules/no-import-module-exports.md
|
// https://github.com/import-js/eslint-plugin-import/blob/1012eb951767279ce3b540a4ec4f29236104bb5b/docs/rules/no-import-module-exports.md
|
||||||
'import/no-import-module-exports': ['error', {
|
'import/no-import-module-exports': ['error', {
|
||||||
exceptions: [],
|
exceptions: [],
|
||||||
}],
|
}],
|
||||||
|
|
||||||
// Use this rule to prevent importing packages through relative paths.
|
// Use this rule to prevent importing packages through relative paths.
|
||||||
// https://github.com/benmosher/eslint-plugin-import/blob/1012eb951767279ce3b540a4ec4f29236104bb5b/docs/rules/no-relative-packages.md
|
// https://github.com/import-js/eslint-plugin-import/blob/1012eb951767279ce3b540a4ec4f29236104bb5b/docs/rules/no-relative-packages.md
|
||||||
'import/no-relative-packages': 'error',
|
'import/no-relative-packages': 'error',
|
||||||
|
|
||||||
|
// enforce a consistent style for type specifiers (inline or top-level)
|
||||||
|
// https://github.com/import-js/eslint-plugin-import/blob/d5fc8b670dc8e6903dbb7b0894452f60c03089f5/docs/rules/consistent-type-specifier-style.md
|
||||||
|
// TODO, semver-major: enable (just in case)
|
||||||
|
'import/consistent-type-specifier-style': ['off', 'prefer-inline'],
|
||||||
|
|
||||||
|
// Reports the use of empty named import blocks.
|
||||||
|
// https://github.com/import-js/eslint-plugin-import/blob/d5fc8b670dc8e6903dbb7b0894452f60c03089f5/docs/rules/no-empty-named-blocks.md
|
||||||
|
// TODO, semver-minor: enable
|
||||||
|
'import/no-empty-named-blocks': 'off',
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -191,6 +191,13 @@ module.exports = {
|
|||||||
after: 'always',
|
after: 'always',
|
||||||
}],
|
}],
|
||||||
|
|
||||||
|
// Require or disallow logical assignment logical operator shorthand
|
||||||
|
// https://eslint.org/docs/latest/rules/logical-assignment-operators
|
||||||
|
// TODO, semver-major: enable
|
||||||
|
'logical-assignment-operators': ['off', 'always', {
|
||||||
|
enforceForIfStatements: true,
|
||||||
|
}],
|
||||||
|
|
||||||
// specify the maximum depth that blocks can be nested
|
// specify the maximum depth that blocks can be nested
|
||||||
'max-depth': ['off', 4],
|
'max-depth': ['off', 4],
|
||||||
|
|
||||||
@@ -351,7 +358,8 @@ module.exports = {
|
|||||||
],
|
],
|
||||||
|
|
||||||
// disallow space between function identifier and application
|
// disallow space between function identifier and application
|
||||||
'no-spaced-func': 'error',
|
// deprecated in favor of func-call-spacing
|
||||||
|
'no-spaced-func': 'off',
|
||||||
|
|
||||||
// disallow tab characters entirely
|
// disallow tab characters entirely
|
||||||
'no-tabs': 'error',
|
'no-tabs': 'error',
|
||||||
|
|||||||
@@ -28,7 +28,10 @@ module.exports = {
|
|||||||
message:
|
message:
|
||||||
'Use Number.isNaN instead https://github.com/airbnb/javascript#standard-library--isnan',
|
'Use Number.isNaN instead https://github.com/airbnb/javascript#standard-library--isnan',
|
||||||
},
|
},
|
||||||
].concat(confusingBrowserGlobals),
|
].concat(confusingBrowserGlobals.map((g) => ({
|
||||||
|
name: g,
|
||||||
|
message: `Use window.${g} instead. https://github.com/facebook/create-react-app/blob/HEAD/packages/confusing-browser-globals/README.md`,
|
||||||
|
}))),
|
||||||
|
|
||||||
// disallow declaration of variables already declared in the outer scope
|
// disallow declaration of variables already declared in the outer scope
|
||||||
'no-shadow': 'error',
|
'no-shadow': 'error',
|
||||||
|
|||||||
@@ -6,9 +6,10 @@ import index from '..';
|
|||||||
|
|
||||||
const files = { ...{ index } }; // object spread is to test parsing
|
const files = { ...{ index } }; // object spread is to test parsing
|
||||||
|
|
||||||
fs.readdirSync(path.join(__dirname, '../rules')).forEach((name) => {
|
const rulesDir = path.join(__dirname, '../rules');
|
||||||
|
fs.readdirSync(rulesDir).forEach((name) => {
|
||||||
// eslint-disable-next-line import/no-dynamic-require
|
// eslint-disable-next-line import/no-dynamic-require
|
||||||
files[name] = require(`../rules/${name}`); // eslint-disable-line global-require
|
files[name] = require(path.join(rulesDir, name)); // eslint-disable-line global-require
|
||||||
});
|
});
|
||||||
|
|
||||||
Object.keys(files).forEach((
|
Object.keys(files).forEach((
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
#!/usr/bin/env node
|
#!/usr/bin/env node
|
||||||
|
|
||||||
const assign = require('object.assign');
|
const { isArray } = Array;
|
||||||
const entries = require('object.entries');
|
const { entries } = Object;
|
||||||
const { ESLint } = require('eslint');
|
const { ESLint } = require('eslint');
|
||||||
|
|
||||||
const baseConfig = require('.');
|
const baseConfig = require('.');
|
||||||
@@ -10,7 +10,7 @@ const whitespaceRules = require('./whitespaceRules');
|
|||||||
const severities = ['off', 'warn', 'error'];
|
const severities = ['off', 'warn', 'error'];
|
||||||
|
|
||||||
function getSeverity(ruleConfig) {
|
function getSeverity(ruleConfig) {
|
||||||
if (Array.isArray(ruleConfig)) {
|
if (isArray(ruleConfig)) {
|
||||||
return getSeverity(ruleConfig[0]);
|
return getSeverity(ruleConfig[0]);
|
||||||
}
|
}
|
||||||
if (typeof ruleConfig === 'number') {
|
if (typeof ruleConfig === 'number') {
|
||||||
@@ -20,7 +20,7 @@ function getSeverity(ruleConfig) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function onlyErrorOnRules(rulesToError, config) {
|
async function onlyErrorOnRules(rulesToError, config) {
|
||||||
const errorsOnly = assign({}, config);
|
const errorsOnly = { ...config };
|
||||||
const cli = new ESLint({
|
const cli = new ESLint({
|
||||||
useEslintrc: false,
|
useEslintrc: false,
|
||||||
baseConfig: config
|
baseConfig: config
|
||||||
@@ -33,7 +33,7 @@ async function onlyErrorOnRules(rulesToError, config) {
|
|||||||
const severity = getSeverity(ruleConfig);
|
const severity = getSeverity(ruleConfig);
|
||||||
|
|
||||||
if (rulesToError.indexOf(ruleName) === -1 && severity === 'error') {
|
if (rulesToError.indexOf(ruleName) === -1 && severity === 'error') {
|
||||||
if (Array.isArray(ruleConfig)) {
|
if (isArray(ruleConfig)) {
|
||||||
errorsOnly.rules[ruleName] = ['warn'].concat(ruleConfig.slice(1));
|
errorsOnly.rules[ruleName] = ['warn'].concat(ruleConfig.slice(1));
|
||||||
} else if (typeof ruleConfig === 'number') {
|
} else if (typeof ruleConfig === 'number') {
|
||||||
errorsOnly.rules[ruleName] = 1;
|
errorsOnly.rules[ruleName] = 1;
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
/* eslint global-require: 0 */
|
/* eslint global-require: 0 */
|
||||||
|
|
||||||
|
const { isArray } = Array;
|
||||||
|
const { entries } = Object;
|
||||||
const { CLIEngine } = require('eslint');
|
const { CLIEngine } = require('eslint');
|
||||||
|
|
||||||
if (CLIEngine) {
|
if (CLIEngine) {
|
||||||
/* eslint no-inner-declarations: 0 */
|
/* eslint no-inner-declarations: 0 */
|
||||||
const assign = require('object.assign');
|
|
||||||
const entries = require('object.entries');
|
|
||||||
const whitespaceRules = require('./whitespaceRules');
|
const whitespaceRules = require('./whitespaceRules');
|
||||||
|
|
||||||
const baseConfig = require('.');
|
const baseConfig = require('.');
|
||||||
@@ -13,7 +13,7 @@ if (CLIEngine) {
|
|||||||
const severities = ['off', 'warn', 'error'];
|
const severities = ['off', 'warn', 'error'];
|
||||||
|
|
||||||
function getSeverity(ruleConfig) {
|
function getSeverity(ruleConfig) {
|
||||||
if (Array.isArray(ruleConfig)) {
|
if (isArray(ruleConfig)) {
|
||||||
return getSeverity(ruleConfig[0]);
|
return getSeverity(ruleConfig[0]);
|
||||||
}
|
}
|
||||||
if (typeof ruleConfig === 'number') {
|
if (typeof ruleConfig === 'number') {
|
||||||
@@ -23,7 +23,7 @@ if (CLIEngine) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function onlyErrorOnRules(rulesToError, config) {
|
function onlyErrorOnRules(rulesToError, config) {
|
||||||
const errorsOnly = assign({}, config);
|
const errorsOnly = { ...config };
|
||||||
const cli = new CLIEngine({ baseConfig: config, useEslintrc: false });
|
const cli = new CLIEngine({ baseConfig: config, useEslintrc: false });
|
||||||
const baseRules = cli.getConfigForFile(require.resolve('./')).rules;
|
const baseRules = cli.getConfigForFile(require.resolve('./')).rules;
|
||||||
|
|
||||||
@@ -33,7 +33,7 @@ if (CLIEngine) {
|
|||||||
const severity = getSeverity(ruleConfig);
|
const severity = getSeverity(ruleConfig);
|
||||||
|
|
||||||
if (rulesToError.indexOf(ruleName) === -1 && severity === 'error') {
|
if (rulesToError.indexOf(ruleName) === -1 && severity === 'error') {
|
||||||
if (Array.isArray(ruleConfig)) {
|
if (isArray(ruleConfig)) {
|
||||||
errorsOnly.rules[ruleName] = ['warn'].concat(ruleConfig.slice(1));
|
errorsOnly.rules[ruleName] = ['warn'].concat(ruleConfig.slice(1));
|
||||||
} else if (typeof ruleConfig === 'number') {
|
} else if (typeof ruleConfig === 'number') {
|
||||||
errorsOnly.rules[ruleName] = 1;
|
errorsOnly.rules[ruleName] = 1;
|
||||||
@@ -51,5 +51,11 @@ if (CLIEngine) {
|
|||||||
const path = require('path');
|
const path = require('path');
|
||||||
const { execSync } = require('child_process');
|
const { execSync } = require('child_process');
|
||||||
|
|
||||||
module.exports = JSON.parse(String(execSync(path.join(__dirname, 'whitespace-async.js'))));
|
// NOTE: ESLint adds runtime statistics to the output (so it's no longer JSON) if TIMING is set
|
||||||
|
module.exports = JSON.parse(String(execSync(path.join(__dirname, 'whitespace-async.js'), {
|
||||||
|
env: {
|
||||||
|
...process.env,
|
||||||
|
TIMING: undefined,
|
||||||
|
}
|
||||||
|
})));
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -467,11 +467,11 @@
|
|||||||
[space-in-parens]: https://eslint.org/docs/rules/space-in-parens
|
[space-in-parens]: https://eslint.org/docs/rules/space-in-parens
|
||||||
[template-curly-spacing]: https://eslint.org/docs/rules/template-curly-spacing
|
[template-curly-spacing]: https://eslint.org/docs/rules/template-curly-spacing
|
||||||
|
|
||||||
[react/jsx-space-before-closing]: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-space-before-closing.md
|
[react/jsx-space-before-closing]: https://github.com/jsx-eslint/eslint-plugin-react/blob/HEAD/docs/rules/jsx-space-before-closing.md
|
||||||
[react/sort-comp]: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md
|
[react/sort-comp]: https://github.com/jsx-eslint/eslint-plugin-react/blob/HEAD/docs/rules/sort-comp.md
|
||||||
[react/display-name]: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.md
|
[react/display-name]: https://github.com/jsx-eslint/eslint-plugin-react/blob/HEAD/docs/rules/display-name.md
|
||||||
[react/jsx-no-bind]: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md
|
[react/jsx-no-bind]: https://github.com/jsx-eslint/eslint-plugin-react/blob/HEAD/docs/rules/jsx-no-bind.md
|
||||||
[react/no-is-mounted]: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-is-mounted.md
|
[react/no-is-mounted]: https://github.com/jsx-eslint/eslint-plugin-react/blob/HEAD/docs/rules/no-is-mounted.md
|
||||||
[react/prefer-es6-class]: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md
|
[react/prefer-es6-class]: https://github.com/jsx-eslint/eslint-plugin-react/blob/HEAD/docs/rules/prefer-es6-class.md
|
||||||
[react/jsx-quotes]: https://github.com/yannickcr/eslint-plugin-react/blob/f817e37beddddc84b4788969f07c524fa7f0823b/docs/rules/jsx-quotes.md
|
[react/jsx-quotes]: https://github.com/jsx-eslint/eslint-plugin-react/blob/f817e37beddddc84b4788969f07c524fa7f0823b/docs/rules/jsx-quotes.md
|
||||||
[react/prefer-stateless-function]: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md
|
[react/prefer-stateless-function]: https://github.com/jsx-eslint/eslint-plugin-react/blob/HEAD/docs/rules/prefer-stateless-function.md
|
||||||
|
|||||||
@@ -15,7 +15,7 @@
|
|||||||
"./package.json": "./package.json"
|
"./package.json": "./package.json"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"prelint": "eclint check * rules/* test/*",
|
"prelint": "eclint check $(git ls-files | xargs find 2> /dev/null | grep -vE 'node_modules|\\.git')",
|
||||||
"lint": "eslint .",
|
"lint": "eslint .",
|
||||||
"pretests-only": "node ./test/requires",
|
"pretests-only": "node ./test/requires",
|
||||||
"tests-only": "babel-tape-runner ./test/test-*.js",
|
"tests-only": "babel-tape-runner ./test/test-*.js",
|
||||||
@@ -66,32 +66,30 @@
|
|||||||
},
|
},
|
||||||
"homepage": "https://github.com/airbnb/javascript",
|
"homepage": "https://github.com/airbnb/javascript",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"eslint-config-airbnb-base": "^15.0.0",
|
"eslint-config-airbnb-base": "^15.0.0"
|
||||||
"object.assign": "^4.1.2",
|
|
||||||
"object.entries": "^1.1.5"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/runtime": "^7.16.3",
|
"@babel/runtime": "^7.25.6",
|
||||||
"babel-preset-airbnb": "^4.5.0",
|
"babel-preset-airbnb": "^4.5.0",
|
||||||
"babel-tape-runner": "^3.0.0",
|
"babel-tape-runner": "^3.0.0",
|
||||||
"eclint": "^2.8.1",
|
"eclint": "^2.8.1",
|
||||||
"eslint": "^7.32.0 || ^8.2.0",
|
"eslint": "^7.32.0 || ^8.2.0",
|
||||||
"eslint-find-rules": "^4.0.0",
|
"eslint-find-rules": "^4.1.0",
|
||||||
"eslint-plugin-import": "^2.25.3",
|
"eslint-plugin-import": "^2.30.0",
|
||||||
"eslint-plugin-jsx-a11y": "^6.5.1",
|
"eslint-plugin-jsx-a11y": "^6.10.0",
|
||||||
"eslint-plugin-react": "^7.28.0",
|
"eslint-plugin-react": "^7.36.1",
|
||||||
"eslint-plugin-react-hooks": "^4.3.0",
|
"eslint-plugin-react-hooks": "^5.1.0",
|
||||||
"in-publish": "^2.0.1",
|
"in-publish": "^2.0.1",
|
||||||
"react": ">= 0.13.0",
|
"react": ">= 0.13.0",
|
||||||
"safe-publish-latest": "^2.0.0",
|
"safe-publish-latest": "^2.0.0",
|
||||||
"tape": "^5.3.2"
|
"tape": "^5.9.0"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"eslint": "^7.32.0 || ^8.2.0",
|
"eslint": "^7.32.0 || ^8.2.0",
|
||||||
"eslint-plugin-import": "^2.25.3",
|
"eslint-plugin-import": "^2.30.0",
|
||||||
"eslint-plugin-jsx-a11y": "^6.5.1",
|
"eslint-plugin-jsx-a11y": "^6.10.0",
|
||||||
"eslint-plugin-react": "^7.28.0",
|
"eslint-plugin-react": "^7.36.1",
|
||||||
"eslint-plugin-react-hooks": "^4.3.0"
|
"eslint-plugin-react-hooks": "^5.1.0"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": "^10.12.0 || ^12.22.0 || ^14.17.0 || >=16.0.0"
|
"node": "^10.12.0 || ^12.22.0 || ^14.17.0 || >=16.0.0"
|
||||||
|
|||||||
@@ -12,12 +12,12 @@ module.exports = {
|
|||||||
|
|
||||||
rules: {
|
rules: {
|
||||||
// ensure emoji are accessible
|
// ensure emoji are accessible
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/accessible-emoji.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/accessible-emoji.md
|
||||||
// disabled; rule is deprecated
|
// disabled; rule is deprecated
|
||||||
'jsx-a11y/accessible-emoji': 'off',
|
'jsx-a11y/accessible-emoji': 'off',
|
||||||
|
|
||||||
// Enforce that all elements that require alternative text have meaningful information
|
// Enforce that all elements that require alternative text have meaningful information
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/alt-text.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/alt-text.md
|
||||||
'jsx-a11y/alt-text': ['error', {
|
'jsx-a11y/alt-text': ['error', {
|
||||||
elements: ['img', 'object', 'area', 'input[type="image"]'],
|
elements: ['img', 'object', 'area', 'input[type="image"]'],
|
||||||
img: [],
|
img: [],
|
||||||
@@ -27,11 +27,11 @@ module.exports = {
|
|||||||
}],
|
}],
|
||||||
|
|
||||||
// Enforce that anchors have content
|
// Enforce that anchors have content
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-has-content.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-has-content.md
|
||||||
'jsx-a11y/anchor-has-content': ['error', { components: [] }],
|
'jsx-a11y/anchor-has-content': ['error', { components: [] }],
|
||||||
|
|
||||||
// ensure <a> tags are valid
|
// ensure <a> tags are valid
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/0745af376cdc8686d85a361ce36952b1fb1ccf6e/docs/rules/anchor-is-valid.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/0745af376cdc8686d85a361ce36952b1fb1ccf6e/docs/rules/anchor-is-valid.md
|
||||||
'jsx-a11y/anchor-is-valid': ['error', {
|
'jsx-a11y/anchor-is-valid': ['error', {
|
||||||
components: ['Link'],
|
components: ['Link'],
|
||||||
specialLink: ['to'],
|
specialLink: ['to'],
|
||||||
@@ -39,24 +39,24 @@ module.exports = {
|
|||||||
}],
|
}],
|
||||||
|
|
||||||
// elements with aria-activedescendant must be tabbable
|
// elements with aria-activedescendant must be tabbable
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-activedescendant-has-tabindex.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-activedescendant-has-tabindex.md
|
||||||
'jsx-a11y/aria-activedescendant-has-tabindex': 'error',
|
'jsx-a11y/aria-activedescendant-has-tabindex': 'error',
|
||||||
|
|
||||||
// Enforce all aria-* props are valid.
|
// Enforce all aria-* props are valid.
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-props.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-props.md
|
||||||
'jsx-a11y/aria-props': 'error',
|
'jsx-a11y/aria-props': 'error',
|
||||||
|
|
||||||
// Enforce ARIA state and property values are valid.
|
// Enforce ARIA state and property values are valid.
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-proptypes.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-proptypes.md
|
||||||
'jsx-a11y/aria-proptypes': 'error',
|
'jsx-a11y/aria-proptypes': 'error',
|
||||||
|
|
||||||
// Require ARIA roles to be valid and non-abstract
|
// Require ARIA roles to be valid and non-abstract
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-role.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-role.md
|
||||||
'jsx-a11y/aria-role': ['error', { ignoreNonDOM: false }],
|
'jsx-a11y/aria-role': ['error', { ignoreNonDOM: false }],
|
||||||
|
|
||||||
// Enforce that elements that do not support ARIA roles, states, and
|
// Enforce that elements that do not support ARIA roles, states, and
|
||||||
// properties do not have those attributes.
|
// properties do not have those attributes.
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-unsupported-elements.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-unsupported-elements.md
|
||||||
'jsx-a11y/aria-unsupported-elements': 'error',
|
'jsx-a11y/aria-unsupported-elements': 'error',
|
||||||
|
|
||||||
// Ensure the autocomplete attribute is correct and suitable for the form field it is used with
|
// Ensure the autocomplete attribute is correct and suitable for the form field it is used with
|
||||||
@@ -66,11 +66,11 @@ module.exports = {
|
|||||||
}],
|
}],
|
||||||
|
|
||||||
// require onClick be accompanied by onKeyUp/onKeyDown/onKeyPress
|
// require onClick be accompanied by onKeyUp/onKeyDown/onKeyPress
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/click-events-have-key-events.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/click-events-have-key-events.md
|
||||||
'jsx-a11y/click-events-have-key-events': 'error',
|
'jsx-a11y/click-events-have-key-events': 'error',
|
||||||
|
|
||||||
// Enforce that a control (an interactive element) has a text label.
|
// Enforce that a control (an interactive element) has a text label.
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/control-has-associated-label.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/control-has-associated-label.md
|
||||||
'jsx-a11y/control-has-associated-label': ['error', {
|
'jsx-a11y/control-has-associated-label': ['error', {
|
||||||
labelAttributes: ['label'],
|
labelAttributes: ['label'],
|
||||||
controlComponents: [],
|
controlComponents: [],
|
||||||
@@ -99,27 +99,27 @@ module.exports = {
|
|||||||
}],
|
}],
|
||||||
|
|
||||||
// ensure <hX> tags have content and are not aria-hidden
|
// ensure <hX> tags have content and are not aria-hidden
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/heading-has-content.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/heading-has-content.md
|
||||||
'jsx-a11y/heading-has-content': ['error', { components: [''] }],
|
'jsx-a11y/heading-has-content': ['error', { components: [''] }],
|
||||||
|
|
||||||
// require HTML elements to have a "lang" prop
|
// require HTML elements to have a "lang" prop
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/html-has-lang.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/html-has-lang.md
|
||||||
'jsx-a11y/html-has-lang': 'error',
|
'jsx-a11y/html-has-lang': 'error',
|
||||||
|
|
||||||
// ensure iframe elements have a unique title
|
// ensure iframe elements have a unique title
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/iframe-has-title.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/iframe-has-title.md
|
||||||
'jsx-a11y/iframe-has-title': 'error',
|
'jsx-a11y/iframe-has-title': 'error',
|
||||||
|
|
||||||
// Prevent img alt text from containing redundant words like "image", "picture", or "photo"
|
// Prevent img alt text from containing redundant words like "image", "picture", or "photo"
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-redundant-alt.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-redundant-alt.md
|
||||||
'jsx-a11y/img-redundant-alt': 'error',
|
'jsx-a11y/img-redundant-alt': 'error',
|
||||||
|
|
||||||
// Elements with an interactive role and interaction handlers must be focusable
|
// Elements with an interactive role and interaction handlers must be focusable
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/interactive-supports-focus.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/interactive-supports-focus.md
|
||||||
'jsx-a11y/interactive-supports-focus': 'error',
|
'jsx-a11y/interactive-supports-focus': 'error',
|
||||||
|
|
||||||
// Enforce that a label tag has a text label and an associated control.
|
// Enforce that a label tag has a text label and an associated control.
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/b800f40a2a69ad48015ae9226fbe879f946757ed/docs/rules/label-has-associated-control.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/b800f40a2a69ad48015ae9226fbe879f946757ed/docs/rules/label-has-associated-control.md
|
||||||
'jsx-a11y/label-has-associated-control': ['error', {
|
'jsx-a11y/label-has-associated-control': ['error', {
|
||||||
labelComponents: [],
|
labelComponents: [],
|
||||||
labelAttributes: [],
|
labelAttributes: [],
|
||||||
@@ -129,11 +129,11 @@ module.exports = {
|
|||||||
}],
|
}],
|
||||||
|
|
||||||
// require HTML element's lang prop to be valid
|
// require HTML element's lang prop to be valid
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/lang.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/lang.md
|
||||||
'jsx-a11y/lang': 'error',
|
'jsx-a11y/lang': 'error',
|
||||||
|
|
||||||
// media elements must have captions
|
// media elements must have captions
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/media-has-caption.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/media-has-caption.md
|
||||||
'jsx-a11y/media-has-caption': ['error', {
|
'jsx-a11y/media-has-caption': ['error', {
|
||||||
audio: [],
|
audio: [],
|
||||||
video: [],
|
video: [],
|
||||||
@@ -141,31 +141,31 @@ module.exports = {
|
|||||||
}],
|
}],
|
||||||
|
|
||||||
// require that mouseover/out come with focus/blur, for keyboard-only users
|
// require that mouseover/out come with focus/blur, for keyboard-only users
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md
|
||||||
'jsx-a11y/mouse-events-have-key-events': 'error',
|
'jsx-a11y/mouse-events-have-key-events': 'error',
|
||||||
|
|
||||||
// Prevent use of `accessKey`
|
// Prevent use of `accessKey`
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-access-key.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-access-key.md
|
||||||
'jsx-a11y/no-access-key': 'error',
|
'jsx-a11y/no-access-key': 'error',
|
||||||
|
|
||||||
// prohibit autoFocus prop
|
// prohibit autoFocus prop
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-autofocus.md
|
||||||
'jsx-a11y/no-autofocus': ['error', { ignoreNonDOM: true }],
|
'jsx-a11y/no-autofocus': ['error', { ignoreNonDOM: true }],
|
||||||
|
|
||||||
// prevent distracting elements, like <marquee> and <blink>
|
// prevent distracting elements, like <marquee> and <blink>
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-distracting-elements.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-distracting-elements.md
|
||||||
'jsx-a11y/no-distracting-elements': ['error', {
|
'jsx-a11y/no-distracting-elements': ['error', {
|
||||||
elements: ['marquee', 'blink'],
|
elements: ['marquee', 'blink'],
|
||||||
}],
|
}],
|
||||||
|
|
||||||
// WAI-ARIA roles should not be used to convert an interactive element to non-interactive
|
// WAI-ARIA roles should not be used to convert an interactive element to non-interactive
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-interactive-element-to-noninteractive-role.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-interactive-element-to-noninteractive-role.md
|
||||||
'jsx-a11y/no-interactive-element-to-noninteractive-role': ['error', {
|
'jsx-a11y/no-interactive-element-to-noninteractive-role': ['error', {
|
||||||
tr: ['none', 'presentation'],
|
tr: ['none', 'presentation'],
|
||||||
}],
|
}],
|
||||||
|
|
||||||
// A non-interactive element does not support event handlers (mouse and key handlers)
|
// A non-interactive element does not support event handlers (mouse and key handlers)
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-noninteractive-element-interactions.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-noninteractive-element-interactions.md
|
||||||
'jsx-a11y/no-noninteractive-element-interactions': ['error', {
|
'jsx-a11y/no-noninteractive-element-interactions': ['error', {
|
||||||
handlers: [
|
handlers: [
|
||||||
'onClick',
|
'onClick',
|
||||||
@@ -178,7 +178,7 @@ module.exports = {
|
|||||||
}],
|
}],
|
||||||
|
|
||||||
// WAI-ARIA roles should not be used to convert a non-interactive element to interactive
|
// WAI-ARIA roles should not be used to convert a non-interactive element to interactive
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-noninteractive-element-to-interactive-role.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-noninteractive-element-to-interactive-role.md
|
||||||
'jsx-a11y/no-noninteractive-element-to-interactive-role': ['error', {
|
'jsx-a11y/no-noninteractive-element-to-interactive-role': ['error', {
|
||||||
ul: ['listbox', 'menu', 'menubar', 'radiogroup', 'tablist', 'tree', 'treegrid'],
|
ul: ['listbox', 'menu', 'menubar', 'radiogroup', 'tablist', 'tree', 'treegrid'],
|
||||||
ol: ['listbox', 'menu', 'menubar', 'radiogroup', 'tablist', 'tree', 'treegrid'],
|
ol: ['listbox', 'menu', 'menubar', 'radiogroup', 'tablist', 'tree', 'treegrid'],
|
||||||
@@ -188,22 +188,25 @@ module.exports = {
|
|||||||
}],
|
}],
|
||||||
|
|
||||||
// Tab key navigation should be limited to elements on the page that can be interacted with.
|
// Tab key navigation should be limited to elements on the page that can be interacted with.
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-noninteractive-tabindex.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-noninteractive-tabindex.md
|
||||||
'jsx-a11y/no-noninteractive-tabindex': ['error', {
|
'jsx-a11y/no-noninteractive-tabindex': ['error', {
|
||||||
tags: [],
|
tags: [],
|
||||||
roles: ['tabpanel'],
|
roles: ['tabpanel'],
|
||||||
|
allowExpressionValues: true,
|
||||||
}],
|
}],
|
||||||
|
|
||||||
// require onBlur instead of onChange
|
// require onBlur instead of onChange
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-onchange.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-onchange.md
|
||||||
'jsx-a11y/no-onchange': 'off',
|
'jsx-a11y/no-onchange': 'off',
|
||||||
|
|
||||||
// ensure HTML elements do not specify redundant ARIA roles
|
// ensure HTML elements do not specify redundant ARIA roles
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-redundant-roles.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-redundant-roles.md
|
||||||
'jsx-a11y/no-redundant-roles': 'error',
|
'jsx-a11y/no-redundant-roles': ['error', {
|
||||||
|
nav: ['navigation'],
|
||||||
|
}],
|
||||||
|
|
||||||
// Enforce that DOM elements without semantic behavior not have interaction handlers
|
// Enforce that DOM elements without semantic behavior not have interaction handlers
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md
|
||||||
'jsx-a11y/no-static-element-interactions': ['error', {
|
'jsx-a11y/no-static-element-interactions': ['error', {
|
||||||
handlers: [
|
handlers: [
|
||||||
'onClick',
|
'onClick',
|
||||||
@@ -217,20 +220,20 @@ module.exports = {
|
|||||||
|
|
||||||
// Enforce that elements with ARIA roles must have all required attributes
|
// Enforce that elements with ARIA roles must have all required attributes
|
||||||
// for that role.
|
// for that role.
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/role-has-required-aria-props.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/role-has-required-aria-props.md
|
||||||
'jsx-a11y/role-has-required-aria-props': 'error',
|
'jsx-a11y/role-has-required-aria-props': 'error',
|
||||||
|
|
||||||
// Enforce that elements with explicit or implicit roles defined contain
|
// Enforce that elements with explicit or implicit roles defined contain
|
||||||
// only aria-* properties supported by that role.
|
// only aria-* properties supported by that role.
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/role-supports-aria-props.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/role-supports-aria-props.md
|
||||||
'jsx-a11y/role-supports-aria-props': 'error',
|
'jsx-a11y/role-supports-aria-props': 'error',
|
||||||
|
|
||||||
// only allow <th> to have the "scope" attr
|
// only allow <th> to have the "scope" attr
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/scope.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/scope.md
|
||||||
'jsx-a11y/scope': 'error',
|
'jsx-a11y/scope': 'error',
|
||||||
|
|
||||||
// Enforce tabIndex value is not greater than zero.
|
// Enforce tabIndex value is not greater than zero.
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/tabindex-no-positive.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/tabindex-no-positive.md
|
||||||
'jsx-a11y/tabindex-no-positive': 'error',
|
'jsx-a11y/tabindex-no-positive': 'error',
|
||||||
|
|
||||||
// ----------------------------------------------------
|
// ----------------------------------------------------
|
||||||
@@ -238,7 +241,7 @@ module.exports = {
|
|||||||
// ----------------------------------------------------
|
// ----------------------------------------------------
|
||||||
|
|
||||||
// require that JSX labels use "htmlFor"
|
// require that JSX labels use "htmlFor"
|
||||||
// https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-for.md
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-for.md
|
||||||
// deprecated: replaced by `label-has-associated-control` rule
|
// deprecated: replaced by `label-has-associated-control` rule
|
||||||
'jsx-a11y/label-has-for': ['off', {
|
'jsx-a11y/label-has-for': ['off', {
|
||||||
components: [],
|
components: [],
|
||||||
@@ -247,5 +250,20 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
allowChildren: false,
|
allowChildren: false,
|
||||||
}],
|
}],
|
||||||
|
|
||||||
|
// Ensures anchor text is not ambiguous
|
||||||
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/93f78856655696a55309440593e0948c6fb96134/docs/rules/anchor-ambiguous-text.md
|
||||||
|
// TODO: semver-major, enable
|
||||||
|
'jsx-a11y/anchor-ambiguous-text': 'off',
|
||||||
|
|
||||||
|
// Enforce that aria-hidden="true" is not set on focusable elements.
|
||||||
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/93f78856655696a55309440593e0948c6fb96134/docs/rules/no-aria-hidden-on-focusable.md
|
||||||
|
// TODO: semver-major, enable
|
||||||
|
'jsx-a11y/no-aria-hidden-on-focusable': 'off',
|
||||||
|
|
||||||
|
// Enforces using semantic DOM elements over the ARIA role property.
|
||||||
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/93f78856655696a55309440593e0948c6fb96134/docs/rules/prefer-tag-over-role.md
|
||||||
|
// TODO: semver-major, enable
|
||||||
|
'jsx-a11y/prefer-tag-over-role': 'off',
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
236
packages/eslint-config-airbnb/rules/react.js
vendored
236
packages/eslint-config-airbnb/rules/react.js
vendored
@@ -1,4 +1,3 @@
|
|||||||
const assign = require('object.assign');
|
|
||||||
const baseStyleRules = require('eslint-config-airbnb-base/rules/style').rules;
|
const baseStyleRules = require('eslint-config-airbnb-base/rules/style').rules;
|
||||||
|
|
||||||
const dangleRules = baseStyleRules['no-underscore-dangle'];
|
const dangleRules = baseStyleRules['no-underscore-dangle'];
|
||||||
@@ -15,11 +14,12 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
|
|
||||||
// View link below for react rules documentation
|
// View link below for react rules documentation
|
||||||
// https://github.com/yannickcr/eslint-plugin-react#list-of-supported-rules
|
// https://github.com/jsx-eslint/eslint-plugin-react#list-of-supported-rules
|
||||||
rules: {
|
rules: {
|
||||||
'no-underscore-dangle': [dangleRules[0], assign({}, dangleRules[1], {
|
'no-underscore-dangle': [dangleRules[0], {
|
||||||
|
...dangleRules[1],
|
||||||
allow: dangleRules[1].allow.concat(['__REDUX_DEVTOOLS_EXTENSION_COMPOSE__']),
|
allow: dangleRules[1].allow.concat(['__REDUX_DEVTOOLS_EXTENSION_COMPOSE__']),
|
||||||
})],
|
}],
|
||||||
|
|
||||||
// Specify whether double or single quotes should be used in JSX attributes
|
// Specify whether double or single quotes should be used in JSX attributes
|
||||||
// https://eslint.org/docs/rules/jsx-quotes
|
// https://eslint.org/docs/rules/jsx-quotes
|
||||||
@@ -46,12 +46,19 @@ module.exports = {
|
|||||||
],
|
],
|
||||||
}],
|
}],
|
||||||
|
|
||||||
|
// This rule enforces onChange or readonly attribute for checked property of input elements.
|
||||||
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/checked-requires-onchange-or-readonly.md
|
||||||
|
'react/checked-requires-onchange-or-readonly': ['off', {
|
||||||
|
ignoreMissingProperties: false,
|
||||||
|
ignoreExclusiveCheckedAttribute: false
|
||||||
|
}],
|
||||||
|
|
||||||
// Prevent missing displayName in a React component definition
|
// Prevent missing displayName in a React component definition
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/display-name.md
|
||||||
'react/display-name': ['off', { ignoreTranspilerName: false }],
|
'react/display-name': ['off', { ignoreTranspilerName: false }],
|
||||||
|
|
||||||
// Forbid certain propTypes (any, array, object)
|
// Forbid certain propTypes (any, array, object)
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/843d71a432baf0f01f598d7cf1eea75ad6896e4b/docs/rules/forbid-prop-types.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/843d71a432baf0f01f598d7cf1eea75ad6896e4b/docs/rules/forbid-prop-types.md
|
||||||
'react/forbid-prop-types': ['error', {
|
'react/forbid-prop-types': ['error', {
|
||||||
forbid: ['any', 'array', 'object'],
|
forbid: ['any', 'array', 'object'],
|
||||||
checkContextTypes: true,
|
checkContextTypes: true,
|
||||||
@@ -59,47 +66,47 @@ module.exports = {
|
|||||||
}],
|
}],
|
||||||
|
|
||||||
// Forbid certain props on DOM Nodes
|
// Forbid certain props on DOM Nodes
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/843d71a432baf0f01f598d7cf1eea75ad6896e4b/docs/rules/forbid-dom-props.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/843d71a432baf0f01f598d7cf1eea75ad6896e4b/docs/rules/forbid-dom-props.md
|
||||||
'react/forbid-dom-props': ['off', { forbid: [] }],
|
'react/forbid-dom-props': ['off', { forbid: [] }],
|
||||||
|
|
||||||
// Enforce boolean attributes notation in JSX
|
// Enforce boolean attributes notation in JSX
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md
|
||||||
'react/jsx-boolean-value': ['error', 'never', { always: [] }],
|
'react/jsx-boolean-value': ['error', 'never', { always: [] }],
|
||||||
|
|
||||||
// Validate closing bracket location in JSX
|
// Validate closing bracket location in JSX
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md
|
||||||
'react/jsx-closing-bracket-location': ['error', 'line-aligned'],
|
'react/jsx-closing-bracket-location': ['error', 'line-aligned'],
|
||||||
|
|
||||||
// Validate closing tag location in JSX
|
// Validate closing tag location in JSX
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-tag-location.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-closing-tag-location.md
|
||||||
'react/jsx-closing-tag-location': 'error',
|
'react/jsx-closing-tag-location': 'error',
|
||||||
|
|
||||||
// Enforce or disallow spaces inside of curly braces in JSX attributes
|
// Enforce or disallow spaces inside of curly braces in JSX attributes
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-curly-spacing.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-spacing.md
|
||||||
'react/jsx-curly-spacing': ['error', 'never', { allowMultiline: true }],
|
'react/jsx-curly-spacing': ['error', 'never', { allowMultiline: true }],
|
||||||
|
|
||||||
// Enforce event handler naming conventions in JSX
|
// Enforce event handler naming conventions in JSX
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-handler-names.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-handler-names.md
|
||||||
'react/jsx-handler-names': ['off', {
|
'react/jsx-handler-names': ['off', {
|
||||||
eventHandlerPrefix: 'handle',
|
eventHandlerPrefix: 'handle',
|
||||||
eventHandlerPropPrefix: 'on',
|
eventHandlerPropPrefix: 'on',
|
||||||
}],
|
}],
|
||||||
|
|
||||||
// Validate props indentation in JSX
|
// Validate props indentation in JSX
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-indent-props.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-indent-props.md
|
||||||
'react/jsx-indent-props': ['error', 2],
|
'react/jsx-indent-props': ['error', 2],
|
||||||
|
|
||||||
// Validate JSX has key prop when in array or iterator
|
// Validate JSX has key prop when in array or iterator
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-key.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-key.md
|
||||||
// Turned off because it has too many false positives
|
// Turned off because it has too many false positives
|
||||||
'react/jsx-key': 'off',
|
'react/jsx-key': 'off',
|
||||||
|
|
||||||
// Limit maximum of props on a single line in JSX
|
// Limit maximum of props on a single line in JSX
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-max-props-per-line.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-max-props-per-line.md
|
||||||
'react/jsx-max-props-per-line': ['error', { maximum: 1, when: 'multiline' }],
|
'react/jsx-max-props-per-line': ['error', { maximum: 1, when: 'multiline' }],
|
||||||
|
|
||||||
// Prevent usage of .bind() in JSX props
|
// Prevent usage of .bind() in JSX props
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md
|
||||||
'react/jsx-no-bind': ['error', {
|
'react/jsx-no-bind': ['error', {
|
||||||
ignoreRefs: true,
|
ignoreRefs: true,
|
||||||
allowArrowFunctions: true,
|
allowArrowFunctions: true,
|
||||||
@@ -109,26 +116,26 @@ module.exports = {
|
|||||||
}],
|
}],
|
||||||
|
|
||||||
// Prevent duplicate props in JSX
|
// Prevent duplicate props in JSX
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-duplicate-props.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-duplicate-props.md
|
||||||
'react/jsx-no-duplicate-props': ['error', { ignoreCase: true }],
|
'react/jsx-no-duplicate-props': ['error', { ignoreCase: true }],
|
||||||
|
|
||||||
// Prevent usage of unwrapped JSX strings
|
// Prevent usage of unwrapped JSX strings
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-literals.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-literals.md
|
||||||
'react/jsx-no-literals': ['off', { noStrings: true }],
|
'react/jsx-no-literals': ['off', { noStrings: true }],
|
||||||
|
|
||||||
// Disallow undeclared variables in JSX
|
// Disallow undeclared variables in JSX
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-undef.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-undef.md
|
||||||
'react/jsx-no-undef': 'error',
|
'react/jsx-no-undef': 'error',
|
||||||
|
|
||||||
// Enforce PascalCase for user-defined JSX components
|
// Enforce PascalCase for user-defined JSX components
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md
|
||||||
'react/jsx-pascal-case': ['error', {
|
'react/jsx-pascal-case': ['error', {
|
||||||
allowAllCaps: true,
|
allowAllCaps: true,
|
||||||
ignore: [],
|
ignore: [],
|
||||||
}],
|
}],
|
||||||
|
|
||||||
// Enforce propTypes declarations alphabetical sorting
|
// Enforce propTypes declarations alphabetical sorting
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-prop-types.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/sort-prop-types.md
|
||||||
'react/sort-prop-types': ['off', {
|
'react/sort-prop-types': ['off', {
|
||||||
ignoreCase: true,
|
ignoreCase: true,
|
||||||
callbacksLast: false,
|
callbacksLast: false,
|
||||||
@@ -140,7 +147,7 @@ module.exports = {
|
|||||||
'react/jsx-sort-prop-types': 'off',
|
'react/jsx-sort-prop-types': 'off',
|
||||||
|
|
||||||
// Enforce props alphabetical sorting
|
// Enforce props alphabetical sorting
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-sort-props.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-sort-props.md
|
||||||
'react/jsx-sort-props': ['off', {
|
'react/jsx-sort-props': ['off', {
|
||||||
ignoreCase: true,
|
ignoreCase: true,
|
||||||
callbacksLast: false,
|
callbacksLast: false,
|
||||||
@@ -151,74 +158,74 @@ module.exports = {
|
|||||||
}],
|
}],
|
||||||
|
|
||||||
// Enforce defaultProps declarations alphabetical sorting
|
// Enforce defaultProps declarations alphabetical sorting
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/843d71a432baf0f01f598d7cf1eea75ad6896e4b/docs/rules/jsx-sort-default-props.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/843d71a432baf0f01f598d7cf1eea75ad6896e4b/docs/rules/jsx-sort-default-props.md
|
||||||
'react/jsx-sort-default-props': ['off', {
|
'react/jsx-sort-default-props': ['off', {
|
||||||
ignoreCase: true,
|
ignoreCase: true,
|
||||||
}],
|
}],
|
||||||
|
|
||||||
// Prevent React to be incorrectly marked as unused
|
// Prevent React to be incorrectly marked as unused
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-uses-react.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-uses-react.md
|
||||||
'react/jsx-uses-react': ['error'],
|
'react/jsx-uses-react': ['error'],
|
||||||
|
|
||||||
// Prevent variables used in JSX to be incorrectly marked as unused
|
// Prevent variables used in JSX to be incorrectly marked as unused
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-uses-vars.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-uses-vars.md
|
||||||
'react/jsx-uses-vars': 'error',
|
'react/jsx-uses-vars': 'error',
|
||||||
|
|
||||||
// Prevent usage of dangerous JSX properties
|
// Prevent usage of dangerous JSX properties
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-danger.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-danger.md
|
||||||
'react/no-danger': 'warn',
|
'react/no-danger': 'warn',
|
||||||
|
|
||||||
// Prevent usage of deprecated methods
|
// Prevent usage of deprecated methods
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-deprecated.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-deprecated.md
|
||||||
'react/no-deprecated': ['error'],
|
'react/no-deprecated': ['error'],
|
||||||
|
|
||||||
// Prevent usage of setState in componentDidMount
|
// Prevent usage of setState in componentDidMount
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-did-mount-set-state.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-did-mount-set-state.md
|
||||||
// this is necessary for server-rendering
|
// this is necessary for server-rendering
|
||||||
'react/no-did-mount-set-state': 'off',
|
'react/no-did-mount-set-state': 'off',
|
||||||
|
|
||||||
// Prevent usage of setState in componentDidUpdate
|
// Prevent usage of setState in componentDidUpdate
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-did-update-set-state.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-did-update-set-state.md
|
||||||
'react/no-did-update-set-state': 'error',
|
'react/no-did-update-set-state': 'error',
|
||||||
|
|
||||||
// Prevent usage of setState in componentWillUpdate
|
// Prevent usage of setState in componentWillUpdate
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-will-update-set-state.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-will-update-set-state.md
|
||||||
'react/no-will-update-set-state': 'error',
|
'react/no-will-update-set-state': 'error',
|
||||||
|
|
||||||
// Prevent direct mutation of this.state
|
// Prevent direct mutation of this.state
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-direct-mutation-state.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-direct-mutation-state.md
|
||||||
'react/no-direct-mutation-state': 'off',
|
'react/no-direct-mutation-state': 'off',
|
||||||
|
|
||||||
// Prevent usage of isMounted
|
// Prevent usage of isMounted
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-is-mounted.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-is-mounted.md
|
||||||
'react/no-is-mounted': 'error',
|
'react/no-is-mounted': 'error',
|
||||||
|
|
||||||
// Prevent multiple component definition per file
|
// Prevent multiple component definition per file
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-multi-comp.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-multi-comp.md
|
||||||
'react/no-multi-comp': 'off',
|
'react/no-multi-comp': 'off',
|
||||||
|
|
||||||
// Prevent usage of setState
|
// Prevent usage of setState
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-set-state.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-set-state.md
|
||||||
'react/no-set-state': 'off',
|
'react/no-set-state': 'off',
|
||||||
|
|
||||||
// Prevent using string references
|
// Prevent using string references
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-string-refs.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-string-refs.md
|
||||||
'react/no-string-refs': 'error',
|
'react/no-string-refs': 'error',
|
||||||
|
|
||||||
// Prevent usage of unknown DOM property
|
// Prevent usage of unknown DOM property
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unknown-property.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unknown-property.md
|
||||||
'react/no-unknown-property': 'error',
|
'react/no-unknown-property': 'error',
|
||||||
|
|
||||||
// Require ES6 class declarations over React.createClass
|
// Require ES6 class declarations over React.createClass
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md
|
||||||
'react/prefer-es6-class': ['error', 'always'],
|
'react/prefer-es6-class': ['error', 'always'],
|
||||||
|
|
||||||
// Require stateless functions when not using lifecycle methods, setState or ref
|
// Require stateless functions when not using lifecycle methods, setState or ref
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md
|
||||||
'react/prefer-stateless-function': ['error', { ignorePureComponents: true }],
|
'react/prefer-stateless-function': ['error', { ignorePureComponents: true }],
|
||||||
|
|
||||||
// Prevent missing props validation in a React component definition
|
// Prevent missing props validation in a React component definition
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prop-types.md
|
||||||
'react/prop-types': ['error', {
|
'react/prop-types': ['error', {
|
||||||
ignore: [],
|
ignore: [],
|
||||||
customValidators: [],
|
customValidators: [],
|
||||||
@@ -226,19 +233,19 @@ module.exports = {
|
|||||||
}],
|
}],
|
||||||
|
|
||||||
// Prevent missing React when using JSX
|
// Prevent missing React when using JSX
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/react-in-jsx-scope.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/react-in-jsx-scope.md
|
||||||
'react/react-in-jsx-scope': 'error',
|
'react/react-in-jsx-scope': 'error',
|
||||||
|
|
||||||
// Require render() methods to return something
|
// Require render() methods to return something
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/require-render-return.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/require-render-return.md
|
||||||
'react/require-render-return': 'error',
|
'react/require-render-return': 'error',
|
||||||
|
|
||||||
// Prevent extra closing tags for components without children
|
// Prevent extra closing tags for components without children
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md
|
||||||
'react/self-closing-comp': 'error',
|
'react/self-closing-comp': 'error',
|
||||||
|
|
||||||
// Enforce component methods order
|
// Enforce component methods order
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/843d71a432baf0f01f598d7cf1eea75ad6896e4b/docs/rules/sort-comp.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/843d71a432baf0f01f598d7cf1eea75ad6896e4b/docs/rules/sort-comp.md
|
||||||
'react/sort-comp': ['error', {
|
'react/sort-comp': ['error', {
|
||||||
order: [
|
order: [
|
||||||
'static-variables',
|
'static-variables',
|
||||||
@@ -290,7 +297,7 @@ module.exports = {
|
|||||||
}],
|
}],
|
||||||
|
|
||||||
// Prevent missing parentheses around multilines JSX
|
// Prevent missing parentheses around multilines JSX
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/843d71a432baf0f01f598d7cf1eea75ad6896e4b/docs/rules/jsx-wrap-multilines.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/843d71a432baf0f01f598d7cf1eea75ad6896e4b/docs/rules/jsx-wrap-multilines.md
|
||||||
'react/jsx-wrap-multilines': ['error', {
|
'react/jsx-wrap-multilines': ['error', {
|
||||||
declaration: 'parens-new-line',
|
declaration: 'parens-new-line',
|
||||||
assignment: 'parens-new-line',
|
assignment: 'parens-new-line',
|
||||||
@@ -302,55 +309,55 @@ module.exports = {
|
|||||||
}],
|
}],
|
||||||
|
|
||||||
// Require that the first prop in a JSX element be on a new line when the element is multiline
|
// Require that the first prop in a JSX element be on a new line when the element is multiline
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-first-prop-new-line.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-first-prop-new-line.md
|
||||||
'react/jsx-first-prop-new-line': ['error', 'multiline-multiprop'],
|
'react/jsx-first-prop-new-line': ['error', 'multiline-multiprop'],
|
||||||
|
|
||||||
// Enforce spacing around jsx equals signs
|
// Enforce spacing around jsx equals signs
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-equals-spacing.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-equals-spacing.md
|
||||||
'react/jsx-equals-spacing': ['error', 'never'],
|
'react/jsx-equals-spacing': ['error', 'never'],
|
||||||
|
|
||||||
// Enforce JSX indentation
|
// Enforce JSX indentation
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-indent.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-indent.md
|
||||||
'react/jsx-indent': ['error', 2],
|
'react/jsx-indent': ['error', 2],
|
||||||
|
|
||||||
// Disallow target="_blank" on links
|
// Disallow target="_blank" on links
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/ac102885765be5ff37847a871f239c6703e1c7cc/docs/rules/jsx-no-target-blank.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/ac102885765be5ff37847a871f239c6703e1c7cc/docs/rules/jsx-no-target-blank.md
|
||||||
'react/jsx-no-target-blank': ['error', { enforceDynamicLinks: 'always' }],
|
'react/jsx-no-target-blank': ['error', { enforceDynamicLinks: 'always' }],
|
||||||
|
|
||||||
// only .jsx files may have JSX
|
// only .jsx files may have JSX
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md
|
||||||
'react/jsx-filename-extension': ['error', { extensions: ['.jsx'] }],
|
'react/jsx-filename-extension': ['error', { extensions: ['.jsx'] }],
|
||||||
|
|
||||||
// prevent accidental JS comments from being injected into JSX as text
|
// prevent accidental JS comments from being injected into JSX as text
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-comment-textnodes.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-comment-textnodes.md
|
||||||
'react/jsx-no-comment-textnodes': 'error',
|
'react/jsx-no-comment-textnodes': 'error',
|
||||||
|
|
||||||
// disallow using React.render/ReactDOM.render's return value
|
// disallow using React.render/ReactDOM.render's return value
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-render-return-value.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-render-return-value.md
|
||||||
'react/no-render-return-value': 'error',
|
'react/no-render-return-value': 'error',
|
||||||
|
|
||||||
// require a shouldComponentUpdate method, or PureRenderMixin
|
// require a shouldComponentUpdate method, or PureRenderMixin
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/require-optimization.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/require-optimization.md
|
||||||
'react/require-optimization': ['off', { allowDecorators: [] }],
|
'react/require-optimization': ['off', { allowDecorators: [] }],
|
||||||
|
|
||||||
// warn against using findDOMNode()
|
// warn against using findDOMNode()
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-find-dom-node.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-find-dom-node.md
|
||||||
'react/no-find-dom-node': 'error',
|
'react/no-find-dom-node': 'error',
|
||||||
|
|
||||||
// Forbid certain props on Components
|
// Forbid certain props on Components
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/forbid-component-props.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-component-props.md
|
||||||
'react/forbid-component-props': ['off', { forbid: [] }],
|
'react/forbid-component-props': ['off', { forbid: [] }],
|
||||||
|
|
||||||
// Forbid certain elements
|
// Forbid certain elements
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/forbid-elements.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-elements.md
|
||||||
'react/forbid-elements': ['off', { forbid: [], }],
|
'react/forbid-elements': ['off', { forbid: [], }],
|
||||||
|
|
||||||
// Prevent problem with children and props.dangerouslySetInnerHTML
|
// Prevent problem with children and props.dangerouslySetInnerHTML
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-danger-with-children.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-danger-with-children.md
|
||||||
'react/no-danger-with-children': 'error',
|
'react/no-danger-with-children': 'error',
|
||||||
|
|
||||||
// Prevent unused propType definitions
|
// Prevent unused propType definitions
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unused-prop-types.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unused-prop-types.md
|
||||||
'react/no-unused-prop-types': ['error', {
|
'react/no-unused-prop-types': ['error', {
|
||||||
customValidators: [
|
customValidators: [
|
||||||
],
|
],
|
||||||
@@ -358,19 +365,19 @@ module.exports = {
|
|||||||
}],
|
}],
|
||||||
|
|
||||||
// Require style prop value be an object or var
|
// Require style prop value be an object or var
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/style-prop-object.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/style-prop-object.md
|
||||||
'react/style-prop-object': 'error',
|
'react/style-prop-object': 'error',
|
||||||
|
|
||||||
// Prevent invalid characters from appearing in markup
|
// Prevent invalid characters from appearing in markup
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-unescaped-entities.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unescaped-entities.md
|
||||||
'react/no-unescaped-entities': 'error',
|
'react/no-unescaped-entities': 'error',
|
||||||
|
|
||||||
// Prevent passing of children as props
|
// Prevent passing of children as props
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-children-prop.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-children-prop.md
|
||||||
'react/no-children-prop': 'error',
|
'react/no-children-prop': 'error',
|
||||||
|
|
||||||
// Validate whitespace in and around the JSX opening and closing brackets
|
// Validate whitespace in and around the JSX opening and closing brackets
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/843d71a432baf0f01f598d7cf1eea75ad6896e4b/docs/rules/jsx-tag-spacing.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/843d71a432baf0f01f598d7cf1eea75ad6896e4b/docs/rules/jsx-tag-spacing.md
|
||||||
'react/jsx-tag-spacing': ['error', {
|
'react/jsx-tag-spacing': ['error', {
|
||||||
closingSlash: 'never',
|
closingSlash: 'never',
|
||||||
beforeSelfClosing: 'always',
|
beforeSelfClosing: 'always',
|
||||||
@@ -379,44 +386,44 @@ module.exports = {
|
|||||||
}],
|
}],
|
||||||
|
|
||||||
// Enforce spaces before the closing bracket of self-closing JSX elements
|
// Enforce spaces before the closing bracket of self-closing JSX elements
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-space-before-closing.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-space-before-closing.md
|
||||||
// Deprecated in favor of jsx-tag-spacing
|
// Deprecated in favor of jsx-tag-spacing
|
||||||
'react/jsx-space-before-closing': ['off', 'always'],
|
'react/jsx-space-before-closing': ['off', 'always'],
|
||||||
|
|
||||||
// Prevent usage of Array index in keys
|
// Prevent usage of Array index in keys
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-array-index-key.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-array-index-key.md
|
||||||
'react/no-array-index-key': 'error',
|
'react/no-array-index-key': 'error',
|
||||||
|
|
||||||
// Enforce a defaultProps definition for every prop that is not a required prop
|
// Enforce a defaultProps definition for every prop that is not a required prop
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/843d71a432baf0f01f598d7cf1eea75ad6896e4b/docs/rules/require-default-props.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/843d71a432baf0f01f598d7cf1eea75ad6896e4b/docs/rules/require-default-props.md
|
||||||
'react/require-default-props': ['error', {
|
'react/require-default-props': ['error', {
|
||||||
forbidDefaultForRequired: true,
|
forbidDefaultForRequired: true,
|
||||||
}],
|
}],
|
||||||
|
|
||||||
// Forbids using non-exported propTypes
|
// Forbids using non-exported propTypes
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/forbid-foreign-prop-types.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-foreign-prop-types.md
|
||||||
// this is intentionally set to "warn". it would be "error",
|
// this is intentionally set to "warn". it would be "error",
|
||||||
// but it's only critical if you're stripping propTypes in production.
|
// but it's only critical if you're stripping propTypes in production.
|
||||||
'react/forbid-foreign-prop-types': ['warn', { allowInPropTypes: true }],
|
'react/forbid-foreign-prop-types': ['warn', { allowInPropTypes: true }],
|
||||||
|
|
||||||
// Prevent void DOM elements from receiving children
|
// Prevent void DOM elements from receiving children
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/void-dom-elements-no-children.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/void-dom-elements-no-children.md
|
||||||
'react/void-dom-elements-no-children': 'error',
|
'react/void-dom-elements-no-children': 'error',
|
||||||
|
|
||||||
// Enforce all defaultProps have a corresponding non-required PropType
|
// Enforce all defaultProps have a corresponding non-required PropType
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/9e13ae2c51e44872b45cc15bf1ac3a72105bdd0e/docs/rules/default-props-match-prop-types.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/9e13ae2c51e44872b45cc15bf1ac3a72105bdd0e/docs/rules/default-props-match-prop-types.md
|
||||||
'react/default-props-match-prop-types': ['error', { allowRequiredDefaults: false }],
|
'react/default-props-match-prop-types': ['error', { allowRequiredDefaults: false }],
|
||||||
|
|
||||||
// Prevent usage of shouldComponentUpdate when extending React.PureComponent
|
// Prevent usage of shouldComponentUpdate when extending React.PureComponent
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/9e13ae2c51e44872b45cc15bf1ac3a72105bdd0e/docs/rules/no-redundant-should-component-update.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/9e13ae2c51e44872b45cc15bf1ac3a72105bdd0e/docs/rules/no-redundant-should-component-update.md
|
||||||
'react/no-redundant-should-component-update': 'error',
|
'react/no-redundant-should-component-update': 'error',
|
||||||
|
|
||||||
// Prevent unused state values
|
// Prevent unused state values
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/pull/1103/
|
// https://github.com/jsx-eslint/eslint-plugin-react/pull/1103/
|
||||||
'react/no-unused-state': 'error',
|
'react/no-unused-state': 'error',
|
||||||
|
|
||||||
// Enforces consistent naming for boolean props
|
// Enforces consistent naming for boolean props
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/843d71a432baf0f01f598d7cf1eea75ad6896e4b/docs/rules/boolean-prop-naming.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/843d71a432baf0f01f598d7cf1eea75ad6896e4b/docs/rules/boolean-prop-naming.md
|
||||||
'react/boolean-prop-naming': ['off', {
|
'react/boolean-prop-naming': ['off', {
|
||||||
propTypeNames: ['bool', 'mutuallyExclusiveTrueProps'],
|
propTypeNames: ['bool', 'mutuallyExclusiveTrueProps'],
|
||||||
rule: '^(is|has)[A-Z]([A-Za-z0-9]?)+',
|
rule: '^(is|has)[A-Z]([A-Za-z0-9]?)+',
|
||||||
@@ -424,27 +431,27 @@ module.exports = {
|
|||||||
}],
|
}],
|
||||||
|
|
||||||
// Prevents common casing typos
|
// Prevents common casing typos
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/73abadb697034b5ccb514d79fb4689836fe61f91/docs/rules/no-typos.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/73abadb697034b5ccb514d79fb4689836fe61f91/docs/rules/no-typos.md
|
||||||
'react/no-typos': 'error',
|
'react/no-typos': 'error',
|
||||||
|
|
||||||
// Enforce curly braces or disallow unnecessary curly braces in JSX props and/or children
|
// Enforce curly braces or disallow unnecessary curly braces in JSX props and/or children
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-curly-brace-presence.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-brace-presence.md
|
||||||
'react/jsx-curly-brace-presence': ['error', { props: 'never', children: 'never' }],
|
'react/jsx-curly-brace-presence': ['error', { props: 'never', children: 'never' }],
|
||||||
|
|
||||||
// One JSX Element Per Line
|
// One JSX Element Per Line
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/843d71a432baf0f01f598d7cf1eea75ad6896e4b/docs/rules/jsx-one-expression-per-line.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/843d71a432baf0f01f598d7cf1eea75ad6896e4b/docs/rules/jsx-one-expression-per-line.md
|
||||||
'react/jsx-one-expression-per-line': ['error', { allow: 'single-child' }],
|
'react/jsx-one-expression-per-line': ['error', { allow: 'single-child' }],
|
||||||
|
|
||||||
// Enforce consistent usage of destructuring assignment of props, state, and context
|
// Enforce consistent usage of destructuring assignment of props, state, and context
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/843d71a432baf0f01f598d7cf1eea75ad6896e4b/docs/rules/destructuring-assignment.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/843d71a432baf0f01f598d7cf1eea75ad6896e4b/docs/rules/destructuring-assignment.md
|
||||||
'react/destructuring-assignment': ['error', 'always'],
|
'react/destructuring-assignment': ['error', 'always'],
|
||||||
|
|
||||||
// Prevent using this.state within a this.setState
|
// Prevent using this.state within a this.setState
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/843d71a432baf0f01f598d7cf1eea75ad6896e4b/docs/rules/no-access-state-in-setstate.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/843d71a432baf0f01f598d7cf1eea75ad6896e4b/docs/rules/no-access-state-in-setstate.md
|
||||||
'react/no-access-state-in-setstate': 'error',
|
'react/no-access-state-in-setstate': 'error',
|
||||||
|
|
||||||
// Prevent usage of button elements without an explicit type attribute
|
// Prevent usage of button elements without an explicit type attribute
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/843d71a432baf0f01f598d7cf1eea75ad6896e4b/docs/rules/button-has-type.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/843d71a432baf0f01f598d7cf1eea75ad6896e4b/docs/rules/button-has-type.md
|
||||||
'react/button-has-type': ['error', {
|
'react/button-has-type': ['error', {
|
||||||
button: true,
|
button: true,
|
||||||
submit: true,
|
submit: true,
|
||||||
@@ -455,44 +462,44 @@ module.exports = {
|
|||||||
'react/jsx-child-element-spacing': 'off',
|
'react/jsx-child-element-spacing': 'off',
|
||||||
|
|
||||||
// Prevent this from being used in stateless functional components
|
// Prevent this from being used in stateless functional components
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/843d71a432baf0f01f598d7cf1eea75ad6896e4b/docs/rules/no-this-in-sfc.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/843d71a432baf0f01f598d7cf1eea75ad6896e4b/docs/rules/no-this-in-sfc.md
|
||||||
'react/no-this-in-sfc': 'error',
|
'react/no-this-in-sfc': 'error',
|
||||||
|
|
||||||
// Validate JSX maximum depth
|
// Validate JSX maximum depth
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/abe8381c0d6748047224c430ce47f02e40160ed0/docs/rules/jsx-max-depth.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/abe8381c0d6748047224c430ce47f02e40160ed0/docs/rules/jsx-max-depth.md
|
||||||
'react/jsx-max-depth': 'off',
|
'react/jsx-max-depth': 'off',
|
||||||
|
|
||||||
// Disallow multiple spaces between inline JSX props
|
// Disallow multiple spaces between inline JSX props
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/ac102885765be5ff37847a871f239c6703e1c7cc/docs/rules/jsx-props-no-multi-spaces.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/ac102885765be5ff37847a871f239c6703e1c7cc/docs/rules/jsx-props-no-multi-spaces.md
|
||||||
'react/jsx-props-no-multi-spaces': 'error',
|
'react/jsx-props-no-multi-spaces': 'error',
|
||||||
|
|
||||||
// Prevent usage of UNSAFE_ methods
|
// Prevent usage of UNSAFE_ methods
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/157cc932be2cfaa56b3f5b45df6f6d4322a2f660/docs/rules/no-unsafe.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/157cc932be2cfaa56b3f5b45df6f6d4322a2f660/docs/rules/no-unsafe.md
|
||||||
'react/no-unsafe': 'off',
|
'react/no-unsafe': 'off',
|
||||||
|
|
||||||
// Enforce shorthand or standard form for React fragments
|
// Enforce shorthand or standard form for React fragments
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/bc976b837abeab1dffd90ac6168b746a83fc83cc/docs/rules/jsx-fragments.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/bc976b837abeab1dffd90ac6168b746a83fc83cc/docs/rules/jsx-fragments.md
|
||||||
'react/jsx-fragments': ['error', 'syntax'],
|
'react/jsx-fragments': ['error', 'syntax'],
|
||||||
|
|
||||||
// Enforce linebreaks in curly braces in JSX attributes and expressions.
|
// Enforce linebreaks in curly braces in JSX attributes and expressions.
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-curly-newline.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-newline.md
|
||||||
'react/jsx-curly-newline': ['error', {
|
'react/jsx-curly-newline': ['error', {
|
||||||
multiline: 'consistent',
|
multiline: 'consistent',
|
||||||
singleline: 'consistent',
|
singleline: 'consistent',
|
||||||
}],
|
}],
|
||||||
|
|
||||||
// Enforce state initialization style
|
// Enforce state initialization style
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/state-in-constructor.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/state-in-constructor.md
|
||||||
// TODO: set to "never" once babel-preset-airbnb supports public class fields
|
// TODO: set to "never" once babel-preset-airbnb supports public class fields
|
||||||
'react/state-in-constructor': ['error', 'always'],
|
'react/state-in-constructor': ['error', 'always'],
|
||||||
|
|
||||||
// Enforces where React component static properties should be positioned
|
// Enforces where React component static properties should be positioned
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/static-property-placement.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/static-property-placement.md
|
||||||
// TODO: set to "static public field" once babel-preset-airbnb supports public class fields
|
// TODO: set to "static public field" once babel-preset-airbnb supports public class fields
|
||||||
'react/static-property-placement': ['error', 'property assignment'],
|
'react/static-property-placement': ['error', 'property assignment'],
|
||||||
|
|
||||||
// Disallow JSX props spreading
|
// Disallow JSX props spreading
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-spreading.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-spreading.md
|
||||||
'react/jsx-props-no-spreading': ['error', {
|
'react/jsx-props-no-spreading': ['error', {
|
||||||
html: 'enforce',
|
html: 'enforce',
|
||||||
custom: 'enforce',
|
custom: 'enforce',
|
||||||
@@ -501,11 +508,11 @@ module.exports = {
|
|||||||
}],
|
}],
|
||||||
|
|
||||||
// Enforce that props are read-only
|
// Enforce that props are read-only
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-read-only-props.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-read-only-props.md
|
||||||
'react/prefer-read-only-props': 'off',
|
'react/prefer-read-only-props': 'off',
|
||||||
|
|
||||||
// Prevent usage of `javascript:` URLs
|
// Prevent usage of `javascript:` URLs
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-script-url.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-script-url.md
|
||||||
'react/jsx-no-script-url': ['error', [
|
'react/jsx-no-script-url': ['error', [
|
||||||
{
|
{
|
||||||
name: 'Link',
|
name: 'Link',
|
||||||
@@ -514,52 +521,85 @@ module.exports = {
|
|||||||
]],
|
]],
|
||||||
|
|
||||||
// Disallow unnecessary fragments
|
// Disallow unnecessary fragments
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-useless-fragment.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-useless-fragment.md
|
||||||
'react/jsx-no-useless-fragment': 'error',
|
'react/jsx-no-useless-fragment': 'error',
|
||||||
|
|
||||||
// Prevent adjacent inline elements not separated by whitespace
|
// Prevent adjacent inline elements not separated by whitespace
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-adjacent-inline-elements.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-adjacent-inline-elements.md
|
||||||
// TODO: enable? semver-major
|
// TODO: enable? semver-major
|
||||||
'react/no-adjacent-inline-elements': 'off',
|
'react/no-adjacent-inline-elements': 'off',
|
||||||
|
|
||||||
// Enforce a specific function type for function components
|
// Enforce a specific function type for function components
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/function-component-definition.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/function-component-definition.md
|
||||||
'react/function-component-definition': ['error', {
|
'react/function-component-definition': ['error', {
|
||||||
namedComponents: ['function-declaration', 'function-expression'],
|
namedComponents: ['function-declaration', 'function-expression'],
|
||||||
unnamedComponents: 'function-expression',
|
unnamedComponents: 'function-expression',
|
||||||
}],
|
}],
|
||||||
|
|
||||||
// Enforce a new line after jsx elements and expressions
|
// Enforce a new line after jsx elements and expressions
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/e2eaadae316f9506d163812a09424eb42698470a/docs/rules/jsx-newline.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/e2eaadae316f9506d163812a09424eb42698470a/docs/rules/jsx-newline.md
|
||||||
'react/jsx-newline': 'off',
|
'react/jsx-newline': 'off',
|
||||||
|
|
||||||
// Prevent react contexts from taking non-stable values
|
// Prevent react contexts from taking non-stable values
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/e2eaadae316f9506d163812a09424eb42698470a/docs/rules/jsx-no-constructed-context-values.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/e2eaadae316f9506d163812a09424eb42698470a/docs/rules/jsx-no-constructed-context-values.md
|
||||||
'react/jsx-no-constructed-context-values': 'error',
|
'react/jsx-no-constructed-context-values': 'error',
|
||||||
|
|
||||||
// Prevent creating unstable components inside components
|
// Prevent creating unstable components inside components
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/c2a790a3472eea0f6de984bdc3ee2a62197417fb/docs/rules/no-unstable-nested-components.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/c2a790a3472eea0f6de984bdc3ee2a62197417fb/docs/rules/no-unstable-nested-components.md
|
||||||
'react/no-unstable-nested-components': 'error',
|
'react/no-unstable-nested-components': 'error',
|
||||||
|
|
||||||
// Enforce that namespaces are not used in React elements
|
// Enforce that namespaces are not used in React elements
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/8785c169c25b09b33c95655bf508cf46263bc53f/docs/rules/no-namespace.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/8785c169c25b09b33c95655bf508cf46263bc53f/docs/rules/no-namespace.md
|
||||||
'react/no-namespace': 'error',
|
'react/no-namespace': 'error',
|
||||||
|
|
||||||
// Prefer exact proptype definitions
|
// Prefer exact proptype definitions
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/8785c169c25b09b33c95655bf508cf46263bc53f/docs/rules/prefer-exact-props.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/8785c169c25b09b33c95655bf508cf46263bc53f/docs/rules/prefer-exact-props.md
|
||||||
'react/prefer-exact-props': 'error',
|
'react/prefer-exact-props': 'error',
|
||||||
|
|
||||||
// Lifecycle methods should be methods on the prototype, not class fields
|
// Lifecycle methods should be methods on the prototype, not class fields
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/21e01b61af7a38fc86d94f27eb66cda8054582ed/docs/rules/no-arrow-function-lifecycle.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/21e01b61af7a38fc86d94f27eb66cda8054582ed/docs/rules/no-arrow-function-lifecycle.md
|
||||||
'react/no-arrow-function-lifecycle': 'error',
|
'react/no-arrow-function-lifecycle': 'error',
|
||||||
|
|
||||||
// Prevent usage of invalid attributes
|
// Prevent usage of invalid attributes
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/21e01b61af7a38fc86d94f27eb66cda8054582ed/docs/rules/no-invalid-html-attribute.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/21e01b61af7a38fc86d94f27eb66cda8054582ed/docs/rules/no-invalid-html-attribute.md
|
||||||
'react/no-invalid-html-attribute': 'error',
|
'react/no-invalid-html-attribute': 'error',
|
||||||
|
|
||||||
// Prevent declaring unused methods of component class
|
// Prevent declaring unused methods of component class
|
||||||
// https://github.com/yannickcr/eslint-plugin-react/blob/21e01b61af7a38fc86d94f27eb66cda8054582ed/docs/rules/no-unused-class-component-methods.md
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/21e01b61af7a38fc86d94f27eb66cda8054582ed/docs/rules/no-unused-class-component-methods.md
|
||||||
'react/no-unused-class-component-methods': 'error',
|
'react/no-unused-class-component-methods': 'error',
|
||||||
|
|
||||||
|
// Ensure destructuring and symmetric naming of useState hook value and setter variables
|
||||||
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/c8833f301314dab3e79ef7ac4cf863e4d5fa0019/docs/rules/hook-use-state.md
|
||||||
|
// TODO: semver-major, enable
|
||||||
|
'react/hook-use-state': 'off',
|
||||||
|
|
||||||
|
// Enforce sandbox attribute on iframe elements
|
||||||
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/c8833f301314dab3e79ef7ac4cf863e4d5fa0019/docs/rules/iframe-missing-sandbox.md
|
||||||
|
// TODO: semver-major, enable
|
||||||
|
'react/iframe-missing-sandbox': 'off',
|
||||||
|
|
||||||
|
// Prevent problematic leaked values from being rendered
|
||||||
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/c42b624d0fb9ad647583a775ab9751091eec066f/docs/rules/jsx-no-leaked-render.md
|
||||||
|
// TODO: semver-major, enable
|
||||||
|
'react/jsx-no-leaked-render': 'off',
|
||||||
|
|
||||||
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/66b58dd4864678eb869a7bf434c72ff7ac530eb1/docs/rules/no-object-type-as-default-prop.md
|
||||||
|
// TODO: semver-major, enable
|
||||||
|
'react/no-object-type-as-default-prop': 'off',
|
||||||
|
|
||||||
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/66b58dd4864678eb869a7bf434c72ff7ac530eb1/docs/rules/sort-default-props.md
|
||||||
|
// TODO: semver-major, enable?
|
||||||
|
'react/sort-default-props': ['off', {
|
||||||
|
ignoreCase: false
|
||||||
|
}],
|
||||||
|
|
||||||
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/9668ee0762acd5c23f53cd3a372e2d8d9563944d/docs/rules/forward-ref-uses-ref.md
|
||||||
|
// TODO: semver-major, enable
|
||||||
|
'react/forward-ref-uses-ref': 'off',
|
||||||
|
|
||||||
|
// https://github.com/jsx-eslint/eslint-plugin-react/blob/9668ee0762acd5c23f53cd3a372e2d8d9563944d/docs/rules/jsx-props-no-spread-multi.md
|
||||||
|
// TODO: semver-major, enable
|
||||||
|
'react/jsx-props-no-spread-multi': 'off',
|
||||||
},
|
},
|
||||||
|
|
||||||
settings: {
|
settings: {
|
||||||
|
|||||||
@@ -6,13 +6,14 @@ const base = require('../base');
|
|||||||
|
|
||||||
const files = { base };
|
const files = { base };
|
||||||
|
|
||||||
fs.readdirSync(path.join(__dirname, '../rules')).forEach((name) => {
|
const rulesDir = path.join(__dirname, '../rules');
|
||||||
|
fs.readdirSync(rulesDir).forEach((name) => {
|
||||||
if (name === 'react.js' || name === 'react-a11y.js') {
|
if (name === 'react.js' || name === 'react-a11y.js') {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// eslint-disable-next-line import/no-dynamic-require
|
// eslint-disable-next-line import/no-dynamic-require
|
||||||
files[name] = require(`../rules/${name}`); // eslint-disable-line global-require
|
files[name] = require(path.join(rulesDir, name)); // eslint-disable-line global-require
|
||||||
});
|
});
|
||||||
|
|
||||||
Object.keys(files).forEach((name) => {
|
Object.keys(files).forEach((name) => {
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
#!/usr/bin/env node
|
#!/usr/bin/env node
|
||||||
|
|
||||||
const assign = require('object.assign');
|
const { isArray } = Array;
|
||||||
const entries = require('object.entries');
|
const { entries } = Object;
|
||||||
const { ESLint } = require('eslint');
|
const { ESLint } = require('eslint');
|
||||||
|
|
||||||
const baseConfig = require('.');
|
const baseConfig = require('.');
|
||||||
@@ -10,7 +10,7 @@ const whitespaceRules = require('./whitespaceRules');
|
|||||||
const severities = ['off', 'warn', 'error'];
|
const severities = ['off', 'warn', 'error'];
|
||||||
|
|
||||||
function getSeverity(ruleConfig) {
|
function getSeverity(ruleConfig) {
|
||||||
if (Array.isArray(ruleConfig)) {
|
if (isArray(ruleConfig)) {
|
||||||
return getSeverity(ruleConfig[0]);
|
return getSeverity(ruleConfig[0]);
|
||||||
}
|
}
|
||||||
if (typeof ruleConfig === 'number') {
|
if (typeof ruleConfig === 'number') {
|
||||||
@@ -20,7 +20,7 @@ function getSeverity(ruleConfig) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function onlyErrorOnRules(rulesToError, config) {
|
async function onlyErrorOnRules(rulesToError, config) {
|
||||||
const errorsOnly = assign({}, config);
|
const errorsOnly = { ...config };
|
||||||
const cli = new ESLint({
|
const cli = new ESLint({
|
||||||
useEslintrc: false,
|
useEslintrc: false,
|
||||||
baseConfig: config
|
baseConfig: config
|
||||||
@@ -33,7 +33,7 @@ async function onlyErrorOnRules(rulesToError, config) {
|
|||||||
const severity = getSeverity(ruleConfig);
|
const severity = getSeverity(ruleConfig);
|
||||||
|
|
||||||
if (rulesToError.indexOf(ruleName) === -1 && severity === 'error') {
|
if (rulesToError.indexOf(ruleName) === -1 && severity === 'error') {
|
||||||
if (Array.isArray(ruleConfig)) {
|
if (isArray(ruleConfig)) {
|
||||||
errorsOnly.rules[ruleName] = ['warn'].concat(ruleConfig.slice(1));
|
errorsOnly.rules[ruleName] = ['warn'].concat(ruleConfig.slice(1));
|
||||||
} else if (typeof ruleConfig === 'number') {
|
} else if (typeof ruleConfig === 'number') {
|
||||||
errorsOnly.rules[ruleName] = 1;
|
errorsOnly.rules[ruleName] = 1;
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
/* eslint global-require: 0 */
|
/* eslint global-require: 0 */
|
||||||
|
|
||||||
|
const { isArray } = Array;
|
||||||
|
const { entries } = Object;
|
||||||
const { CLIEngine } = require('eslint');
|
const { CLIEngine } = require('eslint');
|
||||||
|
|
||||||
if (CLIEngine) {
|
if (CLIEngine) {
|
||||||
/* eslint no-inner-declarations: 0 */
|
/* eslint no-inner-declarations: 0 */
|
||||||
const assign = require('object.assign');
|
|
||||||
const entries = require('object.entries');
|
|
||||||
const whitespaceRules = require('./whitespaceRules');
|
const whitespaceRules = require('./whitespaceRules');
|
||||||
|
|
||||||
const baseConfig = require('.');
|
const baseConfig = require('.');
|
||||||
@@ -13,7 +13,7 @@ if (CLIEngine) {
|
|||||||
const severities = ['off', 'warn', 'error'];
|
const severities = ['off', 'warn', 'error'];
|
||||||
|
|
||||||
function getSeverity(ruleConfig) {
|
function getSeverity(ruleConfig) {
|
||||||
if (Array.isArray(ruleConfig)) {
|
if (isArray(ruleConfig)) {
|
||||||
return getSeverity(ruleConfig[0]);
|
return getSeverity(ruleConfig[0]);
|
||||||
}
|
}
|
||||||
if (typeof ruleConfig === 'number') {
|
if (typeof ruleConfig === 'number') {
|
||||||
@@ -23,7 +23,7 @@ if (CLIEngine) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function onlyErrorOnRules(rulesToError, config) {
|
function onlyErrorOnRules(rulesToError, config) {
|
||||||
const errorsOnly = assign({}, config);
|
const errorsOnly = { ...config };
|
||||||
const cli = new CLIEngine({ baseConfig: config, useEslintrc: false });
|
const cli = new CLIEngine({ baseConfig: config, useEslintrc: false });
|
||||||
const baseRules = cli.getConfigForFile(require.resolve('./')).rules;
|
const baseRules = cli.getConfigForFile(require.resolve('./')).rules;
|
||||||
|
|
||||||
@@ -33,7 +33,7 @@ if (CLIEngine) {
|
|||||||
const severity = getSeverity(ruleConfig);
|
const severity = getSeverity(ruleConfig);
|
||||||
|
|
||||||
if (rulesToError.indexOf(ruleName) === -1 && severity === 'error') {
|
if (rulesToError.indexOf(ruleName) === -1 && severity === 'error') {
|
||||||
if (Array.isArray(ruleConfig)) {
|
if (isArray(ruleConfig)) {
|
||||||
errorsOnly.rules[ruleName] = ['warn'].concat(ruleConfig.slice(1));
|
errorsOnly.rules[ruleName] = ['warn'].concat(ruleConfig.slice(1));
|
||||||
} else if (typeof ruleConfig === 'number') {
|
} else if (typeof ruleConfig === 'number') {
|
||||||
errorsOnly.rules[ruleName] = 1;
|
errorsOnly.rules[ruleName] = 1;
|
||||||
@@ -51,5 +51,11 @@ if (CLIEngine) {
|
|||||||
const path = require('path');
|
const path = require('path');
|
||||||
const { execSync } = require('child_process');
|
const { execSync } = require('child_process');
|
||||||
|
|
||||||
module.exports = JSON.parse(String(execSync(path.join(__dirname, 'whitespace-async.js'))));
|
// NOTE: ESLint adds runtime statistics to the output (so it's no longer JSON) if TIMING is set
|
||||||
|
module.exports = JSON.parse(String(execSync(path.join(__dirname, 'whitespace-async.js'), {
|
||||||
|
env: {
|
||||||
|
...process.env,
|
||||||
|
TIMING: undefined,
|
||||||
|
}
|
||||||
|
})));
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -25,14 +25,14 @@ This style guide is mostly based on the standards that are currently prevalent i
|
|||||||
## Basic Rules
|
## Basic Rules
|
||||||
|
|
||||||
- Only include one React component per file.
|
- Only include one React component per file.
|
||||||
- However, multiple [Stateless, or Pure, Components](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions) are allowed per file. eslint: [`react/no-multi-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-multi-comp.md#ignorestateless).
|
- However, multiple [Stateless, or Pure, Components](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions) are allowed per file. eslint: [`react/no-multi-comp`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-multi-comp.md#ignorestateless).
|
||||||
- Always use JSX syntax.
|
- Always use JSX syntax.
|
||||||
- Do not use `React.createElement` unless you’re initializing the app from a file that is not JSX.
|
- Do not use `React.createElement` unless you’re initializing the app from a file that is not JSX.
|
||||||
- [`react/forbid-prop-types`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/forbid-prop-types.md) will allow `arrays` and `objects` only if it is explicitly noted what `array` and `object` contains, using `arrayOf`, `objectOf`, or `shape`.
|
- [`react/forbid-prop-types`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-prop-types.md) will allow `arrays` and `objects` only if it is explicitly noted what `array` and `object` contains, using `arrayOf`, `objectOf`, or `shape`.
|
||||||
|
|
||||||
## Class vs `React.createClass` vs stateless
|
## Class vs `React.createClass` vs stateless
|
||||||
|
|
||||||
- If you have internal state and/or refs, prefer `class extends React.Component` over `React.createClass`. eslint: [`react/prefer-es6-class`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md) [`react/prefer-stateless-function`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md)
|
- If you have internal state and/or refs, prefer `class extends React.Component` over `React.createClass`. eslint: [`react/prefer-es6-class`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md) [`react/prefer-stateless-function`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md)
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
// bad
|
// bad
|
||||||
@@ -81,9 +81,9 @@ This style guide is mostly based on the standards that are currently prevalent i
|
|||||||
|
|
||||||
## Naming
|
## Naming
|
||||||
|
|
||||||
- **Extensions**: Use `.jsx` extension for React components. eslint: [`react/jsx-filename-extension`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md)
|
- **Extensions**: Use `.jsx` extension for React components. eslint: [`react/jsx-filename-extension`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md)
|
||||||
- **Filename**: Use PascalCase for filenames. E.g., `ReservationCard.jsx`.
|
- **Filename**: Use PascalCase for filenames. E.g., `ReservationCard.jsx`.
|
||||||
- **Reference Naming**: Use PascalCase for React components and camelCase for their instances. eslint: [`react/jsx-pascal-case`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md)
|
- **Reference Naming**: Use PascalCase for React components and camelCase for their instances. eslint: [`react/jsx-pascal-case`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md)
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
// bad
|
// bad
|
||||||
@@ -172,7 +172,7 @@ This style guide is mostly based on the standards that are currently prevalent i
|
|||||||
|
|
||||||
## Alignment
|
## Alignment
|
||||||
|
|
||||||
- Follow these alignment styles for JSX syntax. eslint: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md) [`react/jsx-closing-tag-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-tag-location.md)
|
- Follow these alignment styles for JSX syntax. eslint: [`react/jsx-closing-bracket-location`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md) [`react/jsx-closing-tag-location`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-closing-tag-location.md)
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
// bad
|
// bad
|
||||||
@@ -259,7 +259,7 @@ This style guide is mostly based on the standards that are currently prevalent i
|
|||||||
|
|
||||||
## Spacing
|
## Spacing
|
||||||
|
|
||||||
- Always include a single space in your self-closing tag. eslint: [`no-multi-spaces`](https://eslint.org/docs/rules/no-multi-spaces), [`react/jsx-tag-spacing`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-tag-spacing.md)
|
- Always include a single space in your self-closing tag. eslint: [`no-multi-spaces`](https://eslint.org/docs/rules/no-multi-spaces), [`react/jsx-tag-spacing`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-tag-spacing.md)
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
// bad
|
// bad
|
||||||
@@ -276,7 +276,7 @@ This style guide is mostly based on the standards that are currently prevalent i
|
|||||||
<Foo />
|
<Foo />
|
||||||
```
|
```
|
||||||
|
|
||||||
- Do not pad JSX curly braces with spaces. eslint: [`react/jsx-curly-spacing`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-curly-spacing.md)
|
- Do not pad JSX curly braces with spaces. eslint: [`react/jsx-curly-spacing`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-spacing.md)
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
// bad
|
// bad
|
||||||
@@ -305,7 +305,7 @@ This style guide is mostly based on the standards that are currently prevalent i
|
|||||||
/>
|
/>
|
||||||
```
|
```
|
||||||
|
|
||||||
- Omit the value of the prop when it is explicitly `true`. eslint: [`react/jsx-boolean-value`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md)
|
- Omit the value of the prop when it is explicitly `true`. eslint: [`react/jsx-boolean-value`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md)
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
// bad
|
// bad
|
||||||
@@ -322,7 +322,7 @@ This style guide is mostly based on the standards that are currently prevalent i
|
|||||||
<Foo hidden />
|
<Foo hidden />
|
||||||
```
|
```
|
||||||
|
|
||||||
- Always include an `alt` prop on `<img>` tags. If the image is presentational, `alt` can be an empty string or the `<img>` must have `role="presentation"`. eslint: [`jsx-a11y/alt-text`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/alt-text.md)
|
- Always include an `alt` prop on `<img>` tags. If the image is presentational, `alt` can be an empty string or the `<img>` must have `role="presentation"`. eslint: [`jsx-a11y/alt-text`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/alt-text.md)
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
// bad
|
// bad
|
||||||
@@ -338,7 +338,7 @@ This style guide is mostly based on the standards that are currently prevalent i
|
|||||||
<img src="hello.jpg" role="presentation" />
|
<img src="hello.jpg" role="presentation" />
|
||||||
```
|
```
|
||||||
|
|
||||||
- Do not use words like "image", "photo", or "picture" in `<img>` `alt` props. eslint: [`jsx-a11y/img-redundant-alt`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-redundant-alt.md)
|
- Do not use words like "image", "photo", or "picture" in `<img>` `alt` props. eslint: [`jsx-a11y/img-redundant-alt`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-redundant-alt.md)
|
||||||
|
|
||||||
> Why? Screenreaders already announce `img` elements as images, so there is no need to include this information in the alt text.
|
> Why? Screenreaders already announce `img` elements as images, so there is no need to include this information in the alt text.
|
||||||
|
|
||||||
@@ -350,7 +350,7 @@ This style guide is mostly based on the standards that are currently prevalent i
|
|||||||
<img src="hello.jpg" alt="Me waving hello" />
|
<img src="hello.jpg" alt="Me waving hello" />
|
||||||
```
|
```
|
||||||
|
|
||||||
- Use only valid, non-abstract [ARIA roles](https://www.w3.org/TR/wai-aria/#usage_intro). eslint: [`jsx-a11y/aria-role`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-role.md)
|
- Use only valid, non-abstract [ARIA roles](https://www.w3.org/TR/wai-aria/#usage_intro). eslint: [`jsx-a11y/aria-role`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-role.md)
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
// bad - not an ARIA role
|
// bad - not an ARIA role
|
||||||
@@ -363,7 +363,7 @@ This style guide is mostly based on the standards that are currently prevalent i
|
|||||||
<div role="button" />
|
<div role="button" />
|
||||||
```
|
```
|
||||||
|
|
||||||
- Do not use `accessKey` on elements. eslint: [`jsx-a11y/no-access-key`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-access-key.md)
|
- Do not use `accessKey` on elements. eslint: [`jsx-a11y/no-access-key`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-access-key.md)
|
||||||
|
|
||||||
> Why? Inconsistencies between keyboard shortcuts and keyboard commands used by people using screenreaders and keyboards complicate accessibility.
|
> Why? Inconsistencies between keyboard shortcuts and keyboard commands used by people using screenreaders and keyboards complicate accessibility.
|
||||||
|
|
||||||
@@ -375,7 +375,7 @@ This style guide is mostly based on the standards that are currently prevalent i
|
|||||||
<div />
|
<div />
|
||||||
```
|
```
|
||||||
|
|
||||||
- Avoid using an array index as `key` prop, prefer a stable ID. eslint: [`react/no-array-index-key`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-array-index-key.md)
|
- Avoid using an array index as `key` prop, prefer a stable ID. eslint: [`react/no-array-index-key`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-array-index-key.md)
|
||||||
|
|
||||||
> Why? Not using a stable ID [is an anti-pattern](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318) because it can negatively impact performance and cause issues with component state.
|
> Why? Not using a stable ID [is an anti-pattern](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318) because it can negatively impact performance and cause issues with component state.
|
||||||
|
|
||||||
@@ -483,7 +483,7 @@ We don’t recommend using indexes for keys if the order of items may change.
|
|||||||
|
|
||||||
## Refs
|
## Refs
|
||||||
|
|
||||||
- Always use ref callbacks. eslint: [`react/no-string-refs`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-string-refs.md)
|
- Always use ref callbacks. eslint: [`react/no-string-refs`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-string-refs.md)
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
// bad
|
// bad
|
||||||
@@ -499,7 +499,7 @@ We don’t recommend using indexes for keys if the order of items may change.
|
|||||||
|
|
||||||
## Parentheses
|
## Parentheses
|
||||||
|
|
||||||
- Wrap JSX tags in parentheses when they span more than one line. eslint: [`react/jsx-wrap-multilines`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-wrap-multilines.md)
|
- Wrap JSX tags in parentheses when they span more than one line. eslint: [`react/jsx-wrap-multilines`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-wrap-multilines.md)
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
// bad
|
// bad
|
||||||
@@ -527,7 +527,7 @@ We don’t recommend using indexes for keys if the order of items may change.
|
|||||||
|
|
||||||
## Tags
|
## Tags
|
||||||
|
|
||||||
- Always self-close tags that have no children. eslint: [`react/self-closing-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md)
|
- Always self-close tags that have no children. eslint: [`react/self-closing-comp`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md)
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
// bad
|
// bad
|
||||||
@@ -537,7 +537,7 @@ We don’t recommend using indexes for keys if the order of items may change.
|
|||||||
<Foo variant="stuff" />
|
<Foo variant="stuff" />
|
||||||
```
|
```
|
||||||
|
|
||||||
- If your component has multiline properties, close its tag on a new line. eslint: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md)
|
- If your component has multiline properties, close its tag on a new line. eslint: [`react/jsx-closing-bracket-location`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md)
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
// bad
|
// bad
|
||||||
@@ -571,7 +571,7 @@ We don’t recommend using indexes for keys if the order of items may change.
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
- Bind event handlers for the render method in the constructor. eslint: [`react/jsx-no-bind`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md)
|
- Bind event handlers for the render method in the constructor. eslint: [`react/jsx-no-bind`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md)
|
||||||
|
|
||||||
> Why? A bind call in the render path creates a brand new function on every single render. Do not use arrow functions in class fields, because it makes them [challenging to test and debug, and can negatively impact performance](https://medium.com/@charpeni/arrow-functions-in-class-properties-might-not-be-as-great-as-we-think-3b3551c440b1), and because conceptually, class fields are for data, not logic.
|
> Why? A bind call in the render path creates a brand new function on every single render. Do not use arrow functions in class fields, because it makes them [challenging to test and debug, and can negatively impact performance](https://medium.com/@charpeni/arrow-functions-in-class-properties-might-not-be-as-great-as-we-think-3b3551c440b1), and because conceptually, class fields are for data, not logic.
|
||||||
|
|
||||||
@@ -639,7 +639,7 @@ We don’t recommend using indexes for keys if the order of items may change.
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
- Be sure to return a value in your `render` methods. eslint: [`react/require-render-return`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/require-render-return.md)
|
- Be sure to return a value in your `render` methods. eslint: [`react/require-render-return`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/require-render-return.md)
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
// bad
|
// bad
|
||||||
@@ -705,7 +705,7 @@ We don’t recommend using indexes for keys if the order of items may change.
|
|||||||
export default Link;
|
export default Link;
|
||||||
```
|
```
|
||||||
|
|
||||||
- Ordering for `React.createClass`: eslint: [`react/sort-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md)
|
- Ordering for `React.createClass`: eslint: [`react/sort-comp`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/sort-comp.md)
|
||||||
|
|
||||||
1. `displayName`
|
1. `displayName`
|
||||||
1. `propTypes`
|
1. `propTypes`
|
||||||
@@ -731,7 +731,7 @@ We don’t recommend using indexes for keys if the order of items may change.
|
|||||||
|
|
||||||
## `isMounted`
|
## `isMounted`
|
||||||
|
|
||||||
- Do not use `isMounted`. eslint: [`react/no-is-mounted`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-is-mounted.md)
|
- Do not use `isMounted`. eslint: [`react/no-is-mounted`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-is-mounted.md)
|
||||||
|
|
||||||
> Why? [`isMounted` is an anti-pattern][anti-pattern], is not available when using ES6 classes, and is on its way to being officially deprecated.
|
> Why? [`isMounted` is an anti-pattern][anti-pattern], is not available when using ES6 classes, and is on its way to being officially deprecated.
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user