Let’s see an example. I can make linter notify me if I did forget to add a semicolon at the end of each statement. And it will show up in my editor
But there are some more serious rules than the semicolons-guarding. Misspelled arguments, using undefined stuff, leaving dead code. The list of configurable rules is huge.
In a project I am working right now, there is a big problem of globals that comes in window during runtime of our front end. ESLinter helped me to catch and fix all pieces of code using those globals in few minutes.
Also react plugin is helpful when upgrading from older versions of React.
In this post, I will describe how to setup ESLint and integrate it with:
- SublimeText 3
- Jetbrains editors like RubyMine, WebStorm, Intellij.
Setup a linter
In this guide I will be encouraging you to use eslint-config-airbnb which is a great starting configuration. It also requires us to use 3 plugins with it:
Each one of these plugins comes with additional rules for code linting.
If you are using Node through NVM, then you may have a some troubles with getting everything up and running. I tried to solve the problems on different environments and failed with finding one good solution.
The easiest way to get started is to install the linter globally. Do this if you are using Vim or don’t want to store ESLint in your project’s dependencies.
npm install -g eslint babel-eslint eslint-config-airbnb eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-import
If you can, you should keep ESLint inside your project. To do so, just run this inside your project’s package:
npm install --save-dev eslint babel-eslint eslint-config-airbnb eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-import
Ok, so now is the time to create a .eslintrc file inside of your project directory.
Note that env parameters are an example. Adjust it accordingly to your environment’s needs.
You can now try to run linter using a console:
# Using global
# From installed module
Integration with editors
Just follow instructions below and make sure you open your code with .eslintrc in the root of project’s directory.
Next, install these packages:
Now get to the user settings of SublimeLinter. Add this line into syntax_map object:
You can also open some .js file and change the default syntax to babel.
Restart Sublime, open some problematic file…
Get into Preferences -> Install screen and install those 3 packages:
Now restart the editor.
In sake of being brief in this guide, I assume you can configure your Vim and install Syntastic on your own.
I mentioned before that you should use linter from global package rather than a local package when using vim. There are 2 reasons for that:
- I could not find any working configuration on the Internet that would make it working,
- eslint is really slow and linting causes input lockdown for the processing time. We can solve this issue…
As the longest piece of linter runtime is a startup, you can run eslint using a daemon.
npm install -g eslint_d
I don’t think adding eslint_d as a dependency (just for Vim users) to a project is a necessarily good thing.
And lastly, add some config to ~/.vimrc
Refresh config, save checked file and…
WebStorm / RubyMine / IntelliJ
Although I used ESLint on RubyMine, the setup for WebStorm and IntelliJ should be the same. And trust me, this will be a quick one. Just set preferences like on the screenshot.
Apply settings, wait a bit and here it is.
I can’t use Emacs (I tried and failed miserably), so I didn’t even try to get ESLint running on it. However, this article may be useful for you.
I hope this blog post will be handy for you and I convinced you to use ESLint. Feel free to comment or leave me a line on Twitter.
- Lint Like It’s 2015 — Dan Abramov
- How to set up Atom and WebStorm for Meteor ES6 (ES2015) and JSX — Robert Dickert