ESLint + Prettierの導入（パッケージ版 + VSCodeプラグイン版）

導入環境

Tool	Version
MacOS(Ventura)	13.0
VSCode	1.78.2
npm	9.5.1

はじめに

フロントエンドやるなら入れておくべき便利ツールを入れます。
コード品質を守るために（楽をするために）是非入れましょう！

ツール説明

ESLint is ナニ？

• JavaScript / Node の静的解析ツールです
  要するに、コードで問題のある箇所を指摘してくれます。
  （React/Vue等のJavaScriptフレームワークも利用可能）

Prettier is ナニ？

• コードフォーマッター（悪いコードを整形してくれる）
  JavaScript、TypeScript、React、HTML、CSSなどに対応しています。
  （ちなみに読み方は、プリティア です。）

パッケージ版 と VSCodeプラグイン版の棲み分け

• パッケージ版
  ファイルを指定してコマンド実行する
• VSCodeプラグイン版
  VSCodeで開いたファイルにリアルタイム実行 or ファイル保存時に実行する

ステップ

• パッケージ版の導入

  • ESLintのインストール→設定→実行をする
  • Prettierのインストール→設定→実行をする
  • これらのパッケージを併用する場合の機能競合を解消する

• VSCodeプラグイン版の導入

  • ESLint + Prettierを追加する
  • VSCodeに設定を追加する

ESLint

導入効果

• バグを未然に防ぐ
• コードが読みやすくなる（自分のコードの癖を直せる）
• レビューの回数が減る
  →開発効率があがる！！

機能

コードの問題のある個所を指摘してくれる

• そもそも動かない
• 動くけど不要なコード
• フォーマットが揃ってない見づらいコード

ルール付けができる

会社や個人でコーディング規約を作りルール付けを行う事でコーディング品質が保たれます。

• コーディング規約に沿ったコードが記述されているか検査
• コーディング規約に違反している個所を自動的に修正
• チーム開発するシーンでは、コードを一貫性のある状態に保つために役に立つ

最新技術を採用する企業のコーディング規約がそのまま使える

コーディング規約を公開している企業もあります。
興味があれば使用するとコーディング品質向上に良いと思います。
（記事中で実際にAirbnbコーディング規約を適用）

参考：Airbnbコーディング規約

インストールの準備

今回は、npm を使ってESLintをインストールします。
プロジェクトごとにインストールするパッケージ・ライブラリを分けたいため、
それぞれの初期化をおこなった後にローカルインストールしていきます。

npm初期化

パッケージをインストールする前にnpmの初期化が必要です。
npm initを実行する事で、npm環境の初期化がされ以下のファイルが生成されます。

• package.json
• package-lock.json

• package.jsonとは
  インストールするパッケージが記述されたファイルです。
  環境が変わってもコマンド一発で元々あったパッケージをインストールすることが可能です。

• package-lock.jsonとは
  npm install で実際にインストールしたパッケージ情報が記載されている。基本的に直接編集・削除をしてはいけないファイルなので普段は無視してください。

npm初期化

プロジェクトで使用するならプロジェクトのルートディレクトリに移動しましょう

npmの初期化

$ cd [YouProject]         # ディレクトリに移動
$ npm init -y             # npmの初期化（対話なし）

-y オプションについて
npm initはそのまま実行すると対話形式で細かい設定項目を選んでいく事になりますが、基本的にすべてYesを選択する事になるでしょう。
-y オプションを付加するとすべての項目をYesに選択した事になり対話なく初期化が進むのでオススメです！

インストール

グローバルインストール？それともローカルインストール？

私はプロジェクトごとに設定を分けたいのでローカルインストールします。
※npmのエコシステムでもローカルインストールするのが主流です。

グローバルインストールのデメリット
どのディレクトリでもESLintを利用できて便利な反面、プロジェクト毎に異なるバージョンや設定を使いたい時に色々と手間です。

ESLint初期化

以下のコマンドを実行すると、ESLintのインストールと設定を対話形式で進める事ができます。

ESLint初期設定

$ npm show eslint # eslint最新バージョンの確認(latestを確認)
$ npm init @eslint/config # 最新バージョンがインストールされるっぽい

→ ESLintの最新バージョンがインストールされた

インストールと設定

先程のコマンドを実行すると、インタラクティブモードになりどのような設定でインストールするか聞かれます。
今回は、下記の環境でESLintを使用する想定で設定を進めます。

• JavaScript
• ブラウザ環境
• コーディング規約の適用（airbnb）

※ご自身の環境に合った設定を選択してください。

ESLint設定例（一部抜粋）

- How would you like to ESLint?
#下記を選択するとコーディングスタイルのルールを適用してくれます。
  - [x] To check syntax, find problems, and enforce code style
- What type of modules does your project use?
  - [x] JavaScript modules (import/export)
- Which framework does your project use?
  - [x]None of these
- Does your project use TypeScript?
  - [x] No
- Where does your code run?
  - [x] Browser
  - [ ] Node
- How would you like to define a style for your project?
  - [x] Use a popular style guide
- Which style guide do you want follow?
  - [x] Airbnb: https://github.com/airbnb/javascript
