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:
Install ESLint
Use npm to add ESLint to your project
$ npm install --save-dev eslint |
Choose the right plugin
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:
WebStorm > Preferences > Languages and Frameworks > JavaScript > Code Quality Tools > ESLint
ESLint plugin Configuration
Go ahead and enable the plugin by clicking the checkbox
Path to Node Interpreter
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 ~/.nvm/versions/node/v5.6.0/bin/node
.
Path to ESlint
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
.
.eslintrc
Use the defaults for the remaining options:
- let Webstorm search for the
.eslintrc
file - Additional rules directory remains empty
- Extra eslint options remains empty as well
ESLint configuration
As it is, ESLint does not do much since we have not specified any rules.
Pick a Style Guide
For this example I will be using Google’s JavaScript Style Guide and the corresponding ESLint plugin. Airbnb’s Javascript Style Guide is just as popular so check it out and choose one you like.
Install the ESLint package locally:
$ npm install --save-dev eslint-config-google |
Setup the .eslintrc
The ESLint configuration resides in a .eslintrc
placed at the root of the project (alongside your package.json
).
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:
{ |
Start coding :)
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 !