あまブログ

ドキドキ......ドキドキ2択クイ〜〜〜〜〜〜〜ズ!!

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

VSCode JavaScript

この記事ではESLint(静的検証ツール)とPrettier(コードフォーマッター)のインストールと設定方法、またこれらを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.*で使えるファイル形式

ここでは.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": {}
}

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

$ eslint yourfile.js

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, 
}

【参考】