#Tools #Node #WebStorm #OS X #ESLint

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:

.eslintrc
{
  "extends": "eslint-config-google"
}

ESLint allows you to remove the eslint-config- prefix so we can simply use:

.eslintrc
{
  "extends": "google"
}

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 !

#Tools #Node #WebStorm #OS X #ESLint