I have defined an arrow function on my node 12.6.0 application. But when running eslint it reports an error about Parsing error: Unexpected token =. It works if I add "parser": "babel-eslint" on eslint configuration file. I wonder why eslint require babel for that. This syntax is already supported by node 12.6.0.
Below is my eslint configuration file:
{
"env": {
"commonjs": true,
"es6": true,
"node": true,
"jest": true
},
"extends": [
"airbnb-base"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018
},
"rules": {
},
"parser": "babel-eslint"
}
Related
recently in project that I'm starting from scratch I met a problem that I can't get quite solved. I'm not an expert in pnp, actually was setting up this for the first time just now.
We decided to use yarn#berry with zero-installs setup, I did also setup an eslint, prettier, husky with commitlint and started the app.
So, after any .tsx file save this error comes up:eslint plugin error
Here is my .eslintrc.json
{
"env": {
"browser": true,
"es2021": true,
"jest": true
},
"extends": [
"react-app",
"react-app/jest",
"airbnb",
"airbnb-typescript",
"plugin:import/typescript"
],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module",
"project": "./tsconfig.json"
},
"plugins": ["react", "#typescript-eslint"],
"rules": {
"react/react-in-jsx-scope": ["off"],
"react/jsx-uses-react": ["off"],
"react/no-array-index-key": ["off"],
"react/jsx-props-no-spreading": ["warn"],
"react/no-unescaped-entities": ["off"],
"react/function-component-definition": [
2,
{
"namedComponents": "arrow-function",
"unnamedComponents": "arrow-function"
}
]
}
}
And when I do install this single library manually it starts to ask for next plugin that ESlint extends from.
We have a repo filled with apps linting in all sorts of different directions. We've updated the linting for most of the apps to consolidate and want to take advantage of eslint inheritance/merging of properties, but the order of the extends property is important. How does merging work with extends?
We have a root .eslintrc that has a setup for typescript, which is the majority of our codebase, but in some of the child .eslintrc files we need to change the order of extends to include eslint for vue and the order is important so we've been added root: true to prevent inheritance.
Our root .eslintrc is a basic typescript setup that's used for some apps and all our APIs:
{
"root": true,
"env": {
"browser": true,
"es2021": true,
"jest/globals": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/recommended",
"prettier"
],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": ["#typescript-eslint", "jest"],
"rules": {
// ... removed for brevity
},
"overrides": [
// ... removed for brevity
]
}
There are a couple Vue 2.x applications in the repo that have almost identical .eslintrc files except for the extends property which contains plugin:vue/essential between eslint:recommended and plugin:#typescript-eslint/recommended.
Reading the docs and using --print-config can't figure out whether extends overwrites or tries to merge, or whether it's possible to have it override to include plugin:vue/essential at the right index:
{
// Added to prevent inheritance, but want to remove since other than a few
// rules and overrides all the .eslintrc files are almost the same now
// outside the requirement of `plugin:vue/essential`
"root": true,
"globals": {
"_": true
},
"env": {
"browser": true,
"es2021": true,
"jest/globals": true,
"node": true
},
// ------------------
// How does `extends` property merge, or does it overwrite?
"extends": [
"eslint:recommended",
"plugin:vue/essential",
"plugin:#typescript-eslint/recommended",
"prettier"
],
// ------------------
"parser": "vue-eslint-parser",
"parserOptions": {
"parser": "#typescript-eslint/parser",
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": ["vue", "#typescript-eslint", "jest"],
"rules": {
// ... removed for brevity
},
"overrides": [
// ... removed for brevity
],
"settings": {
"import/resolver": {
// ... removed for brevity
}
}
}
If not we'll just keep them as separate files with root: true, and live with the duplication.
Trying to run react app using npm run react-start but get this error while starting the development server.
failed to load plugin 'babel' declared in '.eslintrc': cannot find module 'eslint-plugin-babel' require stack: - c:\users\user\appdata\roaming\npm\node_modules\react-scripts\config_placeholder_.js
Here is my .eslintrc config file data:
{
"parser": "babel-eslint",
"env": {
"browser": true,
"es6": true
},
"extends": ["plugin:react/recommended", "prettier"],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly",
"window": true
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react",
"babel",
"jsx",
"prettier"
],
I already installed eslint-plugin-babel using this command npm add -D eslint-plugin-babel.
version details :
npm -v : 6.14.8,
node -v: v14.15.0,
babel-eslint": "^10.1.0",
eslint-plugin-babel": "^5.3.1"
How I can get a warning instead of an error while using ESLint?
I use ESLint 6.7.2 version with a plugin for babel and react.
This is my actual .eslintrc.json:
{
"env": {
"browser": true,
"es6": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
},
"settings": {
"react" : {
"version": "16.7.0"
}
},
"parser": "babel-eslint"
}
I've found the answer:
It enough to add a rule for no-unused-vars:
"rules": {
"no-unused-vars": "warn"
},
Also, restart the server.
I've installed eslint-plugin-angular globally.
eg:
npm install -g eslint
npm install -g eslint-plugin-angular
According to http://eslint.org/docs/user-guide/configuring using .json files is an option.
Here's my .eslintrc.json file.
json
{
"env" : {
"browser": true,
"jquery": true
},
"plugins": [
"angular"
],
"extends": [
"eslint:recommended",
"plugin:angular/johnpapa"
],
"rules": {
"semi": ["error", "always"]
}
}
The main error I'm running into is this:
TypeError: Cannot read property 'johnpapa' of undefined
Looking at the documentation: https://github.com/Gillespie59/eslint-plugin-angular#usage-without-shareable-config
I can't see why plugin:angular/johnpapa wouldn't work. Do you have to use .yml?
Please see the changed .eslintrc.json below.
{
"env": {
"browser": true,
"es6": true
},
"globals": {
"angular": true,
"require": true
},
"parserOptions": {
"sourceType": "module"
},
"extends": [
"eslint:recommended",
"plugin:angular/johnpapa"
],
"rules": { /* rules here */ }
}