Up and Running with ESLint — the Pluggable JavaScript Linter
Does the term “linting” sound familiar to you? It’s a process of using a tool to automatically check your code for potential problems. There are several key benefits you can reap from using such a tool.
- Keeping your code style consistent. Linters allow you to check you code style for issues like spacing, indentation and placement of braces. Once your team agrees on the coding style, it can be documented in a config file and checked automatically.
- Spotting potential errors and bad patterns. Linters can also be used to perform more advanced checks to uncover possible errors such as duplicate variables, unreachable code or invalid regular expressions. A warning from the linter will allow you to fix the errors before they even reach runtime.
- Enforcing quality. When you follow a certain style guide in your project, it is important to enforce it with tooling, otherwise, there will always be people tempted to cut corners. If a linting tool is wired into your build process, you may simply prevent the project from starting or being committed into your repository if there are unfixed errors.
- Saving time. The main benefit derived from the previous three is that linters save you effort during development. You’ll no longer need to spend valuable time arguing with your colleagues about a misplaced brace, and you might uncover a bug or two on early stages.
There has already been an article on the available linters for JavaScript but today we’ll focus on one of the tools mentioned by the author — ESLint.
ESLint
ESLint is a linting tool created back in 2013 by Nicholas C. Zakas and is currently the most powerful and extendable linter available for JavaScript. It provides a rich set of features which make it the ideal choice of your next linting tool. These features include:
- A multitude of rules which can be additionally configured to your taste.
- An API for creating your own rules.
- Numerous plugins with rules for specific libraries, frameworks and practices.
- Built-in support for ES6, ES7 and JSX.
- A recommended set of rules, as well as third-party configurations available to quickly get you started.
- Can be integrated with multiple editors and IDEs such as Sublime, Vim, JetBrains products and Visual Studio Code.
Setting Up a Project
Before you implement ESLint in your own existing projects, it would be wise to give it a trial run on something simple. Let’s set up a test project which we’ll use as a playground for further exploration. It will only have a single JavaScript file, the required npm modules and a couple of npm commands to run the linter.
First of all, we’ll generate an npm project (if you’re unsure about installing or using npm, see this tutorial). Create a new folder, open it in the terminal and run npm init. You will be prompted for some information about your project and once you answer all of the questions, npm will generate a new package.json file in the same folder.
Once we’re done with npm, we’ll also need a JavaScript file to lint. Let’s create one called scripts.js and save some code there:
function doGood() {
var message = "doing good!";
var message = 'or am i?';
console.log("doing something");;
var toDoList = ["List",,'things',"to do"];
}
You don’t need a linter to already spot some of the problems in the code. But hey, we don’t want to hear it from you or me, rather from ESLint itself.
Installation and Configuration
To install ESLint all you need to do is run npm i eslint --save-dev from the inside of your project folder. We could have installed ESLint globally, but I’m a firm believer that every project should bundle its own dependencies to make sure that every developer working on the project is using the same tools.
Once ESLint is installed, we need to configure it before running it for the first time. This can be conveniently done by running ESLint with the --init flag. Since we don’t have ESLint installed globally, the command will look like this:
./node_modules/.bin/eslint --init
This command will start the configuration wizard. The wizard will offer you three ways to create the configuration:
- Choosing Answer questions about your style will require you to answer some questions about your project setup, such as which environment are you targeting, ECMAScript version, modules, usage of CommonJS or JSX and some styling preferences. This is a quick way to set up a project with a minimal set of recommended rules.
- Choosing Use a popular style guide will allow you to base your configuration on one of the popular styles guides from Google, Airbnb and others. This option works well of you already follow or plan to base yours on one of these styleguides
- Inspect your JavaScript file(s) will try to derive the linting rules from your existing code base. Works well when you already have an existing code base which you wouldn’t want to change.
Since we’re just getting started with a new project, let’s choose the first option and sign up for the newest ECMAScript features:
The last question will allow you to choose the format of the configuration file. The options are JSON, YAML and JavaScript but we’ll go with JSON since it’s probably the most familiar to everybody.
Once you’ve answered all of the questions, ESLint will generate a .eslint.json file with the following content:
{
"env": {
"browser": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"sourceType": "module"
},
"rules": {
"indent": [
"error",
4
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
}
}
As you can see, it contains some environment configuration as well as the rules it asked you about. The extends property is set to eslint:recommended which means that ESLint will use its own set of recommended rules as a base which you can later override. We’ll leave it as is for demonstration purposes, but later you can either remove it, or replace it with a different third-party rule set.
Continue reading %Up and Running with ESLint — the Pluggable JavaScript Linter%
LEAVE A REPLY
You must be logged in to post a comment.