Closed mpvosseller closed 4 years ago
Looking at the installation instructions for eslint-config-react-app
here I see that their instructions call for installing different versions of the packages than we do. For example they specify the older version of eslint
that matches what react-scripts
requires.
Wonder if we could just use their installation instructions / versions and append prettier eslint-config-prettier eslint-plugin-prettier
That would currently make:
npm install --save-dev eslint-config-react-app @typescript-eslint/eslint-plugin@2.x @typescript-eslint/parser@2.x babel-eslint@10.x eslint@6.x eslint-plugin-flowtype@4.x eslint-plugin-import@2.x eslint-plugin-jsx-a11y@6.x eslint-plugin-react@7.x eslint-plugin-react-hooks@2.x prettier eslint-config-prettier eslint-plugin-prettier
I'll experiment a bit to see if this works.
Ok it looks like eslint-config-react-app
and all of its dependencies are actually already included with react-scripts
. See eslint-config-react-app installation instructions and react-scripts package.json.
This is great because it means that maintaining the versions that work together is their problem to handle.
Also most of the settings in our example .eslintrc.js
file are not needed because they are already included in eslint-config-react-app
which we extend.
I think then all we really need to do is:
yarn add prettier eslint-config-prettier eslint-plugin-prettier
.eslintrc.js
file like this:
module.exports = {
extends: [
"react-app", // Uses the recommended rules Create React App
"plugin:@typescript-eslint/recommended", // Uses the recommended rules from @typescript-eslint/eslint-plugin
"prettier/@typescript-eslint", // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
"plugin:prettier/recommended" // Should be last in the list. Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
],
rules: {},
};
yarn eslint --fix --ext js,ts,tsx src
One caveat worth noting is that by default "yarn start" and "yarn build" will not use our .eslintrc.js
file. This can be enabled by setting the experimental environment variable EXTEND_ESLINT=true
It may be better to leave this off however because with it on a running app (via yarn start
) will crash on any lint error which isn't great. May be better to just observe lint errors in editor or run eslint
manually and run it in CI before running yarn build
.
Will continue testing and submit a PR if I don't have any issues.
Any thoughts on this?
I can't verify everything you stated, but that probably has to do with my local setup. In the next days I will set up a Docker image & write a small tutorial, which then can be used with VS Code to develop inside a container - that way we can test the configurations completely encapsulated and be 100% sure that we get it right.
I created an issue for that: https://github.com/bennettdams/eslintconfig.dev/issues/10
@bennettdams 👍 Great. And I'll put together a PR today with my best recommendation.
OK, based on my research and tests I created a PR with instructions as I would recommend them today. https://github.com/bennettdams/eslintconfig.dev/pull/11
After creating a new react app and using this project's instructions the project fails to
yarn start
oryarn build
. Looks likereact-scripts
fails because it expects to findeslint ^6.6.0
but findseslint@^7.5.0
(which we instructed the user to install).Steps to reproduce:
npx create-react-app my-app --template typescript
cd my-app/
yarn add eslint-config-react-app @typescript-eslint/eslint-plugin@^4.0.0 @typescript-eslint/parser@^4.0.0 babel-eslint@^10.0.0 eslint@^7.5.0 eslint-plugin-flowtype@^5.2.0 eslint-plugin-import@^2.22.0 eslint-plugin-jsx-a11y@^6.3.1 eslint-plugin-react@^7.20.3 eslint-plugin-react-hooks@^4.0.8 prettier@^2.1.2 eslint-config-prettier@^6.12.0 eslint-plugin-prettier@^3.1.4
.eslintrc.js
yarn start