How to use ESLint in Node.js Applications?

42,777 reads

@ amanhimself Aman Mittal 👨‍💻Developer ❤️ Nodejs, ReactNative, Expo | 📖 Blogger & Author

ESLint is an open source JavaScript linting utility that help you overcome developer errors as JavaScript is loosely-typed language. There are quite a few options such as JSHint and JSCS in Javascript community for code linting and this post doesn’t suggest that you cannot use them.

reactions

ESLint is designed to have all rules completely pluggable. That’s one of the primary reasons it came into existence. It allows developers to create their own linting rules. Every rule provided in the ESLint official guide is standalone rule and a developer at any point can decide whether to use a specific rule or not.

reactions

Installing

Note: You must have Node.js installed in order to access ESLint via it’s package manager npm.

reactions

For local installation to a project directory:

reactions

npm install eslint --save-dev

For a global installation in your working system:

reactions

npm install eslint -g

ESLint will now be available via

eslint

reactions

Configuration

command in your terminal.

Easiest way to configure it to setup a

.eslintrc

reactions

JSON file where are all the linting rules can be described.

An example of

.eslintrc

reactions

{ "env" : { "node" : 1 , "browser" : 1 }, "globals" : { "exampleGlobalVariable" : true }, "rules" : { "eqeqeq" : 1 }, "plugins" : [ ] }

reactions

If you installed eslint globally, you can also generate config file using

reactions

eslint --init

reactions

Other case, if you have installed it locally to a project, you will need to type in your terminal:

reactions

./node_modules/.bin/eslint --init

reactions

In both cases, you will be prompted with set of basic questions to generate

.eslintrc

reactions

file.

reactions

An example of file generated after above prompt:

reactions

{ "env" : { "browser" : true , "commonjs" : true }, "extends" : "eslint:recommended" , "rules" : { "indent" : [ "error" , "tab" ], "linebreak-style" : [ "error" , "unix" ], "quotes" : [ "error" , "single" ], "semi" : [ "error" , "never" ] } }

reactions

For detailed information on Configuration, read here.

reactions

Rules

Rules in ESLint are added individually. No rules are enforced by default. You have to specify rules explicitly, then only it will be enabled for the linting process.

reactions

You can find a complete list of rules in the official documentation here

reactions

After deciding which rules to include, you have to set there error levels. Each error level can be defined as following:

reactions

0 - Turn the rule off

- Turn the rule off 1 - Turn the rule on as a warning

- Turn the rule on as a warning 2 - Turn the rule on as an error

The difference between an error and a warning is the exit code that eslint will have when it finishes. If any errors are found, eslint will exit with a 1 exit code, otherwise it will exit with a 0. If you are linting within a build step this allows you to control which rules should "break your build" and which ones should be considered as warnings.

reactions

Learn how to configure rules in detail here.

reactions

Environments

The code you are writing might be suitable for a particular environment such as, you might be writing a REST API in Node.js application using Express Framework (Sinatra) and the frontend of that application is going to be built in AngularJS. Two different projects, two different environments and both can have separate eslint configurations in one file even though the client and the server are under one project directory that is been considered as root of your project.

reactions

How is it done? By setting the environment id to true in the "

env

.eslintrc

reactions

" section of

Linting

reactions

ESLint comes with a command line interface (CLI) to lint your files or directory.

reactions

elsint file.js eslint dir/

The output generated will be grouped by file, and will specify the

line:column

reactions

number, warning/error, reason for the error, and the name of the rule for each failure.

Use ESLint with your preferred Coding Style

reactions

ESLint personally does not promote any coding style. You can setup .eslintrc file to enforce coding style using style rules that you like.

reactions

You can also use ESLint with Style guides such as JavaScript Standard Style. You have to use extra plugin for that. The full guide can be found here (https://github.com/feross/eslint-config-standard).

reactions

To add a plugin to

.eslintrc

reactions

Some plugins for popular libraries: Angular | React

reactions

Another plugin, I find very useful is one variable per var just to maintain code consistency over a large/open-source project.

reactions

Thank you for reading. If you find this post useful, please hit the 💚 button so this story can reach out to more readers. If you’d like to talk about it, ping me on Twitter or check my other articles on Node.js.

reactions

Want to receive more articles like this one? Subscribe me here. Sometimes, I send “never seen before” content to my subscribers

reactions

Tags