From 5fd7c6f08c0650ed67297fc83c8a0590c9a92cc8 Mon Sep 17 00:00:00 2001 From: Estelle Date: Mon, 23 Mar 2015 18:48:19 -0700 Subject: [PATCH 0001/1042] added naming convention of UPPERCASE names --- README.md | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/README.md b/README.md index 2c6c5c6c7d..1116dcb4ba 100644 --- a/README.md +++ b/README.md @@ -3139,6 +3139,33 @@ Other Style Guides ]; ``` + + - [23.10](#naming--uppercase) Use UPPERCASE for nested object namespacing, global variables, and constants. + + + ```javascript + // bad + const namespace = namespace || {}; + + namespace.util.Widget = { + // ...stuff... + } + + // bad + const apiKey = '44b345234534t455245njkl523452-vbb9'; + + // good + const NAMESPACE = NAMESPACE || {}; + + NAMESPACE.util.Widget = { + // ...stuff... + } + + // good + const API_KEY = '44b345234534t455245njkl523452-vbb9'; + ``` + + **[⬆ back to top](#table-of-contents)** ## Accessors From 9415b88afd0d21800e6b595828f0526689084f0a Mon Sep 17 00:00:00 2001 From: Saad Quadri Date: Wed, 30 Mar 2016 02:50:21 -0400 Subject: [PATCH 0002/1042] Add missing description for 7.2 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 664b24921a..064e9f6276 100644 --- a/README.md +++ b/README.md @@ -582,7 +582,7 @@ Other Style Guides ``` - - [7.2](#functions--iife) Immediately invoked function expressions: eslint: [`wrap-iife`](http://eslint.org/docs/rules/wrap-iife.html) jscs: [`requireParenthesesAroundIIFE`](http://jscs.info/rule/requireParenthesesAroundIIFE) + - [7.2](#functions--iife) Wrap immediately invoked function expressions in parentheses. eslint: [`wrap-iife`](http://eslint.org/docs/rules/wrap-iife.html) jscs: [`requireParenthesesAroundIIFE`](http://jscs.info/rule/requireParenthesesAroundIIFE) > 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. From 5ec8765a28923671a59465901c03a7f997eb861a Mon Sep 17 00:00:00 2001 From: Yarun Luon Date: Thu, 31 Mar 2016 18:17:26 -0700 Subject: [PATCH 0003/1042] Add Chartboost to 'In the Wild' --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 064e9f6276..ff42af3d2c 100644 --- a/README.md +++ b/README.md @@ -2679,6 +2679,7 @@ Other Style Guides - **Bisk**: [bisk/javascript](https://github.com/Bisk/javascript/) - **Blendle**: [blendle/javascript](https://github.com/blendle/javascript) - **Brainshark**: [brainshark/javascript](https://github.com/brainshark/javascript) + - **Chartboost**: [ChartBoost/javascript-style-guide](https://github.com/ChartBoost/javascript-style-guide) - **ComparaOnline**: [comparaonline/javascript](https://github.com/comparaonline/javascript-style-guide) - **Compass Learning**: [compasslearning/javascript-style-guide](https://github.com/compasslearning/javascript-style-guide) - **DailyMotion**: [dailymotion/javascript](https://github.com/dailymotion/javascript) From 062929ee5f5ca368b2b36390fc36aed34ed96797 Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Fri, 1 Apr 2016 14:25:31 -0700 Subject: [PATCH 0004/1042] [eslint config] [breaking] error on debugger statements --- packages/eslint-config-airbnb/rules/errors.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/eslint-config-airbnb/rules/errors.js b/packages/eslint-config-airbnb/rules/errors.js index 1c1addf5fa..62594e0c3e 100644 --- a/packages/eslint-config-airbnb/rules/errors.js +++ b/packages/eslint-config-airbnb/rules/errors.js @@ -9,7 +9,7 @@ module.exports = { // disallow control characters in regular expressions 'no-control-regex': 2, // disallow use of debugger - 'no-debugger': 1, + 'no-debugger': 2, // disallow duplicate arguments in functions 'no-dupe-args': 2, // disallow duplicate keys when creating object literals From 5b9f081d1dac5240f60313784de316c9a63fde62 Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Sat, 2 Apr 2016 17:46:24 -0700 Subject: [PATCH 0005/1042] [eslint config] [deps] update `eslint`, `react` --- packages/eslint-config-airbnb/package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/eslint-config-airbnb/package.json b/packages/eslint-config-airbnb/package.json index 0d059f0c8d..aefe9a76a6 100644 --- a/packages/eslint-config-airbnb/package.json +++ b/packages/eslint-config-airbnb/package.json @@ -43,14 +43,14 @@ "homepage": "https://github.com/airbnb/javascript", "devDependencies": { "babel-tape-runner": "^1.3.1", - "eslint": "^2.5.3", + "eslint": "^2.6.0", "eslint-plugin-react": "^4.2.3", - "react": "^0.14.7", + "react": "^0.14.8", "tape": "^4.5.1", "parallelshell": "^2.0.0" }, "peerDependencies": { - "eslint": "^2.4.0", + "eslint": "^2.6.0", "eslint-plugin-react": "^4.2.3" } } From 76e1e4c1de263948f9c35bf43c4de526b17bebb9 Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Sat, 2 Apr 2016 18:08:27 -0700 Subject: [PATCH 0006/1042] [eslint config] [breaking] Add `no-dupe-class-members` rule + section. Closes #785. --- README.md | 30 +++++++++++++++++++--- packages/eslint-config-airbnb/rules/es6.js | 3 +++ 2 files changed, 30 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index ff42af3d2c..03c422d931 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ Other Style Guides 1. [Strings](#strings) 1. [Functions](#functions) 1. [Arrow Functions](#arrow-functions) - 1. [Constructors](#constructors) + 1. [Classes & Constructors](#constructors) 1. [Modules](#modules) 1. [Iterators and Generators](#iterators-and-generators) 1. [Properties](#properties) @@ -894,7 +894,7 @@ Other Style Guides **[⬆ back to top](#table-of-contents)** -## Constructors +## Classes & Constructors - [9.1](#constructors--use-class) Always use `class`. Avoid manipulating `prototype` directly. @@ -1008,7 +1008,7 @@ Other Style Guides ``` - - [9.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. [`no-useless-constructor`](http://eslint.org/docs/rules/no-useless-constructor) + - [9.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. eslint: [`no-useless-constructor`](http://eslint.org/docs/rules/no-useless-constructor) ```javascript // bad @@ -1036,6 +1036,30 @@ Other Style Guides } ``` + + - [9.6](#classes--no-duplicate-members) Avoid duplicate class members. eslint: [`no-dupe-class-members`](http://eslint.org/docs/rules/no-dupe-class-members) + + > Why? Duplicate class member declarations will silently prefer the last one - having duplicates is almost certainly a bug. + + ```javascript + // bad + class Foo { + bar() { return 1; } + bar() { return 2; } + } + + // good + class Foo { + bar() { return 1; } + } + + // good + class Foo { + bar() { return 2; } + } + ``` + + **[⬆ back to top](#table-of-contents)** diff --git a/packages/eslint-config-airbnb/rules/es6.js b/packages/eslint-config-airbnb/rules/es6.js index 78a43b94cd..a826da8d0e 100644 --- a/packages/eslint-config-airbnb/rules/es6.js +++ b/packages/eslint-config-airbnb/rules/es6.js @@ -35,6 +35,9 @@ module.exports = { }], // disallow modifying variables that are declared using const 'no-const-assign': 2, + // disallow duplicate class members + // http://eslint.org/docs/rules/no-dupe-class-members + 'no-dupe-class-members': 2, // disallow importing from the same path more than once // http://eslint.org/docs/rules/no-duplicate-imports 'no-duplicate-imports': 2, From 6671a55556e09b9f70924e9fd63e76c9e079fa5e Mon Sep 17 00:00:00 2001 From: Nick Date: Sun, 3 Apr 2016 09:59:12 -0400 Subject: [PATCH 0007/1042] CHORE - Remove Trailing Spaces --- linters/SublimeLinter/SublimeLinter.sublime-settings | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/linters/SublimeLinter/SublimeLinter.sublime-settings b/linters/SublimeLinter/SublimeLinter.sublime-settings index 12360f3f1c..259dbaff6a 100644 --- a/linters/SublimeLinter/SublimeLinter.sublime-settings +++ b/linters/SublimeLinter/SublimeLinter.sublime-settings @@ -63,7 +63,7 @@ // Warn when variables are defined but never used. "unused": true, - + // Enforce line length to 80 characters "maxlen": 80, From f21412cba916e4af18cd1594a6b6d18ef4ebc341 Mon Sep 17 00:00:00 2001 From: Amin Date: Mon, 4 Apr 2016 11:39:47 +0400 Subject: [PATCH 0008/1042] Broken link to Classes and constructors --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 03c422d931..3034aa4c24 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ Other Style Guides 1. [Strings](#strings) 1. [Functions](#functions) 1. [Arrow Functions](#arrow-functions) - 1. [Classes & Constructors](#constructors) + 1. [Classes & Constructors](#classes--constructors) 1. [Modules](#modules) 1. [Iterators and Generators](#iterators-and-generators) 1. [Properties](#properties) From a2bdbb83d15e8d35fa40a14b888ad1eee029c7df Mon Sep 17 00:00:00 2001 From: Peter Kuiper Date: Mon, 4 Apr 2016 14:20:17 +0200 Subject: [PATCH 0009/1042] Add KickorStick to 'In the Wild' --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 3034aa4c24..5384d7dc9f 100644 --- a/README.md +++ b/README.md @@ -2727,6 +2727,7 @@ Other Style Guides - **Jam3**: [Jam3/Javascript-Code-Conventions](https://github.com/Jam3/Javascript-Code-Conventions) - **JeopardyBot**: [kesne/jeopardy-bot](https://github.com/kesne/jeopardy-bot/blob/master/STYLEGUIDE.md) - **JSSolutions**: [JSSolutions/javascript](https://github.com/JSSolutions/javascript) + - **KickorStick**: [kickorstick/javascript](https://github.com/kickorstick/javascript) - **Kinetica Solutions**: [kinetica/javascript](https://github.com/kinetica/Javascript-style-guide) - **Mighty Spring**: [mightyspring/javascript](https://github.com/mightyspring/javascript) - **MinnPost**: [MinnPost/javascript](https://github.com/MinnPost/javascript) From 6e770062bb84aa054ff939c1b805cbb12e9195a1 Mon Sep 17 00:00:00 2001 From: Kevin Moot Date: Mon, 4 Apr 2016 19:07:35 -0500 Subject: [PATCH 0010/1042] Adding The Nerdery to the "In the Wild" section --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 5384d7dc9f..ec1dca2cc5 100644 --- a/README.md +++ b/README.md @@ -2753,6 +2753,7 @@ Other Style Guides - **SysGarage**: [sysgarage/javascript-style-guide](https://github.com/sysgarage/javascript-style-guide) - **Target**: [target/javascript](https://github.com/target/javascript) - **TheLadders**: [TheLadders/javascript](https://github.com/TheLadders/javascript) + - **The Nerdery**: [thenerdery/javascript-standards](https://github.com/thenerdery/javascript-standards) - **T4R Technology**: [T4R-Technology/javascript](https://github.com/T4R-Technology/javascript) - **VoxFeed**: [VoxFeed/javascript-style-guide](https://github.com/VoxFeed/javascript-style-guide) - **WeBox Studio**: [weboxstudio/javascript](https://github.com/weboxstudio/javascript) From acbddc1083d5ea7608fba212bb6898ca6e224afc Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Wed, 6 Apr 2016 14:14:03 -0700 Subject: [PATCH 0011/1042] Add note and rule about image alt text We want our React apps to be accessible. One thing that developers can do is properly use alt text on images. Thankfully, there is an ESLint rule that will enforce these things for us. --- packages/eslint-config-airbnb/package.json | 2 ++ packages/eslint-config-airbnb/rules/react.js | 5 +++++ .../test/test-react-order.js | 4 ++-- react/README.md | 16 ++++++++++++++++ 4 files changed, 25 insertions(+), 2 deletions(-) diff --git a/packages/eslint-config-airbnb/package.json b/packages/eslint-config-airbnb/package.json index aefe9a76a6..769c8950a3 100644 --- a/packages/eslint-config-airbnb/package.json +++ b/packages/eslint-config-airbnb/package.json @@ -44,6 +44,7 @@ "devDependencies": { "babel-tape-runner": "^1.3.1", "eslint": "^2.6.0", + "eslint-plugin-jsx-a11y": "^0.6.0", "eslint-plugin-react": "^4.2.3", "react": "^0.14.8", "tape": "^4.5.1", @@ -51,6 +52,7 @@ }, "peerDependencies": { "eslint": "^2.6.0", + "eslint-plugin-jsx-a11y": "^0.6.0", "eslint-plugin-react": "^4.2.3" } } diff --git a/packages/eslint-config-airbnb/rules/react.js b/packages/eslint-config-airbnb/rules/react.js index 470738b769..0b128aef63 100644 --- a/packages/eslint-config-airbnb/rules/react.js +++ b/packages/eslint-config-airbnb/rules/react.js @@ -1,5 +1,6 @@ module.exports = { 'plugins': [ + 'jsx-a11y', 'react' ], 'ecmaFeatures': { @@ -8,6 +9,10 @@ module.exports = { // View link below for react rules documentation // https://github.com/yannickcr/eslint-plugin-react#list-of-supported-rules 'rules': { + // Require to have a non-empty `alt` prop, or role="presentation" + // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-uses-alt.md + 'jsx-a11y/img-uses-alt': 2, + // 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, { 'ignoreTranspilerName': false }], diff --git a/packages/eslint-config-airbnb/test/test-react-order.js b/packages/eslint-config-airbnb/test/test-react-order.js index f5b2d452fe..81d8235fce 100644 --- a/packages/eslint-config-airbnb/test/test-react-order.js +++ b/packages/eslint-config-airbnb/test/test-react-order.js @@ -28,9 +28,9 @@ ${body} } test('validate react prop order', t => { - t.test('make sure our eslintrc has React linting dependencies', t => { + t.test('make sure our eslintrc has React and JSX linting dependencies', t => { t.plan(1); - t.equal(reactRules.plugins[0], 'react', 'uses eslint-plugin-react'); + t.deepEqual(reactRules.plugins, ['jsx-a11y', 'react']); }); t.test('passes a good component', t => { diff --git a/react/README.md b/react/README.md index 6eddabcad2..29af5cf806 100644 --- a/react/README.md +++ b/react/README.md @@ -217,6 +217,22 @@ /> ``` + - Always include a non-empty `alt` prop on `` tags. If `alt` is an empty string, the `` must have `role="presentation"`. eslint: [`jsx-a11y/img-uses-alt`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-uses-alt.md) + + ```javascript + // bad + + + // bad + + + // good + Me waving hello + + // good + + ``` + ## Parentheses - Wrap JSX tags in parentheses when they span more than one line. eslint: [`react/wrap-multilines`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/wrap-multilines.md) From f2aca29ed95dbec65590660e5e0032a00808cf4a Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Wed, 6 Apr 2016 14:21:48 -0700 Subject: [PATCH 0012/1042] Add note and rule about redundant alt text Screenreaders already announce `img` elements as images, so there is no need to include this information in the alt text. This will give people using assistive technologies a smoother experience. --- packages/eslint-config-airbnb/rules/react.js | 4 ++++ react/README.md | 12 ++++++++++++ 2 files changed, 16 insertions(+) diff --git a/packages/eslint-config-airbnb/rules/react.js b/packages/eslint-config-airbnb/rules/react.js index 0b128aef63..f505c75ba1 100644 --- a/packages/eslint-config-airbnb/rules/react.js +++ b/packages/eslint-config-airbnb/rules/react.js @@ -13,6 +13,10 @@ module.exports = { // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-uses-alt.md 'jsx-a11y/img-uses-alt': 2, + // 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/redundant-alt.md + 'jsx-a11y/redundant-alt': 2, + // 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, { 'ignoreTranspilerName': false }], diff --git a/react/README.md b/react/README.md index 29af5cf806..bc149b0908 100644 --- a/react/README.md +++ b/react/README.md @@ -233,6 +233,18 @@ ``` + - Do not use words like "image", "photo", or "picture" in `` `alt` props. eslint: [`jsx-a11y/redundant-alt`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-uses-alt.md) + + > Why? Screenreaders already announce `img` elements as images, so there is no need to include this information in the alt text. + + ```javascript + // bad + Picture of me waving hello + + // good + Me waving hello + ``` + ## Parentheses - Wrap JSX tags in parentheses when they span more than one line. eslint: [`react/wrap-multilines`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/wrap-multilines.md) From 0c3b13fe93e880450305e6c87a1a59f14e042bc5 Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Wed, 6 Apr 2016 14:27:21 -0700 Subject: [PATCH 0013/1042] Add note and rule about valid, non-abstract ARIA roles This rule will help people use only valid roles, which might save people from simple, accessibility-busting mistakes. --- packages/eslint-config-airbnb/rules/react.js | 4 ++++ react/README.md | 13 +++++++++++++ 2 files changed, 17 insertions(+) diff --git a/packages/eslint-config-airbnb/rules/react.js b/packages/eslint-config-airbnb/rules/react.js index f505c75ba1..02794495b1 100644 --- a/packages/eslint-config-airbnb/rules/react.js +++ b/packages/eslint-config-airbnb/rules/react.js @@ -17,6 +17,10 @@ module.exports = { // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/redundant-alt.md 'jsx-a11y/redundant-alt': 2, + // Require ARIA roles to be valid and non-abstract + // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/valid-aria-role.md + 'jsx-a11y/valid-aria-role': 2, + // 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, { 'ignoreTranspilerName': false }], diff --git a/react/README.md b/react/README.md index bc149b0908..0ac01a5b6f 100644 --- a/react/README.md +++ b/react/README.md @@ -245,6 +245,19 @@ Me waving hello ``` + - Use only valid, non-abstract [ARIA roles](https://www.w3.org/TR/wai-aria/roles#role_definitions). eslint: [`jsx-a11y/valid-aria-role`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/valid-aria-role.md) + + ```javascript + // bad - not an ARIA role +
+ + // bad - abstract ARIA role +
+ + // good +
+ ``` + ## Parentheses - Wrap JSX tags in parentheses when they span more than one line. eslint: [`react/wrap-multilines`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/wrap-multilines.md) From f697a15e5036932805cb7a5160b6c0ceb2401afe Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Wed, 6 Apr 2016 14:32:55 -0700 Subject: [PATCH 0014/1042] Add note and rule about not using accessKey Inconsistencies between keyboard shortcuts and keyboard commands used by people using screenreaders and keyboards complicate accessibility. --- packages/eslint-config-airbnb/rules/react.js | 4 ++++ react/README.md | 18 +++++++++++++++--- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/eslint-config-airbnb/rules/react.js b/packages/eslint-config-airbnb/rules/react.js index 02794495b1..3c05265b06 100644 --- a/packages/eslint-config-airbnb/rules/react.js +++ b/packages/eslint-config-airbnb/rules/react.js @@ -9,6 +9,10 @@ module.exports = { // View link below for react rules documentation // https://github.com/yannickcr/eslint-plugin-react#list-of-supported-rules 'rules': { + // Prevent use of `accessKey` + // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-access-key.md + 'jsx-a11y/no-access-key': 2, + // Require to have a non-empty `alt` prop, or role="presentation" // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-uses-alt.md 'jsx-a11y/img-uses-alt': 2, diff --git a/react/README.md b/react/README.md index 0ac01a5b6f..4fc7c7c783 100644 --- a/react/README.md +++ b/react/README.md @@ -249,15 +249,27 @@ ```javascript // bad - not an ARIA role -
+
// bad - abstract ARIA role -
+
// good -
+
``` + - 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) + + > Why? Inconsistencies between keyboard shortcuts and keyboard commands used by people using screenreaders and keyboards complicate accessibility. + + ```javascript + // bad +
+ + // good +
+ ``` + ## Parentheses - Wrap JSX tags in parentheses when they span more than one line. eslint: [`react/wrap-multilines`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/wrap-multilines.md) From 3f73e35b1874128161a97acbc6a299a801ec077b Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Wed, 6 Apr 2016 14:34:21 -0700 Subject: [PATCH 0015/1042] Use jsx fenced codeblocks for JSX code GitHub knows how to do JSX syntax highlighting. Since we are using JSX in this document, I figured we might as well tell GitHub to highlight the syntax as JSX here. This will lead to a better reading experience. --- react/README.md | 43 +++++++++++++++++++++---------------------- 1 file changed, 21 insertions(+), 22 deletions(-) diff --git a/react/README.md b/react/README.md index 4fc7c7c783..6db60dd18a 100644 --- a/react/README.md +++ b/react/README.md @@ -29,7 +29,7 @@ - If you have internal state and/or refs, prefer `class extends React.Component` over `React.createClass` unless you have a very good reason to use mixins. 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) - ```javascript + ```jsx // bad const Listing = React.createClass({ // ... @@ -49,8 +49,7 @@ And if you don't have state or refs, prefer normal functions (not arrow functions) over classes: - ```javascript - + ```jsx // bad class Listing extends React.Component { render() { @@ -75,7 +74,7 @@ - **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) - ```javascript + ```jsx // bad import reservationCard from './ReservationCard'; @@ -91,7 +90,7 @@ - **Component Naming**: Use the filename as the component name. For example, `ReservationCard.jsx` should have a reference name of `ReservationCard`. However, for root components of a directory, use `index.jsx` as the filename and use the directory name as the component name: - ```javascript + ```jsx // bad import Footer from './Footer/Footer'; @@ -106,7 +105,7 @@ - Do not use `displayName` for naming components. Instead, name the component by reference. - ```javascript + ```jsx // bad export default React.createClass({ displayName: 'ReservationCard', @@ -122,7 +121,7 @@ - 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) - ```javascript + ```jsx // bad @@ -152,7 +151,7 @@ > Why? JSX attributes [can't contain escaped quotes](http://eslint.org/docs/rules/jsx-quotes), so double quotes make conjunctions like `"don't"` easier to type. > Regular HTML attributes also typically use double quotes instead of single, so JSX attributes mirror this convention. - ```javascript + ```jsx // bad @@ -170,7 +169,7 @@ - Always include a single space in your self-closing tag. - ```javascript + ```jsx // bad @@ -189,7 +188,7 @@ - Always use camelCase for prop names. - ```javascript + ```jsx // bad