Setting up ESLint with Google Standards and Salesforce LWC standards in VSCode

If you are part of a team of developers and want to ensure coding standards, ESLint is one of the easiest and most reliable ways to do so. The problem is, ESLint can be a bit of a pain to get working right. I have outlined the steps you need to take in order to start enforcing your coding standards without having to remember when to type 2 spaces or 4! Because no one really wants to spend any extra keystrokes on typing extra spaces. If you are not doing Lightning Web Component development on the Salesforce platform, you can skip the LWC standards part of these steps.

Step One… from your command line, in your project root type the following:

>npm init (Accept the defaults as you are guided through the prompts)

Step Two….

>npm install eslint –save-dev (this will set ESLint to your local directory)

Step Three…

./node_modules/.bin/eslint –init

(follow instructions, selecting appropriately and finally selecting Google for style)

Step Four….

npm install eslint @salesforce/eslint-config-lwc –save-dev

Step Five…

In `.eslintrc.json` (in project root), paste the following:

{

  “extends”: [“@salesforce/eslint-config-lwc/recommended”,”google”]

}

If you are lucky and you don’t have a global install of the same modules, ESLint may be working perfectly for you at this point… e.g. your JS files now look like one giant error… yay!

If you are normal, and you have a mix of global and local ESLint installs going on, follow the next steps to clean up your project and make the angry ESLint error at the bottom of your screen go away….

*if ESLInt is throwing an error due to the module path not found, go to Preferences ==> Settings ==> Workspace ==> Extensions ==> ESLint ==> ESLint: Node Path 

Edit the file to point to your local config i.e. if it looks like this (global):

 “eslint.nodePath”: “homepath/.vscode/extensions/salesforce.salesforcedx-vscode-lwc-46.10.0/node_modules”,

Change it to the relative to your machine version of this:

“eslint.nodePath”: “homepath/git/myDirectory/force-app/main/default/lwc/.eslintrc.json”

Now make sure your file associations for JS files is set to use ESLint and auto format on save and you are off to the races!

For more information on the modules I am using here see:

https://www.npmjs.com/package/eslint-config-google

and…

npmjs.com/package/@salesforce/eslint-config-lwc

Happy coding!