Tuesday, 25 September 2018

ESLint VSCode plugin

If we install ESLint plugin for VSCode but not ESLint package itself, we'll get this error in VSCode:



In my post Introduction to ESLint I followed the ESLint guide for its local installation which instructs creating its config file in node_modules/.bin. This might not be the optimal (or better to say, working) solution if we want to use ESLint plugin for VSCode.

I installed that plugin and opened a directory of a test web application which contains JS files and has locally installed eslint. .eslintrc.json was created in .\node_modules\.bin. After couple of seconds upon opening project directory I got this error in ESLint output:

[Info  - 3:18:08 PM] ESLint server stopped.
[Info  - 3:18:08 PM] ESLint server running in node v8.9.3
[Info  - 3:18:08 PM] ESLint server is running.
[Info  - 3:18:11 PM] ESLint library loaded from: c:\dev\github\demo-html-css-js\node_modules\eslint\lib\api.js
[Error - 3:18:11 PM]
Failed to load plugin react: Cannot find module 'eslint-plugin-react'
Happened while validating C:\dev\github\demo-html-css-js\scripts\objects_demo.js
This can happen for a couple of reasons:
1. The plugin name is spelled incorrectly in an ESLint configuration file (e.g. .eslintrc).
2. If ESLint is installed globally, then make sure 'eslint-plugin-react' is installed globally as well.
3. If ESLint is installed locally, then 'eslint-plugin-react' isn't installed correctly.

Consider running eslint --debug C:\dev\github\demo-html-css-js\scripts\objects_demo.js from a terminal to obtain a trace about the configuration files used.


I found here that global .eslintrc located in my user directory could be the cause of this. And indeed, I found c:\Users\User\.eslintrc with the following content:

{
/* See all the pre-defined configs here: https://www.npmjs.com/package/eslint-config-defaults */
"extends": "defaults/configurations/eslint",
"parser": "babel-eslint",
"ecmaFeatures": {
"jsx": true
},
"plugins": [
"react"
],
"env": {
"amd": true,
"browser": true,
"jquery": true,
"node": true,
"es6": true,
"worker": true
},
"rules": {

"eqeqeq": 2,
"comma-dangle": 1,
"no-console": 0,
"no-debugger": 1,
"no-extra-semi": 1,
"no-extra-parens": 1,
"no-irregular-whitespace": 0,
"no-undef": 0,
"no-unused-vars": 0,
"semi": 1,
"semi-spacing": 1,
"valid-jsdoc": [
2,
{ "requireReturn": false }
],

"react/display-name": 2,
"react/forbid-prop-types": 1,
"react/jsx-boolean-value": 1,
"react/jsx-closing-bracket-location": 1,
"react/jsx-curly-spacing": 1,
"react/jsx-indent-props": 1,
"react/jsx-max-props-per-line": 0,
"react/jsx-no-duplicate-props": 1,
"react/jsx-no-literals": 0,
"react/jsx-no-undef": 1,
"react/jsx-sort-prop-types": 1,
"react/jsx-sort-props": 0,
"react/jsx-uses-react": 1,
"react/jsx-uses-vars": 1,
"react/no-danger": 1,
"react/no-did-mount-set-state": 1,
"react/no-did-update-set-state": 1,
"react/no-direct-mutation-state": 1,
"react/no-multi-comp": 1,
"react/no-set-state": 0,
"react/no-unknown-property": 1,
"react/prop-types":0,
"react/react-in-jsx-scope": 0,
"react/require-extension": 1,
"react/self-closing-comp": 1,
"react/sort-comp": 1,
"react/wrap-multilines": 1
}
}


I moved my .eslintrc.json from node_modules\.bin\ to the project's root and added in it:

"root": true

After this I re-opened project's workspace in VSCode and ESLint didn't report any errors and worked with no issues.
Post a Comment