I've found a ton of "solutions" for this, ranging from simple package.json additions to custom hack modules, but none worked for me.
I simply want to override the eslint settings for an out-of-the-box, NON ejected create-react-app.
Namely, the rule "no-unused-vars".
I'm using Visual Studio Code.
I seem to have fixed this accidentally just trying combinations of things I found online. This seems to have worked.
1) I created a .env file in the project root (where the package.json file is). In it I have:
// .env file
EXTEND_ESLINT = true
2) Then I created a .eslintrc file (no extension) in my project root and added this:
// .eslintrc file (no extension)
{
"extends": [
"react-app"
],
"rules": {
"no-unused-vars": "off"
}
}
The library now supports extending the pre-defined ESLint rules natively, see the relevant docs.
The gist of it is that you will have to set the EXTEND_ESLINT environment variable, and then add your own ESLint config to the project root, optionally extending create-react-app's:
{
"eslintConfig": {
"extends": ["react-app"],
"overrides": [
{
"files": ["**/*.js"],
"rules": {
"no-unused-vars": "warn"
}
}
]
}
}
In the create-react-app project package.json is ready, you just need to add the rules field.
package.json
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
+ "rules": {
+ "react/self-closing-comp": 1
+ }
},
It's important to note that any rules that are set to "error" will stop the project from building.
create-react-app uses eslint-config-react-app, which contains almost all popular eslint packages.
eslint-plugin-flowtype
eslint-plugin-import
eslint-plugin-jest
eslint-plugin-jsx-a11y
eslint-plugin-react
eslint-plugin-react-hooks
eslint-plugin-testing-library
eslint-config-react-app github
https://github.com/facebook/create-react-app/tree/main/packages/eslint-config-react-app
eslint-config-react-app npm
https://www.npmjs.com/package/eslint-config-react-app
its not hard, just follow these steps:
npm i -D eslint eslint-plugin-react
npx eslint --init
edit the generated config file, for example .eslintrc.json
put your rules in the "rules": { ... } section
Related
I'm trying to get eslint set up in vscode with my project. That said, I have the following eslintrc.json file in the root of my project:
{
"env": {
"browser": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:#typescript-eslint/recommended"
],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["react", "#typescript-eslint"],
"rules": {}
}
However, with that configuration, I'm seeing lots of errors on my import lines for my files. For example, I see the following on the line with the import for React:
Cannot find module 'react' or its corresponding type declarations.
Needless to say, this is disheartening because I'm working in a react project. Also, the project still starts up and runs as it should, which leads me to believe this is a vscode issue. Any advise on how to make the errors in vscode go away would be very much appreciated.
This error is not ESLint related, nor VSCode related. It is a warning from TypeScript's type checker, saying one of the following:
react is not installed; or
react does not have a .d.ts typedefs file.
In your case, as the code runs, it's the second one. React does not have a definitions file, so you need to install the DefinitelyTyped package for React via npm install --save-dev #types/react or yarn add --dev #types/react.
NOTE: If you are making a typedef file for your project (not needed unless it's a library or you are augmenting types) and you need to import #types/react from your definition file, you need to leave out the --save-dev/--dev part.
Create-react-app allows you to extend the ESLint config that comes with create-react-app:
https://create-react-app.dev/docs/setting-up-your-editor#experimental-extending-the-eslint-config
However when I try to do this in my own project i just get this error
(Image of error)
Error
Error: Cannot find module 'eslint-config-shared-config'
Command run
eslint --ignore-path .gitignore --ext .js,.ts,.tsx .
.eslintrc
{
"extends": ["react-app", "shared-config"],
"rules": {
"additional-rule": "warn"
},
"overrides": [
{
"files": ["**/*.ts?(x)"],
"rules": {
"additional-typescript-only-rule": "warn"
}
}
]
}
A safe way to setup a base ESLint config file to build upon is by following the ESLint usage guide
$ npx eslint --init
# or
$ yarn run eslint --init
Like #jonrsharpe said, shared-config is just an example that cannot be used literally, the docs was trying to explain that you could use shared configurations.
For example, if you add an ESLint plugin with a shared-config rule set, then you could use that as indicated by the example.
Difference between plugins and extends in ESLint
EXTEND_ESLINT flag was removed in react-scripts v4
I want to setup a command on my package.json that can do the TS files linting on my react App (using CRA that provides the app with react-scripts 3.1.2).
I saw that tslint is getting deprecated and that's why the react community is moving to ESlint.
There are some clues on the package.json file, like:
"eslintConfig": {
"extends": "react-app"
}
So my idea is that when I run the eslint, it can take that configuration and use all the CRA setup.
I tried :
"lint" : "eslint --ext=jsx,ts,tsx src"
But no luck, since I put some errors on the code and it still do not show me any information.
Any clues?
So I found a good approach. My idea was to keep everything working with the CRA standards and reuse everything (not sure why nobody adds this on the CRA, probably I will add a PR on the future to check)
This fixed the thing, reusing all the dependencies that CRA uses:
On package.json (standard for CRA)
"eslintConfig": {
"extends": [
"react-app",
"plugin:react/recommended",
"plugin:#typescript-eslint/recommended"
]
}
And then you can add a lint script:
"lint" : "eslint ./src/**/*.{tsx,ts}",
I hope that this will help someone :-)
Also, if someone knows more about the good practice on this, it will be very appreciated!
PD: .eslintignore is also working fine
I'm getting an error when setting up Mobx with react, can anyone give me a simple step by step? I'm fairly new to React and I'm still getting my head around the files that come with it.
Here's what I did:
Used create-react-app
ejected app
Ran npm install --save mobx mobx-react
ran npm install --save-dev #babel/plugin-proposal-decorators
I then edited the package.json file:
"babel": {
"plugins": [
"#babel/plugin-proposal-decorators"
],
"presets": [
"react-app"
]
},
Here's the problem I'm getting:
What I tried:
The error seems to suggest that I need to set legacy to true in node_modules\#babel\plugin-proposal-decorators\lib\index.js. I tried that and it didn't work. I searched for the problem on google and it seems like it could be an issue with Babel 7?
You need to pass the option with the config you setup in your package.json
{
"plugins": [
["#babel/plugin-proposal-decorators", { "legacy": true }]
]
}
You can check the docs here: https://babeljs.io/docs/en/next/babel-plugin-proposal-decorators.html
Using: WebStorm 2016.3
I'm getting all kinds of warnings from eslint after setting up a project using create-react-app.
The documentation is not clear on settings to use/ignore useful eslint warnings in my project.
First setup/install: npm i -D eslint babel-eslint in your project
Then go into Webstorm Preferences > Language & Frameworks > Javascript > Code Quality Tools > ESLint
Set your ESLint package to point to either the current projects .../node_modules/eslint/ or some other directory where you have eslint installed via npm.
Make sure "Automatic search" is checked, this will use the .eslintrc file in your project directory
Create .eslintrc in your project directory root & add configuration:
{
"parser": "babel-eslint",
"parserOptions": {
"ecmaFeatures": {
"jsx": true,
"modules": true
}
},
"rules": {}
}