Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Create a shareable ESLint configuration package #689

Merged
merged 13 commits into from
Sep 21, 2016
Merged

Create a shareable ESLint configuration package #689

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
a4b4fe3
Move ESLint configuration to a separate package
fson Sep 20, 2016
603cff0
Remove the ESLint configuration, moved to eslint-config-react-app
fson Sep 20, 2016
2d2e7af
Update ESLint instructions
fson Sep 20, 2016
5c9f7ac
Pin the package versions in eslint-config-react-app
fson Sep 20, 2016
8dbfe66
Add a README for eslint-config-react-app
fson Sep 20, 2016
7e55f86
Update README.md
fson Sep 21, 2016
e2dc36e
Update README.md
fson Sep 21, 2016
cfa6880
Update README.md
fson Sep 21, 2016
f2665d8
Update README.md
gaearon Sep 21, 2016
2db2ebe
Update package.json
gaearon Sep 21, 2016
0881de1
Update package.json
gaearon Sep 21, 2016
5c4458c
Update production eslint-loader config
fson Sep 21, 2016
996bf67
Add the ESLint config to devDependencies of the repo
fson Sep 21, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .eslintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"extends": "./packages/eslint-config-react-app/index.js"
}
7 changes: 0 additions & 7 deletions .eslintrc.js
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"test": "node packages/react-scripts/scripts/test.js --env=jsdom"
},
"devDependencies": {
"babel-eslint": "6.1.2",
"eslint": "3.5.0",
"eslint-plugin-flowtype": "2.18.1",
"eslint-plugin-import": "1.12.0",
Expand Down
2 changes: 0 additions & 2 deletions packages/react-scripts/config/eslint.js → packages/eslint-config-react-app/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
// @remove-on-eject-begin
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
Expand All @@ -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.

Expand Down
21 changes: 21 additions & 0 deletions packages/eslint-config-react-app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll also want a readme here, explaining in a few words how to use this package as standalone.

"name": "eslint-config-react-app",
"version": "0.4.3",
"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"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would like to keep dependencies pinned, and update them manually. Our setup is a little more conservative.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While we're at it, can you look into updating us to eslint-plugin-react@6? Have any rules changed?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I pinned the dependencies and added a README. I can look into updating the plugins tomorrow.

}
}
3 changes: 3 additions & 0 deletions packages/react-scripts/.eslintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"extends": "react-app"
}
4 changes: 3 additions & 1 deletion packages/react-scripts/config/webpack.config.dev.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't we need this for prod config too?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We copy the .eslintrc to the ejected project, so we don't need to specify a custom configFile path or to disable the .eslintrc. I think people prefer the rc files for configuration in an ejected project (see #410).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't mean ejected, I meant webpack.config.prod.js. Don't we need to update path in it as well as .dev.js?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, great point. I forgot we had ESLint for the build too. Updated now.

// We use PostCSS for autoprefixing only.
postcss: function() {
return [
Expand Down
2 changes: 2 additions & 0 deletions packages/react-scripts/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
"url": "https://github.com/facebookincubator/create-react-app/issues"
},
"files": [
".eslintrc",
"bin",
"config",
"scripts",
Expand Down Expand Up @@ -40,6 +41,7 @@
"css-loader": "0.24.0",
"detect-port": "1.0.0",
"eslint": "3.5.0",
"eslint-config-react-app": "0.4.3",
"eslint-loader": "1.5.0",
"eslint-plugin-flowtype": "2.18.1",
"eslint-plugin-import": "1.12.0",
Expand Down
7 changes: 1 addition & 6 deletions packages/react-scripts/scripts/eject.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
Expand Down Expand Up @@ -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'),
Expand Down
4 changes: 2 additions & 2 deletions packages/react-scripts/template/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down