I'm using ESLint and Prettier with the AirBNB style guide.
For the life of me I can't get it to stop yelling at me on every single line of my file to use spaces.
.eslintrc.json
{
"env": {
"browser": true,
"es2021": true
},
"extends": ["airbnb-base", "prettier", "plugin:node/recommended"],
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error",
"indent": ["warn", "tab"],
"quotes": ["warn", "single"],
"no-unused-vars": "warn",
"no-console": "off",
"no-tabs": "off",
"no-restricted-syntax": "off",
"func-names": "off"
}
}
package.json dependencies
"devDependencies": {
"autoprefixer": "^10.1.0",
"clean-css-cli": "^4.3.0",
"concurrently": "^5.3.0",
"cross-env": "^7.0.3",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-plugin-import": "^2.23.4",
"live-server": "^1.2.1",
"postcss-cli": "^8.3.1",
"postcss-import": "^14.0.2",
"pwa-asset-generator": "^4.1.1",
"tailwindcss": "^2.0.2"
}
settings.json
{
"editor.linkedEditing": true,
"editor.detectIndentation": true,
"notebook.cellToolbarLocation": {
"default": "right",
"jupyter-notebook": "left"
},
"prettier.tabWidth": 4,
"prettier.useTabs": true,
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"eslint.alwaysShowStatus": true,
"workbench.colorTheme": "Default Dark+",
"prettier.singleQuote": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
I have tabs set everywhere. This exact setup worked before (I had to factory reset my machine). I have my VS code settings synced, and the eslintrc and pacakge.json files should be the exact same as before...
Restarting VS code a second time worked...
Related
I'm setting up a new project with React in Javascript environment.
I creatd a project through CRA(version 18.2.0), and I am configuring ESLint and Prettier environments.
However, when I ran npm run start after setting the configuration, the error occurred.
What could be the workaround?
Failed to load plugin 'eslint' declared in '.eslintrc.js': Cannot find module 'eslint-plugin-eslint'
And this is my ESLint setup.
//.eslintrc.js
module.exports = {
env: {
browser: true,
es2020: true,
},
extends: [
"plugin:import/errors",
"plugin:import/warnings",
"plugin:prettier/recommended",
"plugin:eslint/recommended",
"plugin:react/recommended", // Uses the recommended rules from #eslint-plugin-react
"prettier",
],
parserOptions: {
ecmaVersion: "latest", // Allows for the parsing of modern ECMAScript features
sourceType: "module", // Allows for the use of imports
ecmaFeatures: {
jsx: true, // Allows for the parsing of JSX
},
},
rules: {
"react/prop-types": "off",
"no-extra-semi": "error",
"react/jsx-filename-extension": [1, { extensions: ["js", "jsx"] }],
"arrow-parens": ["warn", "as-needed"],
"no-unused-vars": "warn",
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "prod" ? "warn" : "off",
"import/prefer-default-export": ["off"],
"react-hooks/exhaustive-deps": ["warn"],
"react/jsx-props-no-spreading": [1, { custom: "ignore" }],
"react/jsx-key": "warn",
"react/react-in-jsx-scope": "off",
"import/extensions": [
"error",
"ignorePackages",
{
"js": "never",
"jsx": "never"
}
],
},
}
//package.json
"devDependencies": {
"eslint": "^8.2.0",
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0"
}
how can i solve it?
if you did not eject your CRA, you do not need to install eslint yourself as it is in dependency of react-script. Pls check how to extend default eslint config here:
https://create-react-app.dev/docs/setting-up-your-editor/#extending-or-replacing-the-default-eslint-config
I want to configure eslint import/order to a custom configuration, but I cannot make it work in react typescript files.
Here is my rule:
"import/order":[
"error",
{
"groups": ["builtin", "external", "internal"],
"pathGroups":[{
"pattern": "react",
"group": "external",
"position": "before"
}],
"pathGroupsExcludedImportTypes": ["react"],
"newlines-between": "always",
"alphabetize": {
"order": "asc",
"caseInsensitive":true
}
}
]
.eslintrc.json file:
{
"parser": "#typescript-eslint/parser",
"parserOptions": {
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 6,
"project": "./tsconfig.json"
},
"env": {
"browser": true,
"jest": true,
"es6": true
},
"extends": [
"airbnb-typescript",
"airbnb/hooks",
"prettier",
"prettier/react",
"plugin:#typescript-eslint/recommended",
"plugin:import/errors",
"plugin:import/warnings",
"plugin:import/typescript",
"plugin:jest/recommended",
"prettier/#typescript-eslint",
"plugin:prettier/recommended"
],
"plugins": [
"react",
"react-hooks",
"import",
"#typescript-eslint",
"prettier",
"jest"
],
"rules": {
"no-console": 2,
"prettier/prettier": [
"error",
{
"singleQuote": true
}
],
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "off",
"react/jsx-filename-extension": [
"off"
],
"react/jsx-closing-bracket-location": [
1,
"tag-aligned"
],
"import/no-extraneous-dependencies": 1,
"import/order":[
"error",
{
"groups": ["builtin", "external", "internal"],
"pathGroups":[{
"pattern": "react",
"group": "external",
"position": "before"
}],
"pathGroupsExcludedImportTypes": ["react"],
"newlines-between": "always",
"alphabetize": {
"order": "asc",
"caseInsensitive":true
}
}
]
},
"settings": {
"import/resolver": {
"node": {
"extensions": [".ts", ".tsx"],
"moduleDirectory": [
"node_modules",
"src/"
]
},
"typescript": {
"alwaysTryTypes": true
}
},
"react": {
"version": "detect"
}
}
}
Current package.json dependencies
"#typescript-eslint/eslint-plugin": "^4.9.1",
"#typescript-eslint/parser": "^4.9.1",
"eslint": "7.2.0",
"eslint-config-airbnb": "18.2.1",
"eslint-config-airbnb-typescript": "^12.0.0",
"eslint-config-prettier": "^7.0.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^24.1.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.2.0",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "4.0.0",
Also in tsconfig.json
"baseUrl": "src",
The rule works fine in .ts files:
rule-working-ts
But it does not work with .tsx files.
Fixed by adding this dependency
yarn add -D eslint-import-resolver-typescript
I am currently upgrading some very old ESLint and Babel packages and ESLint has started complaining about my shorthand React Fragments and I'm not sure why?
When using <React.Fragment> I get an error saying it prefers shorthand (Which is what I want) and can quickfix into shorthand fragments <>. But then I still receive the below error.
I think I may have some missing config, or dependency, or maybe something is just not be set up correctly?
It's probably also worth mentioning that my code compiles correctly and still works even with the linting error.
The ESLint Error:
Parsing error: Unexpected token
52 | return (
53 | <div>
> 54 | <>React shorthand fragment doesn't seem to work</>
| ^
55 | <Rest of code/>
56 | </div>
57 | );eslint
My Babel/ESLint Packages:
"#babel/cli": "7.11.6",
"#babel/core": "7.11.6",
"#babel/node": "7.10.5",
"#babel/plugin-proposal-class-properties": "7.10.4",
"#babel/plugin-proposal-export-default-from": "7.10.4",
"#babel/plugin-transform-react-jsx": "7.10.4",
"#babel/preset-env": "7.11.5",
"#babel/preset-react": "7.10.4",
"#babel/runtime": "7.11.2",
"babel-eslint": "8.2.6",
"babel-jest": "20.0.3",
"babel-loader": "8.1.0",
"babel-plugin-transform-react-constant-elements": "6.23.0",
"babel-plugin-transform-react-remove-prop-types": "0.4.6",
"babel-polyfill": "6.23.0",
"babel-preset-env": "1.6.0",
"babel-preset-stage-1": "6.24.1",
"eslint": "7.10.0",
"eslint-config-airbnb": "18.2.0",
"eslint-config-prettier": "2.10.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsx-a11y": "6.3.1",
"eslint-plugin-react": "7.21.3",
"eslint-watch": "3.1.2",
My ESLint Config:
{
"env": {
"es6": true,
"browser": true,
"node": true,
"jquery": true,
"jest": true
},
"extends": ["plugin:react/recommended", "airbnb", "prettier", "prettier/react"],
"parser": "babel-eslint",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": ["react"],
"rules": {
"indent": ["error", 4],
"semi": "error",
"arrow-body-style": 0,
"no-console": ["error", { "allow": ["warn", "error"] }],
"quotes": ["error", "single", { "avoidEscape": true }],
"no-multi-spaces": "error",
"react/jsx-indent": 0,
"react/jsx-indent-props": 0,
"react/jsx-filename-extension": 0
},
"globals": {}
}
My Babel Config:
{
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-export-default-from",
"#babel/plugin-transform-react-jsx"
]
}
I'm trying to add eslint-plugin-testing library to a project to catch common errors in our #testing-library/react tests. I've followed the instruction steps, yet I cannot get it to catch errors in the test files.
For example, I manually turn on the no-debug rule, add a debug() statement in a .test.tsx file, and run the linter. It does not catch any mistakes in the file.
If I break rules from other plugins, they are caught, so I suspect I may have something wrong in how I added the testing-library plugin to my config.
package.json
{
"dependencies": {
"react": "16.12.0",
"react-dom": "16.12.0"
},
"devDependencies": {
"#babel/core": "7.7.0",
"#babel/preset-react": "7.0.0",
"#babel/preset-typescript": "7.1.0",
"#testing-library/react": "9.1.3",
"#typescript-eslint/eslint-plugin": "2.15.0",
"#typescript-eslint/parser": "2.15.0",
"eslint": "6.8.0",
"eslint-plugin-cypress": "2.10.3",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-react": "7.19.0",
"eslint-plugin-react-hooks": "2.3.0",
"eslint-plugin-testing-library": "3.0.0",
"typescript": "3.7.3"
}
}
.eslintrc
{
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"modules": true
}
},
"env": {
"browser": true,
"es6": true,
"jasmine": true,
"jest": true,
"jquery": true,
"node": true
},
"plugins": [
"#typescript-eslint",
"jsx-a11y",
"react-hooks",
"react",
"testing-library"
],
"extends": [
"eslint:recommended",
"plugin:jsx-a11y/recommended",
"plugin:react/recommended",
"plugin:testing-library/recommended"
],
"rules": {
"#typescript-eslint/no-unused-vars-experimental": "off",
"no-unused-vars": "off",
"react-hooks/exhaustive-deps": "warn",
"react-hooks/rules-of-hooks": "error",
"react/display-name": "off",
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error",
"react/prop-types": "off",
"testing-library/no-await-sync-query": "error",
"testing-library/no-debug": "error"
},
"settings": {
"react": {
"version": "detect"
}
}
}
Couple of things I've seen in your setup:
you are using "plugin:testing-library/recommended" preset, but the best one for React is "plugin:testing-library/react" as it will enable recommended + react ones. That will enable all the rules with "React" badge under configuration columns
after you change this, you can remove both rules you manually added in your eslint config as they are automatically enabled by react preset
I'm not sure what you mean by "If I break rules from other plugins, they are caught". Let me know if enabling react preset fix this for you. If not, it would be nice to have a small repo to reproduce the error.
I have node.js project, and started with eslint configuration.
There is .eslintrc.json
{
"parser": "babel-eslint",
"extends": [
"airbnb",
"plugin:node/recommended",
"plugin:security/recommended",
"prettier",
],
"env": {
"node":true,
"commonjs": true,
"es6": true,
},
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"plugins": [
"prettier"
],
"rules": {
"prettier/prettier": "error",
"node/exports-style": ["error", "module.exports"],
"node/file-extension-in-import": ["error", "always"],
"node/prefer-global/buffer": ["error", "always"],
"node/prefer-global/console": ["error", "always"],
"node/prefer-global/process": ["error", "always"],
"node/prefer-global/url-search-params": ["error", "always"],
"node/prefer-global/url": ["error", "always"],
"node/prefer-promises/dns": "error",
"node/prefer-promises/fs": "error",
},
}
And package.json
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "server.js",
"license": "ISC",
"lint-staged": {
"*.{js,jsx}": [
"eslint --fix",
"git add"
],
"*.scss": [
"stylelint --fix",
"git add"
]
},
"scripts": {
"development": "nodemon",
"test": "echo \"Error: no test specified\" && exit 1",
"start": "babel-node server.js",
"eslint": "eslint config '**/*.js' --ext .js",
"prettier": "prettier '**/*.js' --write",
"stylelint": "stylelint '**/*.js'"
},
"author": "",
"dependencies": {
"#babel/polyfill": "^7.6.0",
"body-parser": "^1.19.0",
"cookie-parser": "^1.4.4",
"cors": "^2.8.5",
"express": "^4.17.1",
"helmet": "^3.21.0",
"history": "^4.9.0",
"mongoose": "^5.6.13",
"nodemon": "^1.19.2"
},
"devDependencies": {
"#babel/cli": "^7.6.4",
"#babel/core": "^7.6.0",
"#babel/node": "^7.6.3",
"#babel/plugin-proposal-class-properties": "7.3.3",
"#babel/plugin-proposal-json-strings": "7.2.0",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/plugin-syntax-import-meta": "7.2.0",
"#babel/preset-env": "^7.3.1",
"#commitlint/cli": "^7.5.2",
"#commitlint/config-conventional": "^7.5.0",
"autoprefixer": "^9.4.7",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.6",
"babel-preset-env": "^1.7.0",
"cross-env": "^5.2.0",
"eslint": "^6.4.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-prettier": "^6.3.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-prettier": "^3.1.0",
"husky": "^1.3.1",
"lint-staged": "^8.1.4",
"prettier": "^1.18.2",
"rimraf": "^2.6.3",
"stylelint": "^10.1.0",
"stylelint-config-standard": "^18.3.0",
"stylelint-order": "^3.1.0"
}
}
When I try to write yarn run eslint from directory root I have an error :
$ yarn run eslint
yarn run v1.17.3
warning ../package.json: No license field
$ eslint config '**/*.js' --ext .js
Oops! Something went wrong! :(
ESLint: 6.4.0.
Failed to read JSON file at
/Users/vladyslavsymonenko/Chess/server/.eslintrc.json:
Cannot read config file: >/Users/vladyslavsymonenko/Chess/server/.eslintrc.json
Error: Unexpected token ] in JSON at position 1040
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about >this command.
I'm really confused with results, please help me )
You need to remove all trailing commas (like "prettier", on line 7) from your .eslintrc, since it is not valid JSON:
{
"parser": "babel-eslint",
"extends": [
"airbnb",
"plugin:node/recommended",
"plugin:security/recommended",
"prettier"
],
"env": {
"node": true,
"commonjs": true,
"es6": true
},
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"plugins": [
"prettier"
],
"rules": {
"prettier/prettier": "error",
"node/exports-style": ["error", "module.exports"],
"node/file-extension-in-import": ["error", "always"],
"node/prefer-global/buffer": ["error", "always"],
"node/prefer-global/console": ["error", "always"],
"node/prefer-global/process": ["error", "always"],
"node/prefer-global/url-search-params": ["error", "always"],
"node/prefer-global/url": ["error", "always"],
"node/prefer-promises/dns": "error",
"node/prefer-promises/fs": "error"
}
}