- What format do you want your config file to be in?
  - [ ] JavaScript
  - [ ] YAML
  - [x] JSON
- Would you like to install them now?
# Yesを選択するとこのままESLintパッケージがインストールされる
  - [x] Yes 
  - [ ] No

# 上記でYesを選択すると、インストールするパッケージマネージャを聞かれる
- Which package manager do you want to use?
  - [x] npm
  - [ ] yarn
  - [ ] pnpm

実行後、以下の設定ファイルが生成されます。

• package.json

• package-lock.json
  　・・npmのパッケージリストと依存関係が書かれている。

• eslintrc.js
  ・・ESLintの設定ファイル。どのようなコーディングルールを適用するか細かく書けます

npmコマンドとして設定して楽にデバック

package.jsonに以下を記述する。
(npm run lint or lint:fix でコードチェック or 自動整形ができる)

package.json

<中略>
  "scripts": {
    "lint": "eslint src", // srcの部分は適用したいディレクトリやファイルを指定
    "lint:fix": "eslint src --fix",
  },
<中略>

実行

それではESLintを実行してみましょう

インストール済みのeslintバージョンを確認

$ npx eslint -v  # バージョン確認

静的解析する

$ npx eslint main.js  #チェックしたいjsファイルを指定

エラー画面

自主規制（怒られ過ぎて見せられません！）

コマンド一発でエラーを fix できる（機械的な修正）

$ npx eslint --fix main.js

独自のコーディングルールを設定する

erlintrc.jsを編集して手動でルール設定することができます。
初期設定で入れ忘れた項目を手動で追加しても良いですね。

以下の記事を参考にさせていただきました。

参考元

Prettier

導入効果

端的にコードの整形をしてくれます。

• スペースやインデント、文字列のクオートの統一
• １行が長くなった場合は改行位置の調整を自動おこなう

ルールが競合する？！
Prettierと同様にESLintにもコードフォーマット機能があり、ツールを併用する場合はそれぞれのルールが競合するという問題があります。

併用すると競合するの？

以下の資料に詳しく書かれていました。
参考にさせていただきましたありがとうございます！

ルールの競合は解決できる！！
Prettierと競合するEslintのルールを無効にするツールと方法があるようです。公式に推奨ツールが書かれているようなのでチェックします。

参考：Prettier公式

インストール ※2023/5/15 時点

公式の推奨ツールの中でチェックしたものを使う事にしました。

• eslint-config-prettier
• tslint-config-prettier
• stylelint-config-prettier

eslint-config-prettierは ESLint のコードフォーマットに関連するルールを無効化し、バグを検出するルールのみを有効にするプラグインです。

役割分担

下記のように役割分担します。

• ESLintは、バグの検出をさせる（コードフォーマット機能は無効にする）
• Prettierは、コードの整形をさせる

早速、わたしの環境にもインストールします。

prettier、eslint-config-prettierを同時にインストール

$ npm install --save-dev prettier eslint-config-prettier
# --save-devオプションで開発環境にインストールする

追加設定（ルール競合を回避する）

ESLint設定ファイル（.eslintrc）にPrettierの項目を追加し、上書きする事で
ESLintのフォーマッター機能を無効にする

.eslintrc（JSON形式を使っている方はコメントアウトを外してください）

module.exports = {
  /* 中略 */
  extends: [
    /* 中略 */
    "prettier", // 追加する。必ず最後に配置して他の設定の上書きを行う
  ],
};

実行

実行前： テスト用に適当なファイルを用意。デタラメな記述をする

main.js

const     test  =      テスト

テスト実行： prettierのテスト実行

フォーマット結果を上書きして反映する

$ npx prettier --write main.js
> main.js 150ms

実行後：フォーマッター機能で整形された

main.js

const test = テスト;

ESLint + Prettier（VSCodeプラグイン版）

VSCodeのプラグイン ESLint、Prettier も追加すると便利で、コマンド実行せずにリアルタイムで悪いコードを指摘してくれます。
悪い書き方は波線などで表示されるので、一つ一つ修正していく作業は地味にハマります。

インストール

• ESLint(dbaeumer.vscode-eslint) - microsoft製
• Prettier(esbenp.prettier-vscode) - prettier.io製
  ※GUIなので手順は割愛

VSCodeの設定

VSCodeの設定ファイルを編集しデフォルトフォーマッターにPrettierを指定します。
※確か、VSCodeの設定をした方は .vscode/settings.json が作成されている筈

.vscode/settings.jsonにルール設定を追加

// 通常のJSONファイルはコメントアウトが使用できませんが、
// VSCodeのsettings.jsonは、JSONCが使われているのでコメントアウトが可能です！
{
  "editor.defaultFormatter": "esbenp.prettier-vscode", // フォーマッターをPrettierにする
  "editor.formatOnSave": true, // ファイル保存時にフォーマットを実行
  "[markdown]": {
    // markdownのフォーマットを無効化
    "editor.formatOnSave": false
  }
}

→ VSCode上でファイルを開き直せばすぐにPrettierを使える筈です。

と言う事で今回はここまで。