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.
Related
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 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"
}
I'm very confused about how to setup the config file and which configs/plugins I should use.
I have a React project that uses Typescript, Jest and React hooks.
I know I need to install:
eslint
prettier, eslint-config-prettier, eslint-plugin-prettier
eslint-plugin-import
As for the Airbnb config, I'm not sure whether I need to install:
eslint-config-airbnb, eslint-plugin-react, eslint-plugin-jsx-a11y
or
eslint-config-airbnb-base
It doesn't seem like either of these support Typescript, so it seems I also need to install:
#typescript-eslint/eslint-plugin, #typescript-eslint/parser
And for Jest, I need to install:
eslint-plugin-jest
I'm not sure about React hooks. Do I need to install anything additional here or do one of the other packages include support for it? I see I have the option of installing:
eslint-plugin-react-hooks
Is that required?
Now, for the config file there are two areas I'm concerned with: extends and plugins.
I see that a few of these packages can be extended with /recommended. Should I use any of these? What should the extends section be? I've seen examples where it sets it as:
{
"extends": ["airbnb-base", "plugin:prettier/recommended"]
}
While I've seen other examples that use:
{
"extends": ["airbnb", "prettier"]
}
And another example that uses:
{
"extends": [
"airbnb",
"plugin:prettier/recommended",
"prettier/react"
]
}
What about the other Typescript, Jest and React Hooks plugins? For example, eslint-plugin-jest suggests adding "plugin:jest/recommended" to the extends. Will that conflict with any of the others? I see I could also add "plugin:#typescript-eslint/recommended" and "prettier/#typescript-eslint". Should they be included too?
For the plugins section, do I just list each eslint-plugin-.... package that I installed?
Here's an example, please let me know how this looks:
Installed packages
#typescript-eslint/eslint-plugin
#typescript-eslint/parser
eslint
eslint-config-airbnb
eslint-config-prettier
eslint-plugin-import
eslint-plugin-jest
eslint-plugin-jsx-a11y
eslint-plugin-prettier
eslint-plugin-react
eslint-plugin-react-hooks
prettier
Config file:
{
"extends": [
"airbnb",
"plugin:#typescript-eslint/recommended",
"plugin:jest/recommended",
"plugin:prettier/recommended",
"plugin:react/recommended",
"prettier",
"prettier/#typescript-eslint"
],
"parser": "#typescript-eslint/parser",
"plugins": [
"#typescript-eslint",
"import",
"jest",
"jsx-a11y",
"react",
"react-hooks"
],
}
Thought I'd come back an answer this. Here's my final configuration that works:
module.exports = {
"env": {
"browser": true,
"es6": true,
"jest": true,
"node": true
},
"extends": [
"airbnb",
"plugin:#typescript-eslint/recommended",
"plugin:import/typescript",
"plugin:jest/recommended",
"plugin:react/recommended",
"plugin:prettier/recommended",
"prettier",
"prettier/#typescript-eslint",
"prettier/react"
],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2018,
"jsx": true,
"sourceType": "module",
"useJSXTextNode": true
},
"plugins": ["#typescript-eslint", "import", "jest", "react", "prettier"],
"rules": {
"#typescript-eslint/explicit-function-return-type": [
"error",
{
"allowExpressions": true,
"allowTypedFunctionExpressions": true
}
],
"#typescript-eslint/explicit-member-accessibility": "off",
"import/no-extraneous-dependencies": 0,
"react/jsx-filename-extension": ["error", { extensions: [".jsx", ".tsx"] }],
"react/prop-types": [0]
},
"settings": {
"react": {
"version": "detect"
}
}
}