Chris Zingel

Learn to love the Javascript Linter.

October 21, 2015

Image 9

I have had mixed success with Linters in the past. If the Linter has been adopted from the project’s inception then it usually works out as the prescribed Linter's style is adopted. You may not agree with it but it is easier to go along to get along

Adding Linter to an Existing Project

However it can end in tears when the Linter is added to an existing project.You can find yourself drowning in a sea of warnings, with no easy way to identify those issues that must be fixed versus issues reflecting a styling preference. Ideally, you only want to show the “important” issues, and only after these have been fixed, do you want to add the additional rules. This is really challenging with the Linters that I have used in the past, with their inflexible configuration options.

ESLint

I was put onto ESLint after listening to Javascript Jabber. Their main project goal is to make it as easy as possible to configuration. Personally, I think that they have nailed it.

Let's go through two configurations to see how ESLint can be added to an existing project versus a green-acre project.

Example (1) of Eslint being added to an Existing Project

This is a large AngularJS project with over 10K lines of Javascript. This hasn't previously been Linted.

.eslintrc

{
  "env": {
    "browser": 1 },
    "rules": {
      "quotes": [1, "double"],
      "camelcase": [0],
      "global-strict": [2, "always"]
    },
    "globals": {
      "angular": 1,
      "_": 1
    }
}

The line browser global variables lets the Linter know that the code runs in the browser rather than on the server. The Linter will now assume that a number of objects exist ie window

The Quotes Rule is modified to use double quotes, and the Camel Case Rule has been turned off as it was producing too many warnings. This would be a good example of a rule that I would add back once the "important" warnings have been fixed.

The global variables in the configurations lets the Linter know that these objects exist in the global space. In this case, I am guaranteeing the Linter that the Underscore Global Varible exists as I have previously added the Underscore Library to the project.

Example (2) of Eslint being added new project

In this example, this was a green field project using AngularJS 1.3, which interestingly is moving away from scopes to more of a class structure. The Ecmascript 6 Linting rules are added with the line "es6": 1 The adoption of Ecmascript 6 (via Babel) has been in preparation to move to AngularJS 2.

.eslintrc

{
  "env": {
    "es6": 1,
    "browser": 1 },
    "plugins": ["angular"],
    "rules": {
      "no-use-before-define": [2, 'nofunc']
    },
    "globals": {
      "$": 1,
      "angular": 1
    }
}

The plugins angular pulls in additional rules that are particular to AngularJS

Summary

I have found it easy to configure ESLint for existing and new projects. It has improved my coding enjoyment and I am grateful to the ESLint development team.

Inspiration