【VSCode】ESLint（fixあり/fixなし）とPrettierを保存時に走らせる

2021年1月12日追記

本稿の方法はすでに推奨されない方法となっている箇所がございますので何卒ご了承ください。詳細は以下をご覧ください。

---

eslint-plugin-prettierは現在Prettier公式にて

These are generally not recommended, but can be useful in certain circumstances.
（日本語訳：これらは一般的には推奨されませんが、特定の状況で役立つ場合があります。 - Google翻訳より）

と言及され、特定の状況以外では非推奨となりました。

概要

VSCode上でESLintとPrettierを保存時に走らせます。
Node.jsとVSCodeのインストールは終了しているものとします。

ESLint
Prettier

目次

• ESLintの設定
• Prettierの設定
• ESLintとPrettierの連携
• 保存時の設定

ESLintの設定

ライブラリインストール

必要なライブラリをインストールします。

npm install -D eslint typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser

以下のライブラリはTypeScript用です。
TypeScript
@typescript-eslint/eslint-plugin
@typescript-eslint/parser

設定ファイル作成

ライブラリをインストールしたら設定ファイルを作成します。

./node_modules/.bin/eslint --init

各自の環境に合わせて質問に回答します。
本稿では以下の設定をおこないます。

• 構文チェックだけではなくスタイルも整える。（今回はAirbnb）
• TypeScriptを使用する。
• 設定ファイルはJSONで作成する。

? How would you like to use ESLint? To check syntax, find problems, and enforce code stylede style
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? None of these
? Does your project use TypeScript? Yes
? Where does your code run? Browser
? How would you like to define a style for your project? Use a popular style guidecript
? Which style guide do you want to follow? Airbnb: https://github.com/airbnb/javascript
? What format do you want your config file to be in? JSON
? Would you like to install them now with npm? Yes

（省略）

Successfully created .eslintrc.json file in [現在のパス]

.eslintrc.jsonが作成されました。
.eslintrc.jsonを編集し、TypeScriptの推奨ルールを設定します。

.eslint.json

    "extends": [
        "airbnb-base",
        // 以下を追加する。
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended"
    ],

ターミナルから実行

ESLintをとりあえず実行できるようになったので試します。
ESLintの初期設定ではconsole.log()を使用すると警告が出るので以下のファイルを作成しESLintを実行します。

src/sample.ts

const func =()=>{
console.log("Hello world")
}

./node_modules/.bin/eslint src/sample.ts

\src\sample.ts
  1:7   warning  'func' is assigned a value but never used        @typescript-eslint/no-unused-vars
  1:12  error    Operator '=' must be spaced                      space-infix-ops
  1:13  warning  Missing return type on function                  @typescript-eslint/explicit-function-return-type
  1:14  error    Missing space before =>                          arrow-spacing
  1:17  error    Missing space after =>                           arrow-spacing
  1:18  error    Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  2:1   error    Expected indentation of 2 spaces but found 0     indent
  2:1   warning  Unexpected console statement                     no-console
  2:13  error    Strings must use singlequote                     quotes
  2:27  error    Missing semicolon                                semi
  2:27  error    Expected linebreaks to be 'LF' but found 'CRLF'  linebreak-style
  3:2   error    Missing semicolon                                semi
  3:2   error    Newline required at end of file but not found    eol-last

✖ 13 problems (10 errors, 3 warnings)
  10 errors and 0 warnings potentially fixable with the `--fix` option.

警告とエラーがたくさん出ているのでESLintの設定はひとまず終了です。

Prettierの設定

ライブラリインストール

ESLint同様必要なライブラリをインストールします。

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

eslint-config-prettier
eslint-plugin-prettier¹

設定ファイル作成

.eslintrc.jsonと同じ階層に.prettierrc.jsonを手動で作成します。
本稿では動作していることが分かりやすいのでインデントをタブにします。

.prettierrc.json

{
    "useTabs": true,
    "tabWidth": 4
}

ターミナルから実行

作成したsrc/sample.tsをフォーマットします。

src/sample.ts

const func=()=>{
console.log("Hello world")
}

実行します。
--writeは整形してファイルを上書き保存してくれるオプションです。

./node_modules/.bin/prettier src/sample.ts --write

ファイルを見るとタブでのインデントも末尾のセミコロンも挿入されています。

src/sample.ts

const func = () => {
    console.log("Hello world");
};

Prettierの設定は終了です。

ESLintとPrettierの連携

このままではESLintとPrettierの設定がバッティングする可能性があるので.eslintrc.jsonにESLintとPrettierの連携を設定します。
あわせてPrettierの推奨ルールも設定します。

.eslintrc.json

    "extends": [
        "airbnb-base",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended",
        // 以下を追加する。
        "plugin:prettier/recommended",
        "prettier"
    ],

Prettierのプラグインは必ずextends内の一番下に書く必要があるらしいので則ります。

保存時の設定

VSCodeのプラグインをインストールします。

ESLint

Prettier - Code formatter

ここからは以下の2通りの方法があります。

• ESLintのfixを保存時に実行し、fixでフォーマットをおこなう場合
• ESLintのfixを保存時に実行せず、VSCodeのPrettierのプラグインでフォーマットのみおこなう場合

順に記載します。

ESLintのfixを保存時に実行し、fixでフォーマットをおこなう場合

VSCodeの.setting.jsonを編集します。
"editor.formatOnSave"をfalseに設定するとESLintのfixが対象でないファイルのフォーマットが行われないため、ESLintでfixを実行するファイルのみ"editor.formatOnSave"をfalseにしましょう。

.setting.json

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "[typescript]": {
        "editor.formatOnSave": false
    }
}

以下のファイルを作成し、保存します。

src/sample.ts

const func =()=>{
console.log("Hello world")
}

フォーマットされました。

ESLintのfixを保存時に実行せず、VSCodeのPrettierのプラグインでフォーマットのみおこなう場合

VSCodeの.setting.jsonを編集します。

.setting.json

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
}

以下のファイルを作成し、保存します。

src/sample.ts

const func =()=>{
console.log("Hello world")
}

こちらでも問題なくフォーマットされます。

設定のバッティングについて

.eslintrc.jsonとprettierrc.jsonで同じルールで異なる設定をしている場合は.eslintrc.jsonの設定が優先されます。
例えばESLintではシングルクオートを使用する設定を記載し、Prettierではダブルクオートを使用する設定を記載した場合はシングルクオートに置き換えられます。

---

最低限の設定は以上です。手軽に統一されたコードを書きましょう！

---

1. 2021年1月12日現在非推奨。追記参照。 ↩