【VSCode】ESLintとPrettierのインストールと設定

この記事ではESLint(静的検証ツール)とPrettier(コードフォーマッター)のインストールと設定方法、またこれらをVSCodeで使用する方法を紹介します。

• 1. ESLint
  • 1-1. インストール
  • 1-2. 設定ファイル
  • 1-3. コマンドラインでESLintを実行
  • 1-4. VSCodeとの統合
• 2. Prettier
  • 2-1. インストール
  • 2-2. Prettierの実行
  • 2-3. ESLintとの統合
  • 2-4. VSCodeとの統合

1. ESLint

Documentation - ESLint - Pluggable JavaScript Linter

1-1. インストール

eslintをグローバルにインストール

$ npm install -g eslint

インストールを確認

$ eslint -v

1-2. 設定ファイル

ESLint - Configuring ESLint

eslintを使うには設定ファイルである.eslintrc.*が必要です。

• .eslintrc.*で使えるファイル形式
  • JavaScript：.eslintrc.js
  • JSON：.eslintrc.json
  • YAML：.eslintrc.yml

ここでは.eslintrc.jsonを使用します。

設定ファイルの作成

• 方法1：直接.eslintrc.*を作成
• 方法2：eslint --initコマンドで対話形式で作成
  • 事前にpackage.jsonの作成が必要
  • eslint --initはnpm init @eslint/configと同じ

設定ファイルのプロパティ

.eslintrc.jsonの例

{
  "env": {
    "browser": true,
    "node": true,
    "es2022": true
  },
  "extends": ["eslint:recommended", "prettier"],
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {}
}

• env
  • ESLint - Specifying Environments
• extends
  • ESLint - Using eslint:recommended
  • eslint-config-prettier
• parserOptions
  • ESLint - Specifying Parser Options

1-3. コマンドラインでESLintを実行

$ eslint yourfile.js

• 検証した結果、問題がなければ何も表示されない
• ESLint - Command Line Interface

1-4. VSCodeとの統合

VSCodeにvscode-eslintをインストール

2. Prettier

Prettier - Documentation

2-1. インストール

Prettier - Install

Prettierをローカルにインストール

$ npm install --save-dev --save-exact prettier

2-2. Prettierの実行

フォーマットの実行

$ npx prettier --write .

フォーマットの確認のみ

$ npx prettier --check .

2-3. ESLintとの統合

Prettier - Integrating with Linters

eslint-config-prettierをインストール

$ npm install --save-dev eslint-config-prettier

.eslintrc.jsonに"prettier"を追記

{
  "extends": [
    "some-other-config-you-use",
    "prettier"
  ]
}

• "extends"の配列の最後に追加する

2-4. VSCodeとの統合

Prettier - Editor Integration

VSCodeにprettier-vscodeをインストールします。

次に、VSodeのデフォルトのフォーマッターをPrettierに設定し、ファイル保存時にフォーマットが実行されるように設定します。

設定方法1. settings.jsonを直接編集する

settings.jsonに以下を追記

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

• settings.jsonの開き方
  1. shift + command + Pでコマンドパレットを開く
  2. open settingsで検索
  3. Preferences: Open User Settings (JSON)を選択

設定方法2. VSCodeの「設定」から設定する

1. cmd + ,で「設定」を開く
2. format on saveで検索
3. Editor: Format On Saveにチェックを入れる
4. default formatterで検索
5. Editor: Default FormatterをPrettier - Code formatterに選択

この場合、settings.jsonは以下のようになる。

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

---

【参考】

• ESLint 最初の一歩 - Qiita
• ESLint の設定ファイル (.eslintrc) の各プロパティの意味を理解する｜まくろぐ