Create a shareable ESLint configuration package (#689)

* Move ESLint configuration to a separate package * Remove the ESLint configuration, moved to eslint-config-react-app * Update ESLint instructions * Pin the package versions in eslint-config-react-app * Add a README for eslint-config-react-app * Update README.md * Update README.md * Update README.md * Update README.md * Update package.json * Update package.json * Update production eslint-loader config * Add the ESLint config to devDependencies of the repo
facebook · Sep 21, 2016 · a2d0469 · a2d0469
1 parent 07623e2
commit a2d0469
Show file tree

Hide file tree

Showing 12 changed files with 67 additions and 19 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,3 @@
+{
+  "extends": "react-app"
+}
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/package.json b/package.json
@@ -10,7 +10,9 @@
     "test": "node packages/react-scripts/scripts/test.js --env=jsdom"
   },
   "devDependencies": {
+    "babel-eslint": "6.1.2",
     "eslint": "3.5.0",
+    "eslint-config-react-app": "file:packages/eslint-config-react-app",
     "eslint-plugin-flowtype": "2.18.1",
     "eslint-plugin-import": "1.12.0",
     "eslint-plugin-jsx-a11y": "2.2.2",

diff --git a/packages/eslint-config-react-app/README.md b/packages/eslint-config-react-app/README.md
@@ -0,0 +1,27 @@
+# eslint-config-react-app
+
+This package includes the shareable ESLint configuration used by [Create React App](https://github.com/facebookincubator/create-react-app).
+
+## Usage in Create React App Projects
+
+The easiest way to use this configuration is with [Create React App](https://github.com/facebookincubator/create-react-app), which includes it by default. **You don’t need to install it separately in Create React App projects.**
+
+## Usage Outside of Create React App
+
+If you want to use this ESLint configuration in a project not built with Create React App, you can install it with following steps.
+
+First, install this package, ESLint and the necessary plugins.
+
+  ```sh
+  npm install --save-dev eslint-config-react-app babel-eslint@6.1.2 eslint@3.5.0 eslint-plugin-flowtype@2.18.1 eslint-plugin-import@1.12.0 eslint-plugin-jsx-a11y@2.2.2 eslint-plugin-react@5.2.2
+  ```
+
+Then create a file named `.eslintrc` with following contents in the root folder of your project:
+
+  ```js
+  {
+    "extends": "react-app"
+  }
+  ```
+
+  That's it! You can override the settings from `eslint-config-react-app` by editing the `.eslintrc` file. Learn more about [configuring ESLint](http://eslint.org/docs/user-guide/configuring) on the ESLint website.
diff --git a/packages/react-scripts/config/eslint.js → packages/eslint-config-react-app/index.js b/packages/react-scripts/config/eslint.js → packages/eslint-config-react-app/index.js
@@ -1,4 +1,3 @@
-// @remove-on-eject-begin
 /**
  * Copyright (c) 2015-present, Facebook, Inc.
  * All rights reserved.
@@ -7,7 +6,6 @@
  * LICENSE file in the root directory of this source tree. An additional grant
  * of patent rights can be found in the PATENTS file in the same directory.
  */
-// @remove-on-eject-end
 
 // Inspired by https://github.com/airbnb/javascript but less opinionated.
 

diff --git a/packages/eslint-config-react-app/package.json b/packages/eslint-config-react-app/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "eslint-config-react-app",
+  "version": "0.1.0",
+  "description": "ESLint configuration used by Create React App",
+  "repository": "facebookincubator/create-react-app",
+  "license": "BSD-3-Clause",
+  "bugs": {
+    "url": "https://github.com/facebookincubator/create-react-app/issues"
+  },
+  "files": [
+    "index.js"
+  ],
+  "peerDependencies": {
+    "babel-eslint": "6.1.2",
+    "eslint": "3.5.0",
+    "eslint-plugin-flowtype": "2.18.1",
+    "eslint-plugin-import": "1.12.0",
+    "eslint-plugin-jsx-a11y": "2.2.2",
+    "eslint-plugin-react": "5.2.2"
+  }
+}
diff --git a/packages/react-scripts/.eslintrc b/packages/react-scripts/.eslintrc
@@ -0,0 +1,3 @@
+{
+  "extends": "react-app"
+}
diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
@@ -165,11 +165,13 @@ module.exports = {
       }
     ]
   },
+  // @remove-on-eject-begin
   // Point ESLint to our predefined config.
   eslint: {
-    configFile: path.join(__dirname, 'eslint.js'),
+    configFile: path.join(__dirname, '../.eslintrc'),
     useEslintrc: false
   },
+  // @remove-on-eject-end
   // We use PostCSS for autoprefixing only.
   postcss: function() {
     return [

diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
@@ -175,13 +175,15 @@ module.exports = {
       }
     ]
   },
+  // @remove-on-eject-begin
   // Point ESLint to our predefined config.
   eslint: {
     // TODO: consider separate config for production,
     // e.g. to enable no-console and no-debugger only in production.
-    configFile: path.join(__dirname, 'eslint.js'),
+    configFile: path.join(__dirname, '../.eslintrc'),
     useEslintrc: false
   },
+  // @remove-on-eject-end
   // We use PostCSS for autoprefixing only.
   postcss: function() {
     return [

diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
@@ -11,6 +11,7 @@
     "url": "https://github.com/facebookincubator/create-react-app/issues"
   },
   "files": [
+    ".eslintrc",
     "bin",
     "config",
     "scripts",
@@ -40,6 +41,7 @@
     "css-loader": "0.24.0",
     "detect-port": "1.0.0",
     "eslint": "3.5.0",
+    "eslint-config-react-app": "0.1.0",
     "eslint-loader": "1.5.0",
     "eslint-plugin-flowtype": "2.18.1",
     "eslint-plugin-import": "1.12.0",

diff --git a/packages/react-scripts/scripts/eject.js b/packages/react-scripts/scripts/eject.js
@@ -29,11 +29,11 @@ prompt(
   var ownPath = path.join(__dirname, '..');
   var appPath = path.join(ownPath, '..', '..');
   var files = [
+    '.eslintrc',
     path.join('config', 'babel.dev.js'),
     path.join('config', 'babel.prod.js'),
     path.join('config', 'flow', 'css.js.flow'),
     path.join('config', 'flow', 'file.js.flow'),
-    path.join('config', 'eslint.js'),
     path.join('config', 'paths.js'),
     path.join('config', 'env.js'),
     path.join('config', 'polyfills.js'),
@@ -111,11 +111,6 @@ prompt(
     filePath => path.join('<rootDir>', filePath)
   );
 
-  // Explicitly specify ESLint config path for editor plugins
-  appPackage.eslintConfig = {
-    extends: './config/eslint.js',
-  };
-
   console.log('Writing package.json');
   fs.writeFileSync(
     path.join(appPath, 'package.json'),

diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
@@ -163,15 +163,15 @@ Then add this block to the `package.json` file of your project:
 {
   // ...
   "eslintConfig": {
-    "extends": "./node_modules/react-scripts/config/eslint.js"
+    "extends": "react-app"
   }
 }
 ```
 
 Finally, you will need to install some packages *globally*:
 
 ```sh
-npm install -g eslint babel-eslint eslint-plugin-react eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-flowtype
+npm install -g eslint-config-react-app eslint babel-eslint eslint-plugin-react eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-flowtype
 ```
 
 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.