-
Notifications
You must be signed in to change notification settings - Fork 26.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Upgrade to eslint v2 #730
Upgrade to eslint v2 #730
Changes from all commits
1bb72ab
d49a1ed
1efb11c
da4213c
dff5099
4f32315
3aa8c58
75807b9
5109c84
1cbc628
91b8365
c05b2da
172dffb
a126d0b
fbd9c35
6a03a32
ba10353
3762c9a
92df635
e6cbcf4
c5b4f05
e1a087f
1f12a12
6560937
e0959d0
ff0adbe
133fc51
0794853
822c0df
b79e951
3983d38
0f32b96
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -346,6 +346,54 @@ Other Style Guides | |
const nodes = Array.from(foo); | ||
``` | ||
|
||
- [4.5](#4.5) <a name='4.5'></a> Use return statements in array method callbacks. It's ok to omit the return if the function body consists of a single statement following [8.2](#8.2). eslint: [`array-callback-return`](http://eslint.org/docs/rules/array-callback-return) | ||
|
||
```javascript | ||
// good | ||
[1, 2, 3].map((x) => { | ||
const y = x + 1; | ||
return x * y; | ||
}); | ||
|
||
// good | ||
[1, 2, 3].map(x => x + 1); | ||
|
||
// bad | ||
const flat = {}; | ||
[[0, 1], [2, 3], [4, 5]].reduce((memo, item, index) => { | ||
const flatten = memo.concat(item); | ||
flat[index] = memo.concat(item); | ||
}); | ||
|
||
// good | ||
const flat = {}; | ||
[[0, 1], [2, 3], [4, 5]].reduce((memo, item, index) => { | ||
const flatten = memo.concat(item); | ||
flat[index] = flatten; | ||
return flatten; | ||
}); | ||
|
||
// bad | ||
inbox.filter((msg) => { | ||
const { subject, author } = msg; | ||
if (subject === 'Mockingbird') { | ||
return author === 'Harper Lee'; | ||
} else { | ||
return false; | ||
} | ||
}); | ||
|
||
// good | ||
inbox.filter((msg) => { | ||
const { subject, author } = msg; | ||
if (subject === 'Mockingbird') { | ||
return author === 'Harper Lee'; | ||
} | ||
|
||
return false; | ||
}); | ||
``` | ||
|
||
**[⬆ back to top](#table-of-contents)** | ||
|
||
## Destructuring | ||
|
@@ -447,7 +495,7 @@ Other Style Guides | |
``` | ||
|
||
<a name="es6-template-literals"></a> | ||
- [6.4](#6.4) <a name='6.4'></a> When programmatically building up strings, use template strings instead of concatenation. eslint: [`prefer-template`](http://eslint.org/docs/rules/prefer-template.html) jscs: [`requireTemplateStrings`](http://jscs.info/rule/requireTemplateStrings) | ||
- [6.4](#6.4) <a name='6.4'></a> When programmatically building up strings, use template strings instead of concatenation. eslint: [`prefer-template`](http://eslint.org/docs/rules/prefer-template.html) [`template-curly-spacing`](http://eslint.org/docs/rules/template-curly-spacing) jscs: [`requireTemplateStrings`](http://jscs.info/rule/requireTemplateStrings) | ||
|
||
> Why? Template strings give you a readable, concise syntax with proper newlines and string interpolation features. | ||
|
||
|
@@ -462,6 +510,11 @@ Other Style Guides | |
return ['How are you, ', name, '?'].join(); | ||
} | ||
|
||
// bad | ||
function sayHi(name) { | ||
return `How are you, ${ name }?`; | ||
} | ||
|
||
// good | ||
function sayHi(name) { | ||
return `How are you, ${name}?`; | ||
|
@@ -535,7 +588,7 @@ Other Style Guides | |
``` | ||
|
||
<a name="es6-rest"></a> | ||
- [7.6](#7.6) <a name='7.6'></a> Never use `arguments`, opt to use rest syntax `...` instead. | ||
- [7.6](#7.6) <a name='7.6'></a> Never use `arguments`, opt to use rest syntax `...` instead. [`prefer-rest-params`](http://eslint.org/docs/rules/prefer-rest-params) | ||
|
||
> Why? `...` is explicit about which arguments you want pulled. Plus rest arguments are a real Array and not Array-like like `arguments`. | ||
|
||
|
@@ -771,6 +824,19 @@ Other Style Guides | |
}); | ||
``` | ||
|
||
- [8.5](#8.5) <a name='8.5'></a> Avoid confusing arrow function syntax (`=>`) with comparison operators (`<=`, `>=`). eslint: [`no-confusing-arrow`](http://eslint.org/docs/rules/no-confusing-arrow) | ||
|
||
```js | ||
// bad | ||
const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize; | ||
|
||
// bad | ||
const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize; | ||
|
||
// good | ||
const itemHeight = item => { return item.height > 256 ? item.largeSize : item.smallSize; } | ||
``` | ||
|
||
**[⬆ back to top](#table-of-contents)** | ||
|
||
|
||
|
@@ -883,6 +949,34 @@ Other Style Guides | |
} | ||
``` | ||
|
||
- [9.5](#9.5) <a name='9.5'></a> 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. [`no-useless-constructor`](http://eslint.org/docs/rules/no-useless-constructor) | ||
|
||
```javascript | ||
// bad | ||
class Jedi { | ||
constructor() {} | ||
|
||
getName() { | ||
return this.name; | ||
} | ||
} | ||
|
||
// bad | ||
class Rey extends Jedi { | ||
constructor(...args) { | ||
super(args); | ||
} | ||
} | ||
|
||
// good | ||
class Rey extends Jedi { | ||
constructor(...args) { | ||
super(args); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Should the args object be spread into the super constructor? I.e. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It depends on what your parent takes :) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Right, but in this case that would make this class pretty weird. I mean it's a made up example, so it doesn't really matter. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Fixed in 8a6f009 |
||
this.name = 'Rey'; | ||
} | ||
} | ||
``` | ||
|
||
**[⬆ back to top](#table-of-contents)** | ||
|
||
|
||
|
@@ -1592,8 +1686,8 @@ Other Style Guides | |
})(this);↵ | ||
``` | ||
|
||
- [18.6](#18.6) <a name='18.6'></a> Use indentation when making long method chains. Use a leading dot, which | ||
emphasizes that the line is a method call, not a new statement. | ||
- [18.6](#18.6) <a name='18.6'></a> 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. eslint: [`newline-per-chained-call`](http://eslint.org/docs/rules/newline-per-chained-call) [`no-whitespace-before-property`](http://eslint.org/docs/rules/no-whitespace-before-property) | ||
|
||
```javascript | ||
// bad | ||
|
@@ -1630,6 +1724,9 @@ Other Style Guides | |
.append('svg:g') | ||
.attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')') | ||
.call(tron.led); | ||
|
||
// good | ||
const leds = stage.selectAll('.led').data(data); | ||
``` | ||
|
||
- [18.7](#18.7) <a name='18.7'></a> Leave a blank line after blocks and before the next statement. jscs: [`requirePaddingNewLinesAfterBlocks`](http://jscs.info/rule/requirePaddingNewLinesAfterBlocks) | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -10,7 +10,7 @@ module.exports = { | |
'rules': { | ||
// Prevent missing displayName in a React component definition | ||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.md | ||
'react/display-name': [0, { 'acceptTranspilerName': false }], | ||
'react/display-name': [0, { 'ignoreTranspilerName': false }], | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Sadly this setting doesn't appear to differentiate between ES6 classes/stateless functional components - where we do want to use the constructor's/function's name rather than having an explicit Given that, and that other rules forbid There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Makes sense 👍 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This is the name of the option, so LGTM. This does happen to invert what it used to be, but since the rule is disabled, it doesn't make much difference if it is |
||
// Forbid certain propTypes (any, array, object) | ||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/forbid-prop-types.md | ||
'react/forbid-prop-types': [0, { 'forbid': ['any', 'array', 'object'] }], | ||
|
@@ -54,8 +54,8 @@ module.exports = { | |
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md | ||
'react/jsx-pascal-case': 0, | ||
// Enforce propTypes declarations alphabetical sorting | ||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-sort-prop-types.md | ||
'react/jsx-sort-prop-types': [0, { | ||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-prop-types.md | ||
'react/sort-prop-types': [0, { | ||
'ignoreCase': false, | ||
'callbacksLast': false, | ||
}], | ||
|
@@ -116,10 +116,14 @@ module.exports = { | |
// Prevent extra closing tags for components without children | ||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md | ||
'react/self-closing-comp': 2, | ||
// 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 | ||
'react/jsx-space-before-closing': [2, 'always'], | ||
// Enforce component methods order | ||
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md | ||
'react/sort-comp': [2, { | ||
'order': [ | ||
'static-methods', | ||
'lifecycle', | ||
'/^on.+$/', | ||
'/^(get|set)(?!(InitialState$|DefaultProps$|ChildContext$)).+$/', | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
While I agree with this example, it doesn't seem to pertain to the text of the rule here.
Also, this example could be simplified to:
or even:
so I'm not sure it is the best to use here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Second one is better in my opinion