@spscommerce/eslint-config-typescript 9.2.3 → 9.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/GUIDE.md +116 -116
- package/package.json +1 -1
package/GUIDE.md
CHANGED
|
@@ -493,7 +493,7 @@ console.log(foo[0], bar[0]); // => 9, 9
|
|
|
493
493
|
<a name="types--assertions"></a>
|
|
494
494
|
[**1.3**](#types--assertions) ‣ Type assertions should be written in `as` style, rather than prefix style.
|
|
495
495
|
|
|
496
|
-
|
|
496
|
+
[`@typescript-eslint/consistent-type-assertions`](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/consistent-type-assertions.md)
|
|
497
497
|
|
|
498
498
|
> Why? Because it uses angle brackets, the prefix style can be confused when generics are also in play, as well as potentially tripping up IDEs and tooling in `.tsx` files.
|
|
499
499
|
|
|
@@ -516,7 +516,7 @@ console.log(squareIt(foo as number));
|
|
|
516
516
|
<a name="types--enums"></a>
|
|
517
517
|
[**1.4**](#types--enums) ‣ Explicitly initialize the values of enum members.
|
|
518
518
|
|
|
519
|
-
|
|
519
|
+
[`@typescript-eslint/prefer-enum-initializers`](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/prefer-enum-initializers.md)
|
|
520
520
|
|
|
521
521
|
> Why? If you allow member values to be inferred, then adding a new member can result in the values of pre-existing members changing. This can potentially introduce bugs.
|
|
522
522
|
|
|
@@ -542,7 +542,7 @@ enum Status {
|
|
|
542
542
|
<a name="references--prefer-const"></a>
|
|
543
543
|
[**2.1**](#references--prefer-const) ‣ Use `const` for all of your references; avoid using `var`.
|
|
544
544
|
|
|
545
|
-
|
|
545
|
+
[`prefer-const`](https://eslint.org/docs/rules/prefer-const.html), [`no-const-assign`](https://eslint.org/docs/rules/no-const-assign.html)
|
|
546
546
|
|
|
547
547
|
> Why? This ensures that you can’t reassign your references, which can lead to bugs and difficult to comprehend code.
|
|
548
548
|
|
|
@@ -561,7 +561,7 @@ const b = 2;
|
|
|
561
561
|
<a name="references--disallow-var"></a>
|
|
562
562
|
[**2.2**](#references--disallow-var) ‣ If you must reassign references, use `let` instead of `var`.
|
|
563
563
|
|
|
564
|
-
|
|
564
|
+
[`no-var`](https://eslint.org/docs/rules/no-var.html)
|
|
565
565
|
|
|
566
566
|
> Why? `let` is block-scoped rather than function-scoped like `var`.
|
|
567
567
|
|
|
@@ -605,7 +605,7 @@ In the above code, you can see that referencing `a` and `b` will produce a Refer
|
|
|
605
605
|
<a name="objects--no-new"></a>
|
|
606
606
|
[**3.1**](#objects--no-new) ‣ Use the literal syntax for object creation.
|
|
607
607
|
|
|
608
|
-
|
|
608
|
+
[`no-new-object`](https://eslint.org/docs/rules/no-new-object.html)
|
|
609
609
|
|
|
610
610
|
```typescript
|
|
611
611
|
// bad
|
|
@@ -647,7 +647,7 @@ const obj = {
|
|
|
647
647
|
<a name="es6-object-shorthand"></a>
|
|
648
648
|
[**3.3**](#es6-object-shorthand) ‣ Use object method shorthand.
|
|
649
649
|
|
|
650
|
-
|
|
650
|
+
[`object-shorthand`](https://eslint.org/docs/rules/object-shorthand.html)
|
|
651
651
|
|
|
652
652
|
```typescript
|
|
653
653
|
// bad
|
|
@@ -674,7 +674,7 @@ const atom = {
|
|
|
674
674
|
<a name="es6-object-concise"></a>
|
|
675
675
|
[**3.4**](#es6-object-concise) ‣ Use property value shorthand.
|
|
676
676
|
|
|
677
|
-
|
|
677
|
+
[`object-shorthand`](https://eslint.org/docs/rules/object-shorthand.html)
|
|
678
678
|
|
|
679
679
|
> Why? It is shorter and descriptive.
|
|
680
680
|
|
|
@@ -697,9 +697,9 @@ const obj = {
|
|
|
697
697
|
<a name="objects--quoted-props"></a>
|
|
698
698
|
[**3.5**](#objects--quoted-props) ‣ Only quote properties that are invalid identifiers.
|
|
699
699
|
|
|
700
|
-
|
|
700
|
+
**Enforced by Prettier**
|
|
701
701
|
|
|
702
|
-
|
|
702
|
+
[`quote-props`](https://eslint.org/docs/rules/quote-props.html)
|
|
703
703
|
|
|
704
704
|
> Why? In general we consider it subjectively easier to read. It improves syntax highlighting, and is also more easily optimized by many JS engines.
|
|
705
705
|
|
|
@@ -724,7 +724,7 @@ const good = {
|
|
|
724
724
|
<a name="objects--rest-spread"></a>
|
|
725
725
|
[**3.6**](#objects--rest-spread) ‣ Prefer the object spread syntax over [`Object.assign`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) to shallow-copy objects. Use the object rest operator to get a new object with certain properties omitted.
|
|
726
726
|
|
|
727
|
-
|
|
727
|
+
[`prefer-object-spread`](https://eslint.org/docs/rules/prefer-object-spread)
|
|
728
728
|
|
|
729
729
|
```typescript
|
|
730
730
|
// very bad
|
|
@@ -750,7 +750,7 @@ const { a, ...noA } = copy; // noA => { b: 2, c: 3 }
|
|
|
750
750
|
<a name="arrays--literals"></a>
|
|
751
751
|
[**4.1**](#arrays--literals) ‣ Use the literal syntax for array creation, except in the case of initializing a sparse array with a specific size.
|
|
752
752
|
|
|
753
|
-
|
|
753
|
+
[`no-array-constructor`](https://eslint.org/docs/rules/no-array-constructor.html)
|
|
754
754
|
|
|
755
755
|
```typescript
|
|
756
756
|
// bad
|
|
@@ -845,7 +845,7 @@ const baz = Array.from(foo, bar);
|
|
|
845
845
|
<a name="arrays--callback-return"></a>
|
|
846
846
|
[**4.7**](#arrays--callback-return) ‣ Use return statements in array method callbacks. It’s ok to omit the return if the function body consists of a single statement returning an expression without side effects, following [**9.2**](#arrows--implicit-return).
|
|
847
847
|
|
|
848
|
-
|
|
848
|
+
[`array-callback-return`](https://eslint.org/docs/rules/array-callback-return)
|
|
849
849
|
|
|
850
850
|
```typescript
|
|
851
851
|
// good
|
|
@@ -892,7 +892,7 @@ inbox.filter((msg) => {
|
|
|
892
892
|
<a name="arrays--bracket-newline"></a>
|
|
893
893
|
[**4.8**](#arrays--bracket-newline) ‣ Use line breaks after open and before close array brackets if an array has multiple lines.
|
|
894
894
|
|
|
895
|
-
|
|
895
|
+
**Enforced by Prettier**
|
|
896
896
|
|
|
897
897
|
```typescript
|
|
898
898
|
// bad
|
|
@@ -934,7 +934,7 @@ const stringInArray = [
|
|
|
934
934
|
<a name="arrays--sort-compare"></a>
|
|
935
935
|
[**4.9**](#arrays--sort-compare) ‣ Always provide a comparison function to `Array#sort`.
|
|
936
936
|
|
|
937
|
-
|
|
937
|
+
[`@typescript-eslint/require-array-sort-compare`](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/require-array-sort-compare.md)
|
|
938
938
|
|
|
939
939
|
> Why? `Array#sort` is one of those old-school Javascript things that does not behave the way you would expect. If you don't pass in your own comparison function, it converts all the contents to strings and sorts alphabetically.
|
|
940
940
|
|
|
@@ -955,7 +955,7 @@ const ahThatsBetter = [30, 10, 3, 2, 20, 1].sort((a, b) => a - b);
|
|
|
955
955
|
<a name="destructuring--object"></a>
|
|
956
956
|
[**5.1**](#destructuring--object) ‣ Use object destructuring when accessing and using multiple properties of an object.
|
|
957
957
|
|
|
958
|
-
|
|
958
|
+
[`prefer-destructuring`](https://eslint.org/docs/rules/prefer-destructuring)
|
|
959
959
|
|
|
960
960
|
> Why? Destructuring saves you from creating temporary references for those properties, and from repetitive access of the object. Repeating object access creates more repetitive code, requires more reading, and creates more opportunities for mistakes. Destructuring objects also provides a single site of definition of the object structure that is used in the block, rather than requiring reading the entire block to determine what is used.
|
|
961
961
|
|
|
@@ -985,7 +985,7 @@ function getFullName({ firstName, lastName }) {
|
|
|
985
985
|
<a name="destructuring--array"></a>
|
|
986
986
|
[**5.2**](#destructuring--array) ‣ Use array destructuring.
|
|
987
987
|
|
|
988
|
-
|
|
988
|
+
[`prefer-destructuring`](https://eslint.org/docs/rules/prefer-destructuring)
|
|
989
989
|
|
|
990
990
|
```typescript
|
|
991
991
|
const arr = [1, 2, 3, 4];
|
|
@@ -1032,9 +1032,9 @@ const { left, top } = processInput(input);
|
|
|
1032
1032
|
<a name="strings--quotes"></a>
|
|
1033
1033
|
[**6.1**](#strings--quotes) ‣ Use double quotes `""` for strings.
|
|
1034
1034
|
|
|
1035
|
-
|
|
1035
|
+
**Enforced by Prettier**
|
|
1036
1036
|
|
|
1037
|
-
|
|
1037
|
+
[`quotes`](https://eslint.org/docs/rules/quotes.html)
|
|
1038
1038
|
|
|
1039
1039
|
> Why? In a JSX world, double quotes result in your code needing fewer escapes than single quotes.
|
|
1040
1040
|
|
|
@@ -1077,7 +1077,7 @@ const errorMessage = "This is a super long error that was thrown because of Batm
|
|
|
1077
1077
|
<a name="es6-template-literals"></a>
|
|
1078
1078
|
[**6.3**](#es6-template-literals) ‣ When programmatically building up strings, use template strings instead of concatenation.
|
|
1079
1079
|
|
|
1080
|
-
|
|
1080
|
+
[`prefer-template`](https://eslint.org/docs/rules/prefer-template.html), [`template-curly-spacing`](https://eslint.org/docs/rules/template-curly-spacing)
|
|
1081
1081
|
|
|
1082
1082
|
> Why? Template strings give you a readable, concise syntax with proper newlines and string interpolation features.
|
|
1083
1083
|
|
|
@@ -1108,16 +1108,16 @@ function sayHi(name) {
|
|
|
1108
1108
|
<a name="strings--eval"></a>
|
|
1109
1109
|
[**6.4**](#strings--eval) ‣ Never use `eval()` on a string, it opens too many vulnerabilities.
|
|
1110
1110
|
|
|
1111
|
-
|
|
1111
|
+
[`no-eval`](https://eslint.org/docs/rules/no-eval)
|
|
1112
1112
|
|
|
1113
1113
|
---
|
|
1114
1114
|
|
|
1115
1115
|
<a name="strings--escaping"></a>
|
|
1116
1116
|
[**6.5**](#strings--escaping) ‣ Do not unnecessarily escape characters in strings.
|
|
1117
1117
|
|
|
1118
|
-
|
|
1118
|
+
**Enforced by Prettier**
|
|
1119
1119
|
|
|
1120
|
-
|
|
1120
|
+
[`no-useless-escape`](https://eslint.org/docs/rules/no-useless-escape)
|
|
1121
1121
|
|
|
1122
1122
|
> Why? Backslashes harm readability, thus they should only be present when necessary.
|
|
1123
1123
|
|
|
@@ -1137,7 +1137,7 @@ const foo = `my name is '${name}'`;
|
|
|
1137
1137
|
<a name="promises--handle-errors"></a>
|
|
1138
1138
|
[**7.1**](#promises--handle-errors) ‣ When awaiting a promise, the potential for it to be rejected must be handled.
|
|
1139
1139
|
|
|
1140
|
-
|
|
1140
|
+
[`@typescript-eslint/no-floating-promises`](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/no-floating-promises.md)
|
|
1141
1141
|
|
|
1142
1142
|
> Why? We've all seen "Unhandled Promise rejection" before and not once has that error ever been useful in debugging the issue. Do yourself a favor and catch Promise errors so you can at least log out a useful error object.
|
|
1143
1143
|
|
|
@@ -1187,7 +1187,7 @@ void someBackendCall();
|
|
|
1187
1187
|
<a name="functions--in-blocks"></a>
|
|
1188
1188
|
[**8.1**](#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.
|
|
1189
1189
|
|
|
1190
|
-
|
|
1190
|
+
[`no-loop-func`](https://eslint.org/docs/rules/no-loop-func.html)
|
|
1191
1191
|
|
|
1192
1192
|
---
|
|
1193
1193
|
|
|
@@ -1216,7 +1216,7 @@ if (currentUser) {
|
|
|
1216
1216
|
<a name="es6-rest"></a>
|
|
1217
1217
|
[**8.3**](#es6-rest) ‣ Never use `arguments`, opt to use rest syntax `...` instead.
|
|
1218
1218
|
|
|
1219
|
-
|
|
1219
|
+
[`prefer-rest-params`](https://eslint.org/docs/rules/prefer-rest-params)
|
|
1220
1220
|
|
|
1221
1221
|
> Why? `...` is explicit about which arguments you want pulled. Plus, rest arguments are a real Array, and not merely Array-like like `arguments`.
|
|
1222
1222
|
|
|
@@ -1288,7 +1288,7 @@ count(); // 3
|
|
|
1288
1288
|
<a name="functions--defaults-last"></a>
|
|
1289
1289
|
[**8.6**](#functions--defaults-last) ‣ Always put default parameters last.
|
|
1290
1290
|
|
|
1291
|
-
|
|
1291
|
+
[`default-param-last`](https://eslint.org/docs/rules/default-param-last)
|
|
1292
1292
|
|
|
1293
1293
|
```typescript
|
|
1294
1294
|
// bad
|
|
@@ -1307,7 +1307,7 @@ function handleThings(name: string, opts: IHandleThingsOpts = {}) {
|
|
|
1307
1307
|
<a name="functions--constructor"></a>
|
|
1308
1308
|
[**8.7**](#functions--constructor) ‣ Never use the Function constructor to create a new function.
|
|
1309
1309
|
|
|
1310
|
-
|
|
1310
|
+
[`no-new-func`](https://eslint.org/docs/rules/no-new-func)
|
|
1311
1311
|
|
|
1312
1312
|
> Why? Creating a function in this way evaluates a string similarly to `eval()`, which opens vulnerabilities.
|
|
1313
1313
|
|
|
@@ -1324,9 +1324,9 @@ const subtract = Function("a", "b", "return a - b");
|
|
|
1324
1324
|
<a name="functions--signature-spacing"></a>
|
|
1325
1325
|
[**8.8**](#functions--signature-spacing) ‣ Spacing in a function signature.
|
|
1326
1326
|
|
|
1327
|
-
|
|
1327
|
+
**Enforced by Prettier**
|
|
1328
1328
|
|
|
1329
|
-
|
|
1329
|
+
[`space-before-function-paren`](https://eslint.org/docs/rules/space-before-function-paren), [`space-before-blocks`](https://eslint.org/docs/rules/space-before-blocks)
|
|
1330
1330
|
|
|
1331
1331
|
> Why? Consistency is good, and you shouldn’t have to add or remove a space when adding or removing a name.
|
|
1332
1332
|
|
|
@@ -1346,7 +1346,7 @@ const y = function a() {};
|
|
|
1346
1346
|
<a name="functions--mutate-params"></a>
|
|
1347
1347
|
[**8.10**](#functions--mutate-params) ‣ Never mutate parameters.
|
|
1348
1348
|
|
|
1349
|
-
|
|
1349
|
+
[`no-param-reassign`](https://eslint.org/docs/rules/no-param-reassign.html)
|
|
1350
1350
|
|
|
1351
1351
|
> Why? Manipulating objects passed in as parameters can cause unwanted variable side effects in the original caller.
|
|
1352
1352
|
|
|
@@ -1372,7 +1372,7 @@ function f2(obj: ObjType) {
|
|
|
1372
1372
|
<a name="functions--reassign-params"></a>
|
|
1373
1373
|
[**8.11**](#functions--reassign-params) ‣ Never reassign parameters.
|
|
1374
1374
|
|
|
1375
|
-
|
|
1375
|
+
[`no-param-reassign`](https://eslint.org/docs/rules/no-param-reassign.html)
|
|
1376
1376
|
|
|
1377
1377
|
> Why? Reassigning parameters can lead to unexpected behavior, especially when accessing the `arguments` object. It can also cause optimization issues, especially in V8.
|
|
1378
1378
|
|
|
@@ -1404,7 +1404,7 @@ function f4(a: number = 1) {
|
|
|
1404
1404
|
<a name="functions--spread-vs-apply"></a>
|
|
1405
1405
|
[**8.12**](#functions--spread-vs-apply) ‣ Prefer the use of the spread syntax `...` to call variadic functions.
|
|
1406
1406
|
|
|
1407
|
-
|
|
1407
|
+
[`prefer-spread`](https://eslint.org/docs/rules/prefer-spread)
|
|
1408
1408
|
|
|
1409
1409
|
> Why? It’s cleaner, you don’t need to supply a context, and you can not easily compose `new` with `apply`.
|
|
1410
1410
|
|
|
@@ -1429,7 +1429,7 @@ new Date(...[2016, 8, 5]);
|
|
|
1429
1429
|
<a name="functions--signature-invocation-indentation"></a>
|
|
1430
1430
|
[**8.13**](#functions--signature-invocation-indentation) ‣ Functions with multiline signatures, or invocations, should be indented just like every other multiline list in this guide: with each item on a line by itself, with a trailing comma on the last item.
|
|
1431
1431
|
|
|
1432
|
-
|
|
1432
|
+
**Enforced by Prettier**
|
|
1433
1433
|
|
|
1434
1434
|
```typescript
|
|
1435
1435
|
// bad
|
|
@@ -1466,7 +1466,7 @@ console.log(
|
|
|
1466
1466
|
<a name="functions--return-type"></a>
|
|
1467
1467
|
[**8.14**](#functions--return-type) ‣ Functions and methods should include an explicit return type.
|
|
1468
1468
|
|
|
1469
|
-
|
|
1469
|
+
[`@typescript-eslint/explicit-function-return-type`](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/explicit-function-return-type.md)
|
|
1470
1470
|
|
|
1471
1471
|
> Why? If you explicitly specify what the function is intended to return, then a bug where it returns something unintended will be caught immediately in your IDE. If you allow TypeScript to infer the return type, it will assume anything the function ends up returning is fine. (We acknowledge the examples throughout this document often don't follow this. Time permitting we will possibly correct that.)
|
|
1472
1472
|
|
|
@@ -1498,7 +1498,7 @@ function foo(isTwo: boolean): number {
|
|
|
1498
1498
|
<a name="arrows--use-them"></a>
|
|
1499
1499
|
[**9.1**](#arrows--use-them) ‣ When you must use an anonymous function (as when passing an inline callback), use arrow function notation.
|
|
1500
1500
|
|
|
1501
|
-
|
|
1501
|
+
[`prefer-arrow-callback`](https://eslint.org/docs/rules/prefer-arrow-callback.html), [`arrow-spacing`](https://eslint.org/docs/rules/arrow-spacing.html)
|
|
1502
1502
|
|
|
1503
1503
|
> 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.
|
|
1504
1504
|
|
|
@@ -1523,7 +1523,7 @@ function foo(isTwo: boolean): number {
|
|
|
1523
1523
|
<a name="arrows--implicit-return"></a>
|
|
1524
1524
|
[**9.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.
|
|
1525
1525
|
|
|
1526
|
-
|
|
1526
|
+
[`arrow-parens`](https://eslint.org/docs/rules/arrow-parens.html), [`arrow-body-style`](https://eslint.org/docs/rules/arrow-body-style.html)
|
|
1527
1527
|
|
|
1528
1528
|
> Why? Syntactic sugar. It reads well when multiple functions are chained together.
|
|
1529
1529
|
|
|
@@ -1596,9 +1596,9 @@ foo(() => {
|
|
|
1596
1596
|
<a name="arrows--one-arg-parens"></a>
|
|
1597
1597
|
[**9.4**](#arrows--one-arg-parens) ‣ Always include parentheses around arguments for clarity and consistency.
|
|
1598
1598
|
|
|
1599
|
-
|
|
1599
|
+
**Enforced by Prettier**
|
|
1600
1600
|
|
|
1601
|
-
|
|
1601
|
+
[`arrow-parens`](https://eslint.org/docs/rules/arrow-parens.html)
|
|
1602
1602
|
|
|
1603
1603
|
> Why? Minimizes diff churn when adding or removing arguments.
|
|
1604
1604
|
|
|
@@ -1637,7 +1637,7 @@ foo(() => {
|
|
|
1637
1637
|
<a name="arrows--confusing"></a>
|
|
1638
1638
|
[**9.5**](#arrows--confusing) ‣ Avoid confusing arrow function syntax (`=>`) with comparison operators (`<=`, `>=`).
|
|
1639
1639
|
|
|
1640
|
-
|
|
1640
|
+
[`no-confusing-arrow`](https://eslint.org/docs/rules/no-confusing-arrow)
|
|
1641
1641
|
|
|
1642
1642
|
```typescript
|
|
1643
1643
|
// bad
|
|
@@ -1661,7 +1661,7 @@ const itemHeight = (item: ItemType) => {
|
|
|
1661
1661
|
<a name="arrows--implicit-arrow-linebreak"></a>
|
|
1662
1662
|
[**9.6**](#arrows--implicit-arrow-linebreak) ‣ Enforce the location of arrow function bodies with implicit returns.
|
|
1663
1663
|
|
|
1664
|
-
|
|
1664
|
+
**Enforced by Prettier**
|
|
1665
1665
|
|
|
1666
1666
|
```typescript
|
|
1667
1667
|
// bad
|
|
@@ -1811,7 +1811,7 @@ class Jedi {
|
|
|
1811
1811
|
<a name="constructors--no-useless"></a>
|
|
1812
1812
|
[**10.5**](#constructors--no-useless) ‣ Classes have a default constructor if one is not specified. An empty constructor function or one that just delegates to a parent class is unnecessary.
|
|
1813
1813
|
|
|
1814
|
-
|
|
1814
|
+
[`no-useless-constructor`](https://eslint.org/docs/rules/no-useless-constructor)
|
|
1815
1815
|
|
|
1816
1816
|
```typescript
|
|
1817
1817
|
// bad
|
|
@@ -1846,7 +1846,7 @@ class Rey extends Jedi {
|
|
|
1846
1846
|
<a name="classes--no-duplicate-members"></a>
|
|
1847
1847
|
[**10.6**](#classes--no-duplicate-members) ‣ Avoid duplicate class members.
|
|
1848
1848
|
|
|
1849
|
-
|
|
1849
|
+
[`no-dupe-class-members`](https://eslint.org/docs/rules/no-dupe-class-members)
|
|
1850
1850
|
|
|
1851
1851
|
> Why? Duplicate class member declarations will silently prefer the last one - having duplicates is almost certainly a bug.
|
|
1852
1852
|
|
|
@@ -1873,7 +1873,7 @@ class Foo {
|
|
|
1873
1873
|
<a name="classes--methods-use-this"></a>
|
|
1874
1874
|
[**10.7**](#classes--methods-use-this) ‣ Class methods should use `this` or be made into a static method unless an external library or framework requires using specific non-static methods. Being an instance method should indicate that it behaves differently based on properties of the receiver.
|
|
1875
1875
|
|
|
1876
|
-
|
|
1876
|
+
[`class-methods-use-this`](https://eslint.org/docs/rules/class-methods-use-this)
|
|
1877
1877
|
|
|
1878
1878
|
```typescript
|
|
1879
1879
|
// bad
|
|
@@ -1933,7 +1933,7 @@ export default es6;
|
|
|
1933
1933
|
<a name="modules--no-duplicate-imports"></a>
|
|
1934
1934
|
[**11.2**](#modules--no-duplicate-imports) ‣ Only import from a path in one place.
|
|
1935
1935
|
|
|
1936
|
-
|
|
1936
|
+
[`no-duplicate-imports`](https://eslint.org/docs/rules/no-duplicate-imports)
|
|
1937
1937
|
|
|
1938
1938
|
> Why? Having multiple lines that import from the same path can make code harder to maintain.
|
|
1939
1939
|
|
|
@@ -1958,7 +1958,7 @@ import foo, {
|
|
|
1958
1958
|
<a name="modules--no-mutable-exports"></a>
|
|
1959
1959
|
[**11.3**](#modules--no-mutable-exports) ‣ Do not export mutable bindings.
|
|
1960
1960
|
|
|
1961
|
-
|
|
1961
|
+
[`import/no-mutable-exports`](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-mutable-exports.md)
|
|
1962
1962
|
|
|
1963
1963
|
> 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.
|
|
1964
1964
|
|
|
@@ -1977,7 +1977,7 @@ export { foo };
|
|
|
1977
1977
|
<a name="modules--imports-first"></a>
|
|
1978
1978
|
[**11.4**](#modules--imports-first) ‣ Put all `import`s above non-import statements.
|
|
1979
1979
|
|
|
1980
|
-
|
|
1980
|
+
[`import/first`](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/first.md)
|
|
1981
1981
|
|
|
1982
1982
|
> Why? Since `import`s are hoisted, keeping them all at the top prevents surprising behavior.
|
|
1983
1983
|
|
|
@@ -2000,7 +2000,7 @@ foo.init();
|
|
|
2000
2000
|
<a name="modules--multiline-imports-over-newlines"></a>
|
|
2001
2001
|
[**11.5**](#modules--multiline-imports-over-newlines) ‣ Multiline imports should be indented just like multiline array and object literals.
|
|
2002
2002
|
|
|
2003
|
-
|
|
2003
|
+
**Enforced by Prettier**
|
|
2004
2004
|
|
|
2005
2005
|
> Why? The curly braces follow the same indentation rules as every other curly brace block in the style guide, as do the trailing commas.
|
|
2006
2006
|
|
|
@@ -2026,7 +2026,7 @@ Note: formerly we used [`object-curly-newline`](https://eslint.org/docs/rules/ob
|
|
|
2026
2026
|
<a name="modules--no-webpack-loader-syntax"></a>
|
|
2027
2027
|
[**11.6**](#modules--no-webpack-loader-syntax) ‣ Disallow Webpack loader syntax in module import statements.
|
|
2028
2028
|
|
|
2029
|
-
|
|
2029
|
+
[`import/no-webpack-loader-syntax`](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-webpack-loader-syntax.md)
|
|
2030
2030
|
|
|
2031
2031
|
> Why? Since using Webpack syntax in the imports couples the code to a module bundler. Prefer using the loader syntax in `webpack.config.js`.
|
|
2032
2032
|
|
|
@@ -2045,7 +2045,7 @@ import barCss from "bar.css";
|
|
|
2045
2045
|
<a name="modules--import-extensions"></a>
|
|
2046
2046
|
[**11.7**](#modules--import-extensions) ‣ Do not include JavaScript filename extensions
|
|
2047
2047
|
|
|
2048
|
-
|
|
2048
|
+
[`import/extensions`](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/extensions.md)
|
|
2049
2049
|
|
|
2050
2050
|
> Why? Including extensions inhibits refactoring, and inappropriately hardcodes implementation details of the module you're importing in every consumer.
|
|
2051
2051
|
|
|
@@ -2116,7 +2116,7 @@ const increasedByOne = numbers.map((num) => num + 1);
|
|
|
2116
2116
|
<a name="iterators--no-for-in"></a>
|
|
2117
2117
|
[**12.2**](#iterators--no-for-in) ‣ Do not use `for-in`.
|
|
2118
2118
|
|
|
2119
|
-
|
|
2119
|
+
[`no-restricted-syntax`](https://eslint.org/docs/rules/no-restricted-syntax)
|
|
2120
2120
|
|
|
2121
2121
|
> Why? `for-in` has confusing and unexpected behavior. For this reason, `for-of` was added to the language and should be used instead.
|
|
2122
2122
|
|
|
@@ -2151,9 +2151,9 @@ for (const [key, value] of Object.entries(obj)) {
|
|
|
2151
2151
|
<a name="generators--spacing"></a>
|
|
2152
2152
|
[**12.3**](#generators--spacing) ‣ A generator's function signature should be spaced with `function*` as a single unit surrounded by spaces.
|
|
2153
2153
|
|
|
2154
|
-
|
|
2154
|
+
**Enforced by Prettier**
|
|
2155
2155
|
|
|
2156
|
-
|
|
2156
|
+
[`generator-star-spacing`](https://eslint.org/docs/rules/generator-star-spacing)
|
|
2157
2157
|
|
|
2158
2158
|
> Why? `function` and `*` are part of the same conceptual keyword - `*` is not a modifier for `function`, `function*` is a unique construct, different from `function`.
|
|
2159
2159
|
|
|
@@ -2220,7 +2220,7 @@ const foo = function* () {
|
|
|
2220
2220
|
<a name="properties--dot"></a>
|
|
2221
2221
|
[**13.1**](#properties--dot) ‣ Use dot notation when accessing properties.
|
|
2222
2222
|
|
|
2223
|
-
|
|
2223
|
+
[`dot-notation`](https://eslint.org/docs/rules/dot-notation.html)
|
|
2224
2224
|
|
|
2225
2225
|
```typescript
|
|
2226
2226
|
const luke = {
|
|
@@ -2243,7 +2243,7 @@ const isJedi = luke.jedi;
|
|
|
2243
2243
|
<a name="variables--const"></a>
|
|
2244
2244
|
[**14.1**](#variables--const) ‣ Always use `const` or `let` to declare variables. Not doing so will result in global variables. We want to avoid polluting the global namespace. Captain Planet warned us of that.
|
|
2245
2245
|
|
|
2246
|
-
|
|
2246
|
+
[`no-undef`](https://eslint.org/docs/rules/no-undef), [`prefer-const`](https://eslint.org/docs/rules/prefer-const)
|
|
2247
2247
|
|
|
2248
2248
|
```typescript
|
|
2249
2249
|
// bad
|
|
@@ -2258,7 +2258,7 @@ const superPower = new SuperPower();
|
|
|
2258
2258
|
<a name="variables--one-const"></a>
|
|
2259
2259
|
[**14.2**](#variables--one-const) ‣ Use one `const` or `let` declaration per variable or assignment.
|
|
2260
2260
|
|
|
2261
|
-
|
|
2261
|
+
[`one-var`](https://eslint.org/docs/rules/one-var.html)
|
|
2262
2262
|
|
|
2263
2263
|
> 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.
|
|
2264
2264
|
|
|
@@ -2352,7 +2352,7 @@ function checkName(hasName) {
|
|
|
2352
2352
|
<a name="variables--no-chain-assignment"></a>
|
|
2353
2353
|
[**14.5**](#variables--no-chain-assignment) ‣ Don’t chain variable assignments.
|
|
2354
2354
|
|
|
2355
|
-
|
|
2355
|
+
[`no-multi-assign`](https://eslint.org/docs/rules/no-multi-assign)
|
|
2356
2356
|
|
|
2357
2357
|
> Why? Chaining variable assignments creates implicit global variables.
|
|
2358
2358
|
|
|
@@ -2389,7 +2389,7 @@ console.log(c); // throws ReferenceError
|
|
|
2389
2389
|
<a name="variables--unary-increment-decrement"></a>
|
|
2390
2390
|
[**14.6**](#variables--unary-increment-decrement) ‣ Avoid using unary increments and decrements (`++`, `--`).
|
|
2391
2391
|
|
|
2392
|
-
|
|
2392
|
+
[`no-plusplus`](https://eslint.org/docs/rules/no-plusplus)
|
|
2393
2393
|
|
|
2394
2394
|
> Why? Per the eslint documentation, unary increment and decrement statements are subject to automatic semicolon insertion and can cause silent errors with incrementing or decrementing values within an application. It is also more expressive to mutate your values with statements like `num += 1` instead of `num++` or `num ++`. Disallowing unary increment and decrement statements also prevents you from pre-incrementing/pre-decrementing values unintentionally which can also cause unexpected behavior in your programs.
|
|
2395
2395
|
|
|
@@ -2427,7 +2427,7 @@ const truthyCount = array.filter(Boolean).length;
|
|
|
2427
2427
|
<a name="variables--linebreak"></a>
|
|
2428
2428
|
[**14.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.
|
|
2429
2429
|
|
|
2430
|
-
|
|
2430
|
+
**Enforced by Prettier**
|
|
2431
2431
|
|
|
2432
2432
|
> Why? Linebreaks surrounding `=` can obfuscate the value of an assignment.
|
|
2433
2433
|
|
|
@@ -2454,7 +2454,7 @@ const foo = "superLongLongLongLongLongLongLongLongString";
|
|
|
2454
2454
|
<a name="variables--no-unused-vars"></a>
|
|
2455
2455
|
[**14.8**](#variables--no-unused-vars) ‣ Disallow unused variables.
|
|
2456
2456
|
|
|
2457
|
-
|
|
2457
|
+
[`no-unused-vars`](https://eslint.org/docs/rules/no-unused-vars)
|
|
2458
2458
|
|
|
2459
2459
|
> Why? Variables that are declared and not used anywhere in the code are most likely an error due to incomplete refactoring. Such variables take up space in the code and can lead to confusion by readers.
|
|
2460
2460
|
|
|
@@ -2499,7 +2499,7 @@ const { type, ...coords } = data;
|
|
|
2499
2499
|
<a name="comparison--eqeqeq"></a>
|
|
2500
2500
|
[**15.1**](#comparison--eqeqeq) ‣ Use `===` and `!==` over `==` and `!=`.
|
|
2501
2501
|
|
|
2502
|
-
|
|
2502
|
+
[`eqeqeq`](https://eslint.org/docs/rules/eqeqeq.html)
|
|
2503
2503
|
|
|
2504
2504
|
---
|
|
2505
2505
|
|
|
@@ -2625,7 +2625,7 @@ switch (foo) {
|
|
|
2625
2625
|
<a name="comparison--nested-ternaries"></a>
|
|
2626
2626
|
[**15.6**](#comparison--nested-ternaries) ‣ Ternaries should not be nested and generally be single line expressions.
|
|
2627
2627
|
|
|
2628
|
-
|
|
2628
|
+
[`no-nested-ternary`](https://eslint.org/docs/rules/no-nested-ternary.html)
|
|
2629
2629
|
|
|
2630
2630
|
```typescript
|
|
2631
2631
|
// bad
|
|
@@ -2650,7 +2650,7 @@ const foo = maybe1 > maybe2 ? "bar" : maybeNull;
|
|
|
2650
2650
|
<a name="comparison--unneeded-ternary"></a>
|
|
2651
2651
|
[**15.7**](#comparison--unneeded-ternary) ‣ Avoid unneeded ternary statements.
|
|
2652
2652
|
|
|
2653
|
-
|
|
2653
|
+
[`no-unneeded-ternary`](https://eslint.org/docs/rules/no-unneeded-ternary.html)
|
|
2654
2654
|
|
|
2655
2655
|
```typescript
|
|
2656
2656
|
// bad
|
|
@@ -2667,7 +2667,7 @@ const baz = !c;
|
|
|
2667
2667
|
<a name="comparison--no-mixed-operators"></a>
|
|
2668
2668
|
[**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.
|
|
2669
2669
|
|
|
2670
|
-
|
|
2670
|
+
[`no-mixed-operators`](https://eslint.org/docs/rules/no-mixed-operators.html)
|
|
2671
2671
|
|
|
2672
2672
|
> Why? This improves readability and clarifies the developer’s intention.
|
|
2673
2673
|
|
|
@@ -2707,7 +2707,7 @@ const bar = a + (b / c) * d;
|
|
|
2707
2707
|
<a name="comparison--nullish-coalescing"></a>
|
|
2708
2708
|
[**15.9**](#comparison--nullish-coalescing) ‣ Use the nullish coalescing operator over `||`. If you do need to coalesce over a falsy value that is not `null` or `undefined`, use a ternary that defines the desired condition explicitly.
|
|
2709
2709
|
|
|
2710
|
-
|
|
2710
|
+
[`@typescript-eslint/prefer-nullish-coalescing`](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/prefer-nullish-coalescing.md)
|
|
2711
2711
|
|
|
2712
2712
|
```typescript
|
|
2713
2713
|
// bad
|
|
@@ -2727,9 +2727,9 @@ const foo = typeof foo === "string" && foo !== "" ? foo : "baz";
|
|
|
2727
2727
|
<a name="blocks--cuddled-elses"></a>
|
|
2728
2728
|
[**16.1**](#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.
|
|
2729
2729
|
|
|
2730
|
-
|
|
2730
|
+
**Enforced by Prettier**
|
|
2731
2731
|
|
|
2732
|
-
|
|
2732
|
+
[`brace-style`](https://eslint.org/docs/rules/brace-style.html)
|
|
2733
2733
|
|
|
2734
2734
|
```typescript
|
|
2735
2735
|
// bad
|
|
@@ -2757,7 +2757,7 @@ if (test) {
|
|
|
2757
2757
|
<a name="control-statements"></a>
|
|
2758
2758
|
[**17.1**](#control-statements) ‣ In case your control statement (`if`, `while` etc.) gets too long or exceeds the maximum line length, each (grouped) condition could be put into a new line.
|
|
2759
2759
|
|
|
2760
|
-
|
|
2760
|
+
**Enforced by Prettier**
|
|
2761
2761
|
|
|
2762
2762
|
> Why? This improves readability by making it easier to visually follow complex logic.
|
|
2763
2763
|
|
|
@@ -2897,7 +2897,7 @@ function getType() {
|
|
|
2897
2897
|
<a name="comments--spaces"></a>
|
|
2898
2898
|
[**18.3**](#comments--spaces) ‣ Start all comments with a space to make it easier to read.
|
|
2899
2899
|
|
|
2900
|
-
|
|
2900
|
+
[`spaced-comment`](https://eslint.org/docs/rules/spaced-comment)
|
|
2901
2901
|
|
|
2902
2902
|
```typescript
|
|
2903
2903
|
// bad
|
|
@@ -2967,9 +2967,9 @@ class Calculator extends Abacus {
|
|
|
2967
2967
|
<a name="whitespace--spaces"></a>
|
|
2968
2968
|
[**19.1**](#whitespace--spaces) ‣ Use soft tabs (space character) set to 2 spaces.
|
|
2969
2969
|
|
|
2970
|
-
|
|
2970
|
+
**Enforced by Prettier**
|
|
2971
2971
|
|
|
2972
|
-
|
|
2972
|
+
[`indent`](https://eslint.org/docs/rules/indent.html)
|
|
2973
2973
|
|
|
2974
2974
|
```typescript
|
|
2975
2975
|
// bad
|
|
@@ -2993,9 +2993,9 @@ function baz() {
|
|
|
2993
2993
|
<a name="whitespace--before-blocks"></a>
|
|
2994
2994
|
[**19.2**](#whitespace--before-blocks) ‣ Place 1 space before the leading brace.
|
|
2995
2995
|
|
|
2996
|
-
|
|
2996
|
+
**Enforced by Prettier**
|
|
2997
2997
|
|
|
2998
|
-
|
|
2998
|
+
[`space-before-blocks`](https://eslint.org/docs/rules/space-before-blocks.html)
|
|
2999
2999
|
|
|
3000
3000
|
```typescript
|
|
3001
3001
|
// bad
|
|
@@ -3026,9 +3026,9 @@ dog.set("attr", {
|
|
|
3026
3026
|
<a name="whitespace--around-keywords"></a>
|
|
3027
3027
|
[**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.
|
|
3028
3028
|
|
|
3029
|
-
|
|
3029
|
+
**Enforced by Prettier**
|
|
3030
3030
|
|
|
3031
|
-
|
|
3031
|
+
[`keyword-spacing`](https://eslint.org/docs/rules/keyword-spacing.html)
|
|
3032
3032
|
|
|
3033
3033
|
```typescript
|
|
3034
3034
|
// bad
|
|
@@ -3057,9 +3057,9 @@ function fight() {
|
|
|
3057
3057
|
<a name="whitespace--infix-ops"></a>
|
|
3058
3058
|
[**19.4**](#whitespace--infix-ops) ‣ Set off operators with spaces.
|
|
3059
3059
|
|
|
3060
|
-
|
|
3060
|
+
**Enforced by Prettier**
|
|
3061
3061
|
|
|
3062
|
-
|
|
3062
|
+
[`space-infix-ops`](https://eslint.org/docs/rules/space-infix-ops.html)
|
|
3063
3063
|
|
|
3064
3064
|
```typescript
|
|
3065
3065
|
// bad
|
|
@@ -3074,9 +3074,9 @@ const x = y + 5;
|
|
|
3074
3074
|
<a name="whitespace--newline-at-end"></a>
|
|
3075
3075
|
[**19.5**](#whitespace--newline-at-end) ‣ End files with a single newline character.
|
|
3076
3076
|
|
|
3077
|
-
|
|
3077
|
+
**Enforced by Prettier**
|
|
3078
3078
|
|
|
3079
|
-
|
|
3079
|
+
[`eol-last`](https://github.com/eslint/eslint/blob/master/docs/rules/eol-last.md)
|
|
3080
3080
|
|
|
3081
3081
|
```typescript
|
|
3082
3082
|
// bad
|
|
@@ -3105,9 +3105,9 @@ export default es6;↵
|
|
|
3105
3105
|
<a name="whitespace--chains"></a>
|
|
3106
3106
|
[**19.6**](#whitespace--chains) ‣ Use indentation when making long method chains (more than 2 method chains). Use a leading dot, which emphasizes that the line is a method call, not a new statement.
|
|
3107
3107
|
|
|
3108
|
-
|
|
3108
|
+
**Enforced by Prettier**
|
|
3109
3109
|
|
|
3110
|
-
|
|
3110
|
+
[`newline-per-chained-call`](https://eslint.org/docs/rules/newline-per-chained-call), [`no-whitespace-before-property`](https://eslint.org/docs/rules/no-whitespace-before-property)
|
|
3111
3111
|
|
|
3112
3112
|
```typescript
|
|
3113
3113
|
// bad
|
|
@@ -3194,9 +3194,9 @@ return arr;
|
|
|
3194
3194
|
<a name="whitespace--padded-blocks"></a>
|
|
3195
3195
|
[**19.8**](#whitespace--padded-blocks) ‣ Do not pad your blocks with blank lines.
|
|
3196
3196
|
|
|
3197
|
-
|
|
3197
|
+
**Enforced by Prettier**
|
|
3198
3198
|
|
|
3199
|
-
|
|
3199
|
+
[`padded-blocks`](https://eslint.org/docs/rules/padded-blocks.html)
|
|
3200
3200
|
|
|
3201
3201
|
```typescript
|
|
3202
3202
|
// bad
|
|
@@ -3242,9 +3242,9 @@ if (baz) {
|
|
|
3242
3242
|
<a name="whitespace--no-multiple-blanks"></a>
|
|
3243
3243
|
[**19.9**](#whitespace--no-multiple-blanks) ‣ Do not use multiple blank lines to pad your code.
|
|
3244
3244
|
|
|
3245
|
-
|
|
3245
|
+
**Enforced by Prettier**
|
|
3246
3246
|
|
|
3247
|
-
|
|
3247
|
+
[`no-multiple-empty-lines`](https://eslint.org/docs/rules/no-multiple-empty-lines)
|
|
3248
3248
|
|
|
3249
3249
|
```typescript
|
|
3250
3250
|
// bad
|
|
@@ -3311,9 +3311,9 @@ class Person {
|
|
|
3311
3311
|
<a name="whitespace--in-parens"></a>
|
|
3312
3312
|
[**19.10**](#whitespace--in-parens) ‣ Do not add spaces inside parentheses.
|
|
3313
3313
|
|
|
3314
|
-
|
|
3314
|
+
**Enforced by Prettier**
|
|
3315
3315
|
|
|
3316
|
-
|
|
3316
|
+
[`space-in-parens`](https://eslint.org/docs/rules/space-in-parens.html)
|
|
3317
3317
|
|
|
3318
3318
|
```typescript
|
|
3319
3319
|
// bad
|
|
@@ -3342,9 +3342,9 @@ if (foo) {
|
|
|
3342
3342
|
<a name="whitespace--in-brackets"></a>
|
|
3343
3343
|
[**19.11**](#whitespace--in-brackets) ‣ Do not add spaces inside brackets.
|
|
3344
3344
|
|
|
3345
|
-
|
|
3345
|
+
**Enforced by Prettier**
|
|
3346
3346
|
|
|
3347
|
-
|
|
3347
|
+
[`array-bracket-spacing`](https://eslint.org/docs/rules/array-bracket-spacing.html)
|
|
3348
3348
|
|
|
3349
3349
|
```typescript
|
|
3350
3350
|
// bad
|
|
@@ -3361,9 +3361,9 @@ console.log(foo[0]);
|
|
|
3361
3361
|
<a name="whitespace--in-braces"></a>
|
|
3362
3362
|
[**19.12**](#whitespace--in-braces) ‣ Add spaces inside curly braces.
|
|
3363
3363
|
|
|
3364
|
-
|
|
3364
|
+
**Enforced by Prettier**
|
|
3365
3365
|
|
|
3366
|
-
|
|
3366
|
+
[`object-curly-spacing`](https://eslint.org/docs/rules/object-curly-spacing.html)
|
|
3367
3367
|
|
|
3368
3368
|
```typescript
|
|
3369
3369
|
// bad
|
|
@@ -3380,7 +3380,7 @@ const foo = { clark: "kent" };
|
|
|
3380
3380
|
|
|
3381
3381
|
Prettier does not enforce this specifically, but will wrap lines at _roughly_ 80 characters, meaning that after it has done its formatting your code will - except in extremely rare circumstances - fit within the 100 character limit. Please refer to [Prettier's documentation on the print width option](https://prettier.io/docs/en/options.html#print-width) for more information.
|
|
3382
3382
|
|
|
3383
|
-
|
|
3383
|
+
[`max-len`](https://eslint.org/docs/rules/max-len.html)
|
|
3384
3384
|
|
|
3385
3385
|
> Why? This ensures readability and maintainability.
|
|
3386
3386
|
|
|
@@ -3402,9 +3402,9 @@ const foo = jsonData
|
|
|
3402
3402
|
<a name="whitespace--comma-spacing"></a>
|
|
3403
3403
|
[**19.14**](#whitespace--comma-spacing) ‣ Avoid spaces before commas and require a space after commas.
|
|
3404
3404
|
|
|
3405
|
-
|
|
3405
|
+
**Enforced by Prettier**
|
|
3406
3406
|
|
|
3407
|
-
|
|
3407
|
+
[`comma-spacing`](https://eslint.org/docs/rules/comma-spacing)
|
|
3408
3408
|
|
|
3409
3409
|
```typescript
|
|
3410
3410
|
// bad
|
|
@@ -3419,9 +3419,9 @@ const arr = [1, 2];
|
|
|
3419
3419
|
<a name="whitespace--computed-property-spacing"></a>
|
|
3420
3420
|
[**19.15**](#whitespace--computed-property-spacing) ‣ Enforce spacing inside of computed property brackets.
|
|
3421
3421
|
|
|
3422
|
-
|
|
3422
|
+
**Enforced by Prettier**
|
|
3423
3423
|
|
|
3424
|
-
|
|
3424
|
+
[`computed-property-spacing`](https://eslint.org/docs/rules/computed-property-spacing)
|
|
3425
3425
|
|
|
3426
3426
|
```typescript
|
|
3427
3427
|
// bad
|
|
@@ -3442,9 +3442,9 @@ obj[foo[bar]]
|
|
|
3442
3442
|
<a name="whitespace--func-call-spacing"></a>
|
|
3443
3443
|
[**19.16**](#whitespace--func-call-spacing) ‣ Avoid spaces between functions and their invocations.
|
|
3444
3444
|
|
|
3445
|
-
|
|
3445
|
+
**Enforced by Prettier**
|
|
3446
3446
|
|
|
3447
|
-
|
|
3447
|
+
[`func-call-spacing`](https://eslint.org/docs/rules/func-call-spacing)
|
|
3448
3448
|
|
|
3449
3449
|
```typescript
|
|
3450
3450
|
// bad
|
|
@@ -3462,9 +3462,9 @@ func();
|
|
|
3462
3462
|
<a name="whitespace--key-spacing"></a>
|
|
3463
3463
|
[**19.17**](#whitespace--key-spacing) ‣ Enforce spacing between keys and values in object literal properties.
|
|
3464
3464
|
|
|
3465
|
-
|
|
3465
|
+
**Enforced by Prettier**
|
|
3466
3466
|
|
|
3467
|
-
|
|
3467
|
+
[`key-spacing`](https://eslint.org/docs/rules/key-spacing)
|
|
3468
3468
|
|
|
3469
3469
|
```typescript
|
|
3470
3470
|
// bad
|
|
@@ -3480,9 +3480,9 @@ const obj = { foo: 42 };
|
|
|
3480
3480
|
<a name="whitespace--no-trailing-spaces"></a>
|
|
3481
3481
|
[**19.18**](#whitespace--no-trailing-spaces) ‣ Avoid trailing spaces at the end of lines.
|
|
3482
3482
|
|
|
3483
|
-
|
|
3483
|
+
**Enforced by Prettier**
|
|
3484
3484
|
|
|
3485
|
-
|
|
3485
|
+
[`no-trailing-spaces`](https://eslint.org/docs/rules/no-trailing-spaces)
|
|
3486
3486
|
|
|
3487
3487
|
```typescript
|
|
3488
3488
|
// bad
|
|
@@ -3500,9 +3500,9 @@ const foo = "bar";
|
|
|
3500
3500
|
<a name="commas--leading-trailing"></a>
|
|
3501
3501
|
[**20.1**](#commas--leading-trailing) ‣ Leading commas: **Nope.**
|
|
3502
3502
|
|
|
3503
|
-
|
|
3503
|
+
**Enforced by Prettier**
|
|
3504
3504
|
|
|
3505
|
-
|
|
3505
|
+
[`comma-style`](https://eslint.org/docs/rules/comma-style.html)
|
|
3506
3506
|
|
|
3507
3507
|
```typescript
|
|
3508
3508
|
// bad
|
|
@@ -3541,9 +3541,9 @@ const hero = {
|
|
|
3541
3541
|
<a name="commas--dangling"></a>
|
|
3542
3542
|
[**20.2**](#commas--dangling) ‣ Additional trailing comma: **Yup.**
|
|
3543
3543
|
|
|
3544
|
-
|
|
3544
|
+
**Enforced by Prettier**
|
|
3545
3545
|
|
|
3546
|
-
|
|
3546
|
+
[`comma-dangle`](https://eslint.org/docs/rules/comma-dangle.html)
|
|
3547
3547
|
|
|
3548
3548
|
> Why? This leads to cleaner git diffs.
|
|
3549
3549
|
|
|
@@ -3645,9 +3645,9 @@ createHero(
|
|
|
3645
3645
|
<a name="semicolons--required"></a>
|
|
3646
3646
|
[**21.1**](#semicolons--required) ‣ **Yup.**
|
|
3647
3647
|
|
|
3648
|
-
|
|
3648
|
+
**Enforced by Prettier**
|
|
3649
3649
|
|
|
3650
|
-
|
|
3650
|
+
[`semi`](https://eslint.org/docs/rules/semi.html)
|
|
3651
3651
|
|
|
3652
3652
|
> 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.
|
|
3653
3653
|
|
|
@@ -3704,7 +3704,7 @@ function foo() {
|
|
|
3704
3704
|
<a name="coercion--strings"></a>
|
|
3705
3705
|
[**22.2**](#coercion--strings) ‣ Strings:
|
|
3706
3706
|
|
|
3707
|
-
|
|
3707
|
+
[`no-new-wrappers`](https://eslint.org/docs/rules/no-new-wrappers)
|
|
3708
3708
|
|
|
3709
3709
|
```typescript
|
|
3710
3710
|
// => this.reviewScore = 9;
|
|
@@ -3727,7 +3727,7 @@ const totalScore = String(this.reviewScore);
|
|
|
3727
3727
|
<a name="coercion--numbers"></a>
|
|
3728
3728
|
[**22.3**](#coercion--numbers) ‣ Numbers: Use `Number` for type casting and `parseInt` always with a radix for parsing strings.
|
|
3729
3729
|
|
|
3730
|
-
|
|
3730
|
+
[`radix`](https://eslint.org/docs/rules/radix), [`no-new-wrappers`](https://eslint.org/docs/rules/no-new-wrappers)
|
|
3731
3731
|
|
|
3732
3732
|
> Why? The `parseInt` function produces an integer value dictated by interpretation of the contents of the string argument according to the specified radix. Leading whitespace in string is ignored. If radix is `undefined` or `0`, it is assumed to be `10` except when the number begins with the character pairs `0x` or `0X`, in which case a radix of 16 is assumed. This differs from ECMAScript 3, which merely discouraged (but allowed) octal interpretation. Many implementations have not adopted this behavior as of 2013. And, because older browsers must be supported, always specify a radix.
|
|
3733
3733
|
|
|
@@ -3784,7 +3784,7 @@ const val = inputValue >> 0;
|
|
|
3784
3784
|
<a name="coercion--booleans"></a>
|
|
3785
3785
|
[**22.6**](#coercion--booleans) ‣ Booleans:
|
|
3786
3786
|
|
|
3787
|
-
|
|
3787
|
+
[`no-new-wrappers`](https://eslint.org/docs/rules/no-new-wrappers)
|
|
3788
3788
|
|
|
3789
3789
|
```typescript
|
|
3790
3790
|
const age = 0;
|
|
@@ -3806,7 +3806,7 @@ const hasAge = !!age;
|
|
|
3806
3806
|
<a name="naming--descriptive"></a>
|
|
3807
3807
|
[**23.1**](#naming--descriptive) ‣ Avoid single letter names. Be descriptive with your naming.
|
|
3808
3808
|
|
|
3809
|
-
|
|
3809
|
+
[`id-length`](https://eslint.org/docs/rules/id-length)
|
|
3810
3810
|
|
|
3811
3811
|
```typescript
|
|
3812
3812
|
// bad
|
|
@@ -3825,7 +3825,7 @@ function query() {
|
|
|
3825
3825
|
<a name="naming--camelCase"></a>
|
|
3826
3826
|
[**23.2**](#naming--camelCase) ‣ Use camelCase when naming objects, functions, and instances.
|
|
3827
3827
|
|
|
3828
|
-
|
|
3828
|
+
[`camelcase`](https://eslint.org/docs/rules/camelcase.html)
|
|
3829
3829
|
|
|
3830
3830
|
```typescript
|
|
3831
3831
|
// bad
|
|
@@ -3843,7 +3843,7 @@ function thisIsMyFunction() {}
|
|
|
3843
3843
|
<a name="naming--PascalCase"></a>
|
|
3844
3844
|
[**23.3**](#naming--PascalCase) ‣ Use PascalCase only when naming constructors or classes.
|
|
3845
3845
|
|
|
3846
|
-
|
|
3846
|
+
[`new-cap`](https://eslint.org/docs/rules/new-cap.html)
|
|
3847
3847
|
|
|
3848
3848
|
```typescript
|
|
3849
3849
|
// bad
|
|
@@ -3872,7 +3872,7 @@ const good = new User({
|
|
|
3872
3872
|
<a name="naming--leading-underscore"></a>
|
|
3873
3873
|
[**23.4**](#naming--leading-underscore) ‣ Do not use trailing or leading underscores.
|
|
3874
3874
|
|
|
3875
|
-
|
|
3875
|
+
[`no-underscore-dangle`](https://eslint.org/docs/rules/no-underscore-dangle.html)
|
|
3876
3876
|
|
|
3877
3877
|
> Why? Although a leading underscore has long been 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. With the addition of private class fields in ES2022, there is a genuine way to do this, so the informal convention is obsolete.
|
|
3878
3878
|
|
|
@@ -4181,7 +4181,7 @@ contains utilities that are functionally broken but remain for legacy reasons.
|
|
|
4181
4181
|
[**26.1**](#standard-library--isnan) ‣ Use `Number.isNaN` instead of global `isNaN`.
|
|
4182
4182
|
|
|
4183
4183
|
|
|
4184
|
-
|
|
4184
|
+
[`no-restricted-globals`](https://eslint.org/docs/rules/no-restricted-globals)
|
|
4185
4185
|
|
|
4186
4186
|
> Why? The global `isNaN` coerces non-numbers to numbers, returning true for anything that coerces to NaN.
|
|
4187
4187
|
> If this behavior is desired, make it explicit.
|
|
@@ -4201,7 +4201,7 @@ Number.isNaN(Number("1.2.3")); // true
|
|
|
4201
4201
|
<a name="standard-library--isfinite"></a>
|
|
4202
4202
|
[**26.2**](#standard-library--isfinite) ‣ Use `Number.isFinite` instead of global `isFinite`.
|
|
4203
4203
|
|
|
4204
|
-
|
|
4204
|
+
[`no-restricted-globals`](https://eslint.org/docs/rules/no-restricted-globals)
|
|
4205
4205
|
|
|
4206
4206
|
> Why? The global `isFinite` coerces non-numbers to numbers, returning true for anything that coerces to a finite number.
|
|
4207
4207
|
> If this behavior is desired, make it explicit.
|