I am trying to set up a React project that uses webpack and ESLint with the airbnb config for ESLint. When I try starting up the project with webpack dev server, I get the following error:
"Module build failed: Error:
/react-template/node_modules/eslint-config-airbnb/rules/react-a11y.js:
ESLint configuration is invalid:
- Unexpected top-level property "ecmaFeatures"."
This is using eslint-config-airbnb v. 15.0.1. I checked the react-a11y.js file and confirmed there is a top-level property of "ecmaFeatures". I know as of ESLint 2.0.0 ecmaFeatures are now supposed to be under the parserOptions property, but I'm not sure if that only applies to the .eslintrc file. I'd like to use the airbnb config if possible, so I appreciate any assistance. Here is my .eslintrc file for reference.
.eslintrc
{
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2016,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"browser": true,
"node": true,
"jest": true
},
"extends": ["airbnb"]
}
I figured out a solution.
You have to edit react-a11y.js and react.js located in ./node_modules/.bin/eslint-config-airbnb/rules/.
In react-a11y.js remove:
ecmaFeatures: {
jsx: true
},
and replace it with:
parserOptions: {
ecmaFeatures: {
jsx: true,
},
},
In react.js just remove:
ecmaFeatures: {
jsx: true
},
and you should be good to go.
Also, I'm looking at the airbnb's repo right now and it looks like they fixed it almost a month ago, but I just reinstalled eslint-config-airbnb today, so I'm not sure what happened there.
Here are links to the react-a11y.js diff and the react.js diff. They show exactly what you need to add/remove.
Global eslint has been upgraded from 3.19.0-1 to 4.0.0-1 when the problem appeared for me.
eslint v4 is not yet supported in eslint-config-airbnb and eslint-config-airbnb-base
https://github.com/eslint/eslint/issues/8726#issuecomment-308367541
You JSON isn't valid. It's missing quotes around first "parser";
{
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2016,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"browser": true,
"node": true,
"jest": true
},
"extends": ["airbnb"]
}
Related
I'm setting up an environment this way to work with a ReactJs/Next.js project that uses 'styled jsx', but eslint can't fix the css flaws in the middle of the code.
How can I best configure eslint to work with the project I'm working on?
{
"parser": "#babel/eslint-parser",
"extends": [
"airbnb",
"plugin:react/recommended"
],
"env": {
"es6": true,
"browser": true,
"node": true,
"jest": true
},
"settings": {
"import/core-modules": ["styled-jsx", "styled-jsx/css"],
},
"plugins": [
"react",
"react-hooks"
],
"parserOptions": {
"sourceType": "module",
"allowImportExportEverywhere": true
},
"rules": {
// ..rules
}
}
Check this out:
https://github.com/vercel/styled-jsx#eslint
If you're using eslint-plugin-import, the css import will generate errors, being that it's a "magic" import (not listed in package.json). To avoid these, simply add the following line to your eslint configuration:
"settings": {"import/core-modules": ["styled-jsx/css"] }
This should remove any errors - but you won't get highlighting.
I installed eslint-watch https://www.npmjs.com/package/eslint-watch so eslint would run every time I hit save. However, whenever I save a file with the extension .jsx the linter doesn't run. I'm confident this is the issue because the linter does run after i save a change to a non jsx file and it works if I change the .jsx file extension to .js.
I would really appreciate any help. Here are the relevant files.
package.json scripts (directory paths are correct)
"lint": "esw webpack.config.* babel.config.* src/**/*.js src/**/*.jsx server/**/*.js --color",
"lint:watch": "npm run lint -- --watch",
package.json dependencies (same versions in package-lock.json)
"eslint": "^6.2.1",
"eslint-watch": "^6.0.0",
"eslint-plugin-react": "^7.14.3",
.eslintrc.js (in the root directory)
module.exports = {
"root": true,
"env": {
"browser": true,
"node": true,
"es6": true
},
"extends": ["eslint:recommended", "plugin:react/recommended"],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"plugins": [
"react"
],
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
},
"settings": {
"react": {
"version": "detect"
}
}
}
I think all you have to do is add the --ext .jsx flag. This will tell eslint to look for jsx extensions on run. Even though in your config you have told it to parse jsx files and you've passed the glob pattern for jsx, eslint doesn't know it needs to look for or parse .jsx files.
If this doesn't resolve your issue create a ticket on the repo's github page and I can assist further.
I am using eslint in my angularjs project. My project has a Github integration with Codacy (using config file). I have configured my global variables which need to be ignored from linting in the .eslintrc file as below:
{
"extends": "eslint:recommended",
"plugins": ["angular"],
"env": {
"browser": true,
"jasmine": true,
"node": true,
"es6": true,
"amd": true
},
"globals": {
"angular": true,
"module": true,
"inject": true,
"_": true,
"L": true,
"$": true,
"Highcharts": true,
"numeral": true
},
"rules": {
"angular/on-watch": 0,
"semi": 2
}
}
This works fine within the IDE and I get no errors. But Codacy doesn't pick-up the global ignored variables and keeps complaining about no-undef for angular, numeral, Highcharts etc.
'angular' is not defined. (no-undef)
'numeral' is not defined. (no-undef)
How do I fix this configuration?
You should change your project code patterns ESLint configuration to use a configuration file in Code Patterns -> ESLint
Cheers
I'm trying to enable formatting on save in VSCode in a Gatsby project, per the Gatsby docs: https://www.gatsbyjs.org/tutorial/part-zero/#install-the-prettier-plugin
I also tried setting up eslint so now I have:
{
"env": {
"browser": true,
"es6": true
},
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": ["prettier"],
"rules": { "prettier/prettier": "error" },
"extends": ["airbnb", "prettier", "prettier/react"],
"settings": {
"import/core-modules": ["react"]
}
}
in my .eslintrc.json and
{
"endOfLine": "lf",
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5"
}
in my .prettierrc.
I have Format on save, on paste, and on type enabled in both my User Settings and my Workspace settings and it appears to work in my .eslintrc.json and in a .css file, but not with the Gatsby components (Header.js, Layout.js, etc). I can format these component files by opening the command palette and manually clicking 'Format Document,' but not automatically on save.
I'm using eslint on a react app for the first time, and while it's checking .js files perfectly well, it's not finding any .jsx files. Admittedly my understanding is hazy, but I thought eslint-plugin-react automatically scanned .jsx files as well with parserOptions.ecmaFeatures.jsx set to true?
If I run npm run:lint -- --ext .jsx then jsx files are scanned correctly, but not with a default npm run:lint command
My .eslintrc here:
{
"plugins": [
"react"
],
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"browser": true,
"node": true,
"mocha": true,
"jest": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"rules": {
}
}
It looks like using the --ext CLI flag is the only way to specify file extensions. See the documentation below.
https://eslint.org/docs/2.0.0/user-guide/configuring#specifying-file-extensions-to-lint
One thing you could do is to include the flag as part of your npm command. For example, npm run lint could run eslint --ext .jsx so that you don't have to type it manually.