【Visual Studio Code】VSCodeでESLintを使いこなす！　コード品質改善ガイド

はじめに
ESLintの機能
VSCode ESLintの導入手順
Prettierとの連携
1. ESLint　＆　Prettier　連携確認
まとめ

はじめに

JavaScriptやTypeScriptで開発していると、コードの書き方にばらつきが出たり、うっかりミスがバグにつながったりすることがあります。そんなときに役立つのが「ESLint」です。

本ブログでは、初心者～中級者向けにESLintの使い方及び、Prettierとの連携の仕方を紹介します。

ESLintの機能

ESLintはJavaScriptやTypeScriptのコード品質をチェックするツール（Linter）です。

主な機能

構文エラーやバグの予兆を検出
コーディングルール（スタイル）の強制
不要なコードや未使用変数の警告
Prettierとの連携で整形と品質管理を両立

また、VSCodeと組み合わせることで、リアルタイムに警告表示や自動修正ができ、開発効率が大幅に向上します。

VSCode ESLintの導入手順

Node.jsプロジェクトの準備

Node.jsは、JavaScriptやTypeScriptをサーバーサイドでも動かせるようにする環境です。以下の公式サイトからインストールします。

Node.jsをインストールしないと、Node.jsのライブラリ（＝パッケージ）を管理するコマンド”npm”が使用できません。

　Node.js公式サイト

Node.jsプロジェクトを以下のコマンドで、初期化を行います。

mkdir eslint-sample
cd eslint-sample 
npm init -y

eslint-sampleフォルダ内に、package.json という名称のファイルが作成されます。このファイルは、npmの心臓部とも言えるファイルです。プロジェクトの依存パッケージやスクリプト、バージョン情報などが記載されています。

最終的なpackage.jsonの内容

{
  "name": "eslint-sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@eslint/js": "^9.35.0",
    "eslint": "^9.35.0",
    "eslint-config-prettier": "^10.1.8",
    "eslint-plugin-prettier": "^5.5.4",
    "eslint-plugin-react": "^7.37.5",
    "globals": "^16.4.0",
    "prettier": "^3.6.2",
    "typescript-eslint": "^8.43.0"
  }
}

ESLintのインストール

npmコマンドでのインストール
プロジェクトにESLint本体を導入。設定ファイルを使ってLintルールを定義します。

npm install eslint --save-dev

VSCode 拡張機能でのインストール
VSCode上でLint結果を表示したり、保存時に自動修正したりする補助ツールです。

ESLintの初期設定

以下のコマンドを実行します。

npx eslint --init

ESLintの「設定ファイル（.eslintrc）」を対話形式で生成します。具体的には、以下のような質問に答えていくことで、プロジェクトに最適なLintルールと必要なプラグインを自動でセットアップしてくれます。

使用目的の選択
コードの構文チェックだけか、問題検出やスタイル強制まで行うかを選びます。

How would you like to use ESLint?
❯ To check syntax only
  To check syntax and find problems

モジュール形式の選択
ES ModulesかCommonJSかを選択。TypeScriptならCommonJSが多いですね。

What type of modules does your project use?
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

使用フレームワークの選択
ReactやVueを使っている場合は、それに対応したプラグインを自動で追加してくれます。

Which framework does your project use?
❯ React
  Vue.js
  None of these

TypeScriptの使用有無
@typescript-eslint/parser や関連プラグインの導入が必要になります。

Does your project use TypeScript?
❯ No
  Yes

実行環境の選択
ブラウザ用かNode.js用かで、環境変数（env）を設定します。

Where does your code run?
❯ Browser
  Node

設定ファイルの形式
.eslintrc.js などの形式を選択。JavaScript形式ならコメントも書けて柔軟です。

What format do you want your config file to be in?
❯ JavaScript
  YAML
  JSON

必要な依存パッケージの自動インストール
eslint-plugin-react や eslint-config-airbnb などが自動でインストールされます。

Would you like to install them now with npm?
❯ Yes
  No

マネージャの選択
依存パッケージのインストールに使う「パッケージマネージャー」を選択

Which package manager do you want to use? ...
> npm
  yarn
  pnpm
  bun

実行後に設定されるファイル例（eslint.config.mjs）

import js from "@eslint/js";
import globals from "globals";
import pluginReact from "eslint-plugin-react";
import { defineConfig } from "eslint/config";

export default defineConfig([
  { files: ["**/*.{js,mjs,cjs,jsx}"], plugins: { js }, extends: ["js/recommended"], languageOptions: { globals: globals.browser } },
  pluginReact.configs.flat.recommended,
]);

サンプルコードでのトライ

サンプルコード：test.js（保存前）

サンプルコード：test.js（保存後）

Prettierとの連携

ESLintはコードの「品質」をチェックしますが、「整形」はPrettierが得意です。両者を連携させることで、最強の開発環境が整います。

コマンドによるインストール
- CLIやCI/CDで整形し、ESLintと連携
- eslint-config-prettier: ESLintとPrettierの競合ルールを無効化
- eslint-plugin-prettier: Prettierルール違反を ESLint に報告

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

VSCode拡張機能でのprettierインストール

プロジェクトフォルダ内に .prettierrc を作成

eslint.config.mjs に Prettier連携を追加

VSCodeで保存時に自動整形する設定
.vscode/settings.json に以下を追加

カレントフォルダ以下の全てのファイルを整形する場合
以下のコマンドを実行する

npx prettier --write .

ESLint　＆　Prettier　連携確認

整形前のコード
- インデントが不統一
  - スペース数を統一（４スペース）
- セミコロンがない
  - 自動で追加
- ダブルクォート
  - シングルクォートに変更
- オブジェクトのスペース
  - 25の前に半角スペースを入れて整形
- 配列のスペース
  - [“Linux”, …] → [ ‘Linux’, … ]の様に整形