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": {}
}
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'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
Since I reinstalled my NPM dependencies in my create-react-app project, Atom's eslint gives me this error on the top of every file :
Error while running ESLint: Cannot find module 'eslint-config-react-app'.
While react-scripts's eslint doesn't raise any warning or error. By the way, the package eslint-config-react-app is installed in node_modules.
I tried to reinstall linter-eslint, atom, the NPM dependencies, etc. Nothing worked.
Has anyone an idea ?
Here is my .eslintrc :
{
"extends": "react-app",
"rules": {
"jsx-a11y/anchor-is-valid": 0,
"react/jsx-no-comment-textnodes": 0,
"no-unused-vars": ["warn", {
args: "all",
ignoreRestSiblings: false,
argsIgnorePattern: "^_$"
}]
}
}
Edit : I don't know why, but all of the sudden, the error changed and now it's this one on top of every js file :
Error while running ESLint: Invalid regular expression flags
EDIT 2
None of the given solutions worked in my case. The problem with linter-eslint is not solved. But I found a workaround for now : using fast-eslint instead of linter-eslint. Works just fine.
For anyone else trying this, one solution is installing eslint-config-react-app globally, along with all of its peer deps. At the moment, that's:
Refer to https://github.com/facebook/create-react-app/issues/3633#issuecomment-361485857
npm i -g babel-eslint#^7.2.3 eslint#^4.1.1 eslint-plugin-flowtype#^2.34.1 eslint-plugin-import#^2.6.0 eslint-plugin-jsx-a11y#^5.1.1 eslint-plugin-react#^7.1.0
Since you mentioned that the problem occurred after you reinstalled
npm modules, it might be related to npm dependency resolution. So
you might have multiple versions of the same module and atom might
use the wrong one.
Check whether your react-scripts version is 0.2.0 or higher according to Displaying Lint Output in the Editor
Remove all eslint related dependencies from your package.json.
This means removing babel-eslint, eslint, eslint-plugin-flowtype,
eslint-plugin-import, eslint-plugin-jsx-a11y, eslint-plugin-react, etc
Create react app installs all the linting dependencies under the
hood so you shouldn't manually install them.
Remove all global eslint related dependencies.
Generally you don't need to use globally installed eslint dependencies as you might
have different eslint versions in each of your projects.
The latest version of linter-eslint should then use the correct eslint dependencies from under node_modules in your project.
UPDATE: Based on your comments and edited question, I tried reproducing this using CRA, replacing the dependencies in package.json, reinstalling and adding the following .eslintrc.
Notice I added " around the options keys in the "no-unused-vars".
{
"extends": "react-app",
"rules": {
"jsx-a11y/anchor-is-valid": 0,
"react/jsx-no-comment-textnodes": 0,
"no-unused-vars": ["warn", {
"args": "all",
"ignoreRestSiblings": false,
"argsIgnorePattern": "^_$"
}]
}
}
Having done all this I couldn't reproduce the issue.
We have a react app in Visual Studio 2017 that shows the following warning messages for every .js file in the project "(ESLint) Cannot find module 'eslint-config-react-app'...". We have the react-scripts package installed that pulled in the eslint-config-react-app package as well. We have tried to install it ourselves in the local projects package.json as well as a global package.
No matter what we do these errors will not go away.
UPDATED:
The project folder structure is:
Project
ClientApp
public
src
packages.json
Controllers
Pages
I have tried putting the following in the packages.json file:
"eslintConfig": {
"extends": "react-app"
}
I have tried creating a .eslintrc file in the ClientApp folder as well as moving to the project root folder so it sits at the same level as the ClientApp folder. In the file I had the following:
{
"extends": "react-app"
}
I also tried the following in the .eslintrc file:
{
"extends": [
"eslint:recommended",
"plugin:react/recommended"
]
}
When I did this my error changes to "
(ESLint) ESLint encountered a parsing error.
I found the solution. I removed all .eslintrc files and also removed the ESLint config section of the packages.json file. Then I went into Tools...Options in Visual Studio and searched for ESLint. I then clicked on the button "Reset global .eslintrc". Finally I closed and re-opened the solution and everything is now working as expected.
This happened to me, but it was:
Error: Failed to load plugin react: Cannot find module 'eslint-plugin-react'
I didn't have a .eslintrc in the website root!!! So I added one (there are lots of examples of what it must contain)