I am a fan of JavaScript. I love how unopinionated it is. Funny thing is that 2 years ago this was the reason why I’ve been hating it. But I wrote some code since then, I got bored of strongly typed C# (writing custom class for every small DTO - annoying!), fell in love with the simplicity of Node.js and now I see world in different colors.

It’s common knowledge that writing JS can be tricky. Without types, interfaces and proper code hints making mistakes is inevitable. Also JS has its specific pitfalls like global variable scope, messed up this scope, variables shadowing and so on. There are some ways to solve those issues:

  • most obvious one - getting yourself better at JS by reading JS books and articles
  • practicing
  • learning ES6, a new version of JS that fixes some of the biggest JS problems
  • taking help from the JS community

I would like to focus on the last one.

Linters

JS community provided us with linters - static code analysis tools that help us find code problems that could cause unexpected behavior. The first linters I’ve been using were JSHint and JSLint. Thanks to IDE integrations those tools guarded my JS code by highlighting potential code problems. I was always up to date.

Then ESLint made its entrance.

ESLint

How is ESLint different? Well, it supports linting ES6 (a must in 2015) and it’s pluggable. Everyone can write their own plug-in to handle their own linting rules. That’s powerful and it’s the main reason I broke up with JSHint. Additionally, there is a lot of rules you can configure, even such small things like spaces after braces, empty lines, and so on.

The very first plug-in I’ve installed was eslint-plugin-react to lint my JSX files. Also I integrated ESLint with Sublime Text. I will present how to do it right now.

Installation

Installation of ESLint is pretty straightforward, there are two types of installation: local and global.

npm install eslint or npm install -g eslint to install globally.

Local installation means that you install it per project level and it will be stored in local node_modules folder.

When ESLint is installed globally you don’t need to install it on per project level, it will be available everywhere. I’ll be using this method in the example.

After installing ESLint, install React plugin (globally/locally - depending on the installation type you chose).

npm install -g eslint-plugin-react

On the Github page you can find all rules that can be enabled. I’m using all of them but that’s matter of taste.

Configuration

.eslintrc

It’s time to create .eslintrc file. I recommend to keep it on per project level. It’s worth to know though, that it is possible to have one global .eslintrc file and that every local file will overwrite global rules.

In unix-like systems you must add global .eslintrc to the home directory
In Windows to c:\Users\[username]

If you want you can use generic configuration from my Github repo. I’m still playing with the rules so it’s a work in progress.

After creating .eslintrc file you should be able to lint all your files.

eslint [file] [dir]

To lint all files in the current folder use:

eslint .

Now take a look on this config:

{
...

  "env": {
    "browser": true,
    "node": true,
    "es6": true,
    "jest": true
  },

  "ecmaFeatures": {
    "modules": true,
    "jsx": true,
    "blockBindings": true
  },

  "plugins": [
    "react"
  ]

...
}

env section allows me to use global functions and variables without getting an error, those are: document, window, require and so on.

es6: true option is the one that allows me to use new ES6 syntax, except modules. To enable modules, and jsx syntax you need to set modules and jsx to true in the ecmaFeatures section.

I’m using no-var rule that disallows usage of var keyword (why would you use it if you have safer let and const?), by enabling this rule I needed also to set blockBindings to true.

In plugins section you specify that you want to use previously installed React plugin that will support custom React rules.

More info about configuration can be found here.

Sublime Text

The last thing is to configure ESLint in Sublime Text 3. You need to do two things:

  1. Install Sublime Linter
  2. Install SublimeLinter-contrib-eslint plugin

The easiest way to do it is to use Package Manager.

Sublime Linter is a package that supports many linting plugins like jshint, csslint and many others. In my opinion it is a must have for Sublime.

After installing Sublime Linter you can configure the package by right-clicking on your source.

Sublime Linter options

If everything went right, you should see (depending on your Sublime Linter configuration) a warning every time you do something against the rules.

ESLint JSX error

Please drop a comment if you have questions and happy linting :)