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
Related
I have a Chrome Extension built with Parcel and React, but I'm not getting warnings (e.g. missing useEffect dependencies) when I inspect the popup. How do I get these warnings?
Missing useEffect dependencies warnings are provided by eslint through this plugin. Parcel won't run eslint for you unless you set it up through the #parcel/validator-eslint plugin. I provided instructions on how to do that in this answer.
Another option is to use eslint-watch (npm) from the command line separately from parcel, so you'd have two separate scripts in your package.json that might look like this:
{
"scripts": {
"start": "parcel src/index.html"
"lint": "esw --watch src/**/*.js"
}
}
To get react hooks warnings, you'll need to use eslint-plugin-react-hooks by first installing it (e.g. yarn add eslint-plugin-react-hooks --dev), and then adding this to your .eslintrc.json:
{
"extends": [
// ...
"plugin:react-hooks/recommended"
]
}
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
How can I tell babel to transpile files that are not in current (root) directory?
Here is my project structure:
|-project
|build
|-node_modules
-.babel.rc
-package.json
|src
|test
My source files are in "src", my test files are in "test".
I want to run mocha test from my package json script. I use babel to transpile my src files (ES6, React) on the fly.
Here is my package.json:
"scripts": {
"test": "mocha --require #babel/register '../test/**/*Test.js'"
}
and .babelrc:
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
}
But when I run yarn test, I get error message like this:
/src/App.spec.js:1
(function (exports, require, module, __filename, __dirname) { import React from 'react';
^^^^^^
SyntaxError: Unexpected token import
I'v tried milion config combination, but nothing works, I don't want to have package.json and babel config files in the project root (that works) and I couldn't figure it out how to tell babel what to transpile, without changing project structure.
From the error you posted, it seems your babel configuration cannot process jsx syntax. You can resolve this by installing #babel/plugin-transform-react-jsx plugin.
And configuring it like so:
.babelrc
{
...
"plugins": ["#babel/plugin-transform-react-jsx"]
}
I finally came to this solution:
package.json:
"test": "NODE_PATH=$PWD/node_modules:$PWD/../src/ mocha --require babelRegister.js ../test/**/*.spec.js"
babelRegister.js:
require('#babel/register')({
extends: './.babelrc',
ignore: [/node_modules/],
});
Both "extends" and "ignore" must be set, otherwise it's not working. Looks hackish but I didn't find better solution.
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.
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": {}
}