Setting up ESLint in WebStorm turned out to be a bit more complicated (hear time consuming) that I initially thought it would be.
Here are the steps:
Use npm to add ESLint to your project
$ npm install --save-dev eslint
WebStorm ships with an ESLint plugin built in. I suggest you use it. I have tried to use a 3rd party plugin and ran into several issues I have not been to resolve.
In OS X, the plugin is located in:
Go ahead and enable the plugin by clicking the checkbox
Fill in the node path. On OS X, the standard path is
/usr/local/bin/node, if you are using NVM, it will be something like
Fill in the path to ESlint by setting the path to the eslint node package folder installed locally. Do not set the path to the
/bin subdirectory like we did with node. I also suggest you don’t use a globally installed ESLint package if you have one.
The correct path should look something like
<path to project>/node_modules/eslint.
Use the defaults for the remaining options:
- let Webstorm search for the
- Additional rules directory remains empty
- Extra eslint options remains empty as well
As it is, ESLint does not do much since we have not specified any rules.
$ npm install --save-dev eslint-config-google
The ESLint configuration resides in a
.eslintrc placed at the root of the project (alongside your
In the config file, the only thing we need to do is to tell ESLint to use the Google’s style guide:
ESLint allows you to remove the
eslint-config- prefix so we can simply use:
That’s it, you are set. You might have to restart WebStorm if it does not pick up the new configuration immediately but after that you are good to go.
Any problem ? Let me know in the comments. Thanks for reading !