From fa40e749b61227ffa4a666a9db2b5fdacf3d6bf2 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 1 May 2017 13:17:44 +0100 Subject: [PATCH 1/3] Suggest to create .eslintrc for IDE lint plugins --- packages/react-scripts/template/README.md | 35 +++++++---------------- 1 file changed, 11 insertions(+), 24 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index da55a2e58a7..2b745cad2e8 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -215,42 +215,29 @@ They are not required for linting. You should see the linter output right in you You would need to install an ESLint plugin for your editor first. ->**A note for Atom `linter-eslint` users** - ->If you are using the Atom `linter-eslint` plugin, make sure that **Use global ESLint installation** option is checked: +Then, you will need to install some packages *globally*: -><img src="http://i.imgur.com/yVNNHJM.png" width="300"> +```sh +npm install -g eslint-config-react-app@0.3.0 eslint@3.8.1 babel-eslint@7.0.0 eslint-plugin-react@6.4.1 eslint-plugin-import@2.0.1 eslint-plugin-jsx-a11y@4.0.0 eslint-plugin-flowtype@2.21.0 +``` +We recognize that this is suboptimal, but it is currently required due to the way we hide the ESLint dependency. ->**For Visual Studio Code users** +>**A note for Atom `linter-eslint` users** ->VS Code ESLint plugin automatically detects Create React App's configuration file. So you do not need to create `eslintrc.json` at the root directory, except when you want to add your own rules. In that case, you should include CRA's config by adding this line: +>If you are using the Atom `linter-eslint` plugin, make sure that **Use global ESLint installation** option is checked: ->```js ->{ -> // ... -> "extends": "react-app" ->} ->``` +><img src="http://i.imgur.com/yVNNHJM.png" width="300"> -Then add this block to the `package.json` file of your project: +Finally, add a file called `.eslintrc` to the project root: ```js { - // ... - "eslintConfig": { - "extends": "react-app" - } + "extends": "react-app" } ``` -Finally, you will need to install some packages *globally*: - -```sh -npm install -g eslint-config-react-app@0.3.0 eslint@3.8.1 babel-eslint@7.0.0 eslint-plugin-react@6.4.1 eslint-plugin-import@2.0.1 eslint-plugin-jsx-a11y@4.0.0 eslint-plugin-flowtype@2.21.0 -``` - -We recognize that this is suboptimal, but it is currently required due to the way we hide the ESLint dependency. The ESLint team is already [working on a solution to this](https://github.com/eslint/eslint/issues/3458) so this may become unnecessary in a couple of months. +Now your editor should report the linting warnings. ## Debugging in the Editor From 500643984eb9d5e2620e3ab450cc3fc2eac5a0fd Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 1 May 2017 13:53:58 +0100 Subject: [PATCH 2/3] Update README.md --- packages/react-scripts/template/README.md | 19 ++++--------------- 1 file changed, 4 insertions(+), 15 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 2b745cad2e8..3e4a30cbd44 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -207,7 +207,8 @@ To configure the syntax highlighting in your favorite text editor, head to the [ ## Displaying Lint Output in the Editor ->Note: this feature is available with `react-scripts@0.2.0` and higher. +>Note: this feature is available with `react-scripts@0.2.0` and higher. +>It also only works with npm 3 or higher. Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint. @@ -215,20 +216,6 @@ They are not required for linting. You should see the linter output right in you You would need to install an ESLint plugin for your editor first. -Then, you will need to install some packages *globally*: - -```sh -npm install -g eslint-config-react-app@0.3.0 eslint@3.8.1 babel-eslint@7.0.0 eslint-plugin-react@6.4.1 eslint-plugin-import@2.0.1 eslint-plugin-jsx-a11y@4.0.0 eslint-plugin-flowtype@2.21.0 -``` - -We recognize that this is suboptimal, but it is currently required due to the way we hide the ESLint dependency. - ->**A note for Atom `linter-eslint` users** - ->If you are using the Atom `linter-eslint` plugin, make sure that **Use global ESLint installation** option is checked: - -><img src="http://i.imgur.com/yVNNHJM.png" width="300"> - Finally, add a file called `.eslintrc` to the project root: ```js @@ -239,6 +226,8 @@ Finally, add a file called `.eslintrc` to the project root: Now your editor should report the linting warnings. +Note that even if you edit your `.eslintrc` file further, these changes won’t affect the terminal and in-browser lint output. This is because Create React App intentionally provides a minimal set of rules that find common mistakes. If you want to enforce a coding style for your project, consider using [Prettier](https://github.com/jlongster/prettier) instead of ESLint style rules. + ## Debugging in the Editor **This feature is currently only supported by [Visual Studio Code](https://code.visualstudio.com) editor.** From 5d14999dc441f57bd17dbe1e821147b1bef5aa35 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Mon, 1 May 2017 13:54:58 +0100 Subject: [PATCH 3/3] Update README.md --- packages/react-scripts/template/README.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 3e4a30cbd44..34d27094f7a 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -214,9 +214,7 @@ Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plug They are not required for linting. You should see the linter output right in your terminal as well as the browser console. However, if you prefer the lint results to appear right in your editor, there are some extra steps you can do. -You would need to install an ESLint plugin for your editor first. - -Finally, add a file called `.eslintrc` to the project root: +You would need to install an ESLint plugin for your editor first. Then, add a file called `.eslintrc` to the project root: ```js {