Permalink
Browse files

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
  • Loading branch information...
1 parent 07623e2 commit a2d0469c3901f75543d168758d3aea365788e05f @fson fson committed with gaearon Sep 21, 2016
View
@@ -0,0 +1,3 @@
+{
+ "extends": "react-app"
+}
View
@@ -1,7 +0,0 @@
-const clientESLintConfig = require('./packages/react-scripts/config/eslint');
-
-module.exports = Object.assign({}, clientESLintConfig, {
- env: Object.assign({}, clientESLintConfig.env, {
- node: true,
- })
-});
View
@@ -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",
@@ -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.
@@ -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.
@@ -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"
+ }
+}
@@ -0,0 +1,3 @@
+{
+ "extends": "react-app"
+}
@@ -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 [
@@ -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 [
@@ -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",
@@ -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'),
@@ -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.

0 comments on commit a2d0469

Please sign in to comment.