とりあえずESlistとprettierでコードフォーマットしたい人へ。Visual Studio Codeで動く設定ファイルをさらしてみる。

I was interested in the code format of ESlint and prettier.
There are a lot of articles that give a precise and polite commentary,
Since there aren’t many articles that simply describe the introduction method, I will write it.

(1) Preparation

Install Visual Studio Code and add eslint and prettier extensions.

(2) npm

Initialize npm.
Create a specific project folder, open it in Visual Studio Code,
In the console, type

npm init -y

(3) Installation of various packages

npm install -D eslint prettier eslint-config-prettier eslint-plugin-prettier babel-eslint

In addition to eslint and prettier, the following was added.

eslint-config-prettier ・ ・ ・ Execute in order of ESlint → Prettier, and give priority to Prettier shaping rules.
eslint-plugin-prettier ・ ・ ・ Execute Prettier on ESLint
babel-eslint ・ ・ ・ Enables use of non-standard JS

(4) Setting file configuration

Place .eslintrc.js directly under the project folder.
I personally prefer js over json. You can write comments.

.eslintrc.js

module.exports = {
  root: true, // Consider it a route rule. (Do not check for higher-level rules)
  env: {
    browser: true,
    node: true,
    jquery: false, // Set to true when using jQuery.
    es6: true
  },
  plugins: ['prettier'],
  extends: [
    'eslint:recommended', // Load the ruleset recommended by eslint
    'plugin:prettier/recommended', // Read prettier recommended ruleset
  ],
  parser: 'babel-eslint', // It is a non-standard specification.
  parserOptions: {
    sourceType: 'module', // Avoid NG in es6 module.
  },
  globals: { // Global variable
    $: false // If jquery of env is true, it is not necessary to set it to true
  },
  rules: { // Additional rules
    'prettier/prettier': [
      "error", {
        "printWidth": 120, // The maximum number of characters per line is 120.
        "semi": false, // No semicolon required
        "singleQuote": true, // Single quotation is OK
      }
    ],
  },
}

Now when you open the js file in Visual Studio Code,
A red wave underline will be drawn at the location of the error.

To shape individually, mouse over the underline and select “Quick Fix”.
To format the entire file, press eslint with ctrl + shift + p and select “ESlint: Fix all auto-fixable problems".

In addition, if you want to automatically format the file when saving, check “Eslint: Auto Fix On Save" from Settings-Extended-ESlint to automatically format it.