Automatic formatting of ES6(JS) with ESLint

Posted in tools, blogs on November 4, 2020 by Henk Verlinde ‐ 1 min read

Automatic formatting of ES6(JS) with ESLint

Introduction

When developing with Javascript, it is necessary to decide some rules. Use ESLint for code management.

Refer to http://cou929.nu/data/google_javascript_style_guide/ for management rules.

  1. Package management tool npm
  2. Use module ESLint
  3. Usage rules eslint-config-google

install node

Install node and make npm available.

Install ESlint and Rules Inside your working directory, run the following to install the required modules.

npm install eslint eslint-config-google

Write ESlint rules

In the working directory, create a [.eslintrc] file and write the following.

{
  "extends": ["google"],
  "rules": {
    "linebreak-style": ["error", "windows"]
  },
  "env": {
    "es6": true
  }
}

The file name for writing the test code is [test.js]. According to Google’s rules, it is not allowed to have "" in the argument name and without ; in the code.

// eslint-disable-next-line valid-jsdoc
/**
 * @add
 */
function add(x, y) {
  return x + y
}
document. write(add("Hello", "World"));

Formatting with ESlint

Execute the following command and check if it is modified according to the rules.

eslint --fix test.js

// eslint-disable-next-line valid-jsdoc
/**
 * @add
 */
function add(x, y) {
  return x + y;
}
document. write(add('Hello', 'World'));

that’s all.