If ESLint is running in the terminal but not inside VSCode, it is probably
because the extension is unable to detect both the local and the global
node_modules folders.
To verify, press Ctrl+Shift+U in VSCode to open
the Output panel after opening a JavaScript file with a known eslint issue.
If it shows Failed to load the ESLint library for the document {documentName}.js -or- if the Problems tab shows an error or a warning that
refers to eslint, then VSCode is having a problem trying to detect the path.
If yes, then set it manually by configuring the eslint.nodePath in the VSCode
settings (settings.json). Give it the full path (for example, like
"eslint.nodePath": "C:\\Program Files\\nodejs") -- using environment variables
is currently not supported.
This option has been documented at the ESLint extension page.
If ESLint is running in the terminal but not inside VSCode, it is probably
because the extension is unable to detect both the local and the global
node_modules folders.
To verify, press Ctrl+Shift+U in VSCode to open
the Output panel after opening a JavaScript file with a known eslint issue.
If it shows Failed to load the ESLint library for the document {documentName}.js -or- if the Problems tab shows an error or a warning that
refers to eslint, then VSCode is having a problem trying to detect the path.
If yes, then set it manually by configuring the eslint.nodePath in the VSCode
settings (settings.json). Give it the full path (for example, like
"eslint.nodePath": "C:\\Program Files\\nodejs") -- using environment variables
is currently not supported.
This option has been documented at the ESLint extension page.
In my case, since I was using TypeScript with React, the fix was simply to tell ESLint to also validate these files. This needs to go in your user settings:
"eslint.validate": [ "javascript", "javascriptreact", "html", "typescriptreact" ],
Videos
I came from JetBrains universe, where everything is easy and IDEs code for you and you just have to sit and watch (ok no). So, I expected a linter for JS in VSCode but there isn't so when I use var it says nothing (it's supposely deprecated/bad practice).
I proceed to install ESLinter and it does nothing. YOu have to type bizarre commands, add a file to your project (I dont know how to do that etc.).
Should I go back to IntelliJ and pay 50€/month? I'm a little bit frustrated with this maximalist need to set things up. Can you enlight me?
This may be because of a change in version 48.2.0 of the extensions that was released on Feb 20. Changelog
Remove automatic configuration of eslint.nodePath and eslintrc.json
To get it back, there are some basic instructions in the SF VS Code docs: https://developer.salesforce.com/tools/vscode/en/lwc/writing/#linting
This is what I've done to set-up ESLint manually. You'll need Node.js installed.
package.json file
If your SFDX project doesn't have a package.json file, the process works better (less warnings) if you add one first.
In the root of your SFDX project run
npm init
See the LWC recipes repo for a reference package.json
ESLint
In the root of your SFDX project run
npm install eslint babel-eslint @lwc/eslint-plugin-lwc --save-dev
npm install eslint @salesforce/eslint-config-lwc --save-dev
At this point ESLint should be working in VS Code again.
One other thing is that when ESLint was auto-configured, it was using version 5 and currently the latest version is 6.8. Some of the recommended rules changed between version 5 and version 6, including the no-console rule. To get the no-console rule back, the .eslintrc.json file in your lwc directories needs to be updated to
{
"extends": ["@salesforce/eslint-config-lwc/recommended"],
"rules": {
"no-console": "error"
}
}
You get this error because eslint is not able to find salesforce/eslint-config-lwc module. You need to install eslint and related config modules on every project, or you can install them globally.
npm install -g eslint babel-eslint @lwc/eslint-plugin-lwc @salesforce/eslint-config-lwc
and here is the .eslintrc.json config file that can be used for linting LWC components:
{
"env": {
"browser": true
},
"parser": "babel-eslint",
"plugins": ["@lwc/eslint-plugin-lwc"],
"extends": ["@salesforce/eslint-config-lwc/recommended"],
"rules": {
"quotes": [2, "double", { "avoidEscape": true }],
"quote-props": [2, "consistent-as-needed"],
"lines-between-class-members": ["error", "always", { "exceptAfterSingleLine": true }]
}
}
For linting Aura components it's required to install different npm module:
npm install -g @salesforce/eslint-plugin-aura
and use slightly different .eslintrc.json config:
{
"env": {
"browser": true
},
"plugins": [ "@salesforce/eslint-plugin-aura" ],
"extends": [ "plugin:@salesforce/eslint-plugin-aura/recommended" ],
"rules": {
"strict": 0,
"no-unused-expressions": 0,
"quotes": [2, "double", { "avoidEscape": true }],
"quote-props": [2, "consistent-as-needed"],
}
}
I have started using typescript recently. The other day I found the linter started showing an error at the beginning of the tsconfig file (I can't remember what it was).
I restarted VSCode and it disappeared, and then noticed all linting had stopped. This included other projects, vanilla JS, and other languages (Shopify liquid for example).
I completely removed VSCode from my system including all related directories. This fixed it but it meant losing my installed extensions, etc.
A day later it's happened again. It began with the weird error in tsconfig, I restarted, and then the linter is no longer working.
I have tried restarting the linter server, and also installed the ESLint extension (I'm not sure why this is a thing seeing VSCode has a linter, right?). I tried installing eslint globally with npm install -g eslint and also created a config file in the project with npx eslint --init.
Has anyone had this issue and/or can suggest a fix other than re-installing VSCode?