There are a few tools available to help you to write quality code. In this post, we will show you how to set up Node.js project with EditorConfig and ESLint.

EditorConfig is currently one of the most popular tools to maintain consistent coding styles between different editors or IDEs (for example, between ATOMS and Visual Studio Code). Some of the editors already have it pre-installed. For others, you need to install it. For example, here is the instruction for Visual Studio Code.

Once your editor has the plugin for EditorConfig installed, all you need to do is to create a .editorconfig file in the root directory of your project. You can check all the options available in the official website here.

EditorConfig

First of all, you need to set root = true so that the project uses this config file for all the target files. The target files are defined in []. In this example, the first set of rules applies to all js, yml and json files and the second set to .md file.

The line ending file format is line feed (lf), which is used for Unix/Linux. Alternatively, you can use carriage return and line feed (crlf) for Windows or carriage return (cr) for Mac in some case.

It also adds a newline at the end of the code if there is none, removes trailing whitespace and make all indentation to tab. The character set is utf-8

The change will happen automatically once you save your code file.

root = true

[*.{js,yml,json}]
end_of_line = lf
insert_final_newline = true
charset = utf-8
indent_style = tab
trim_trailing_whitespace = true

[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

ESLint

Linters are tools to analyse source code to flag syntactical error. There are a few Javascript linters available. ESLint is probably the most widely used one at the moment.

First of all, we need to install eslint as dev dependencies for your project.

npm i eslint --save-dev

or

yarn add eslint --dev

Then, add scripts in package.json so that we can run it with npm command.

"scripts" : {
  "eslint": "eslint"
},

ESLint needs a config file (.eslintrc) because no rules are enabled by default. It is fully customisable and you can implement your own code standard with the config file. You can also use the pre-existing ones by extension. The best place to start with is to use recommended rule by extending the rule.

The config file is a Javascript file. Here is the example of how you can use it. The extension can be added by the extends property. You can specify ECMA version in the parser option. The example uses 2018. For ES6, you can use es6.

{
  "parserOptions" : {
    "ecmaVersion": "6",
    "sourceType": "module"
  },
  "env": {
    "node": true,
    "es6": true
  }
  "extends":"eslint:recommended",
  "rules": {
    "no-empty": "error",
    "no-multiple-empty-lines": "warn",
    "no-var": "error",
    "perfer-const": "error"
  }
}

You can also ignore a certain file or entire folder with .eslintingore file. This works exactly the same as .gitignore file. The example below ignores a file called reference.js and the entire node_modules folder.

node_modules/*
reference.js

To check run the linter you can simply use npm command. You need to add the path when you run it. The dot means all the files except the ones in .eslintignore.

In most cases, using the code editor’s extension plug in to do lint check rather than running it every time you edit your code. But, in some situations, knowing how to set up and run eslint this way can be helpful.

npm run eslint .

Fun!