[SalesForce] Why is ESLint not working properly for Lightning Web Components in VS Code and how to make it work

I'm trying to set up an environment to play around with LWCs. While doing a Analyze Your Code and Deploy It to Your Org unit from the Set Up Your Lightning Web Components Developer Tools module on Trailhead I got stuck with ESLint not working properly. It does not detect an additional problem with track as shown in the picture from the unit:

enter image description here

Also, every time I create a new LWC or save an existing one, I receive the following error in ESLint Output console for VS Code:

Error: Failed to load config "@salesforce/eslint-config-lwc/recommended" to extend from.

I noticed that in Trailhead unit contents of .eslintrc file look like this:

{
   "extends": "plugin:@salesforce/eslint-config-lwc/recommended"
}

While for my automatically created project the code goes as follows:

{
  "extends": ["@salesforce/eslint-config-lwc/recommended"]
}

Changing to Trailhead's version gives a different error:

[Info  - 18:09:42] Failed to load plugin '@salesforce/eslint-config-lwc' declared in 'force-app\main\default\lwc\.eslintrc.json': 
Cannot find module '@salesforce/eslint-plugin-eslint-config-lwc' 
Require stack: - C:\Users\TestUser\Documents\projects\code\testproject\__placeholder__.js 
Referenced from: C:\Users\TestUser\Documents\projects\code\testproject\force-app\main\default\lwc\.eslintrc.json

I have ESLint and Salesforce Extension Pack updated to the newest versions. VS Code is updated to the newest version as well. Tried restarting VS Code, tried restarting PC – no results.

Salesforce CLI works properly – I can evaluate every command.

Any ideas?

Best Answer

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"
  }
}
Related Topic