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.
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 am getting this error. There are a few similar cases that I have seen in Stackoverflow, but I checked and tried everything and the solutions didn't work.
The project itself works, it is just when I try to use pkg, I am getting the error:
> pkg src/index.js --target=latest-win-x64 --out-path ./dist --config pkg.json
:
:
> Error! This experimental syntax requires enabling the parser plugin: 'classPrivateMethods' (441:2)
E:\Proj\node_modules\node-webpmux\webp.js
All solutions basically say to add plugin-proposal-class-properties and plugin-proposal-private-methods, and specify them in the project json files (eslint, babel, package). I did that, and it doesn't help.
package.json:
"devDependencies": {
"#babel/core": "^7.14.8",
"#babel/eslint-parser": "^7.14.7",
"#babel/plugin-proposal-class-properties": "^7.14.5",
"#babel/plugin-proposal-private-methods": "^7.14.5",
"#babel/preset-env": "^7.14.8",
"#babel/preset-react": "^7.14.5",
"eslint": "^7.31.0"
},
.eslintrc.json:
{
"extends": "eslint:recommended",
"parser": "#babel/eslint-parser",
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module",
"babelOptions": {
"plugins": ["#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-private-methods"]
}
},
"plugins": [
"classPrivateMethods",
"classPrivateProperties",
"babel"
],
"env": {
"node": true
},
"rules": {
"no-console": 0,
"no-unused-vars": 1,
"babel/semi": 1
}
}
.babelrc:
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
[
"#babel/plugin-proposal-class-properties"
]
]
}
.pkg.json:
{
"name": "WA chatbot",
"version": "1.0.0",
"pkg": {
"assets": "./assets"
}
}
node version: v14.15.3
yarn: v1.22.10
Is there a solution for this?
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...
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 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"
}
}