お問い合わせ
お問い合わせ
ホーム > ウェブ制作 > コーディング規約に準拠！PrettierとESLintをVS Codeに導入して自動整形する方法

コーディング規約に準拠！PrettierとESLintをVS Codeに導入して自動整形する方法

ウェブ制作
VS CodeでPrettierとESLintを導入し、コードを自動整形・静的解析しているイメージ
VS CodeにPrettierとESLintを導入し、コーディング規約に沿ったコードの自動整形と静的解析を実現する開発環境のイメージ

Web制作では、チーム開発や長期運用を見据えるとコーディング規約に沿ったコードを書くことが重要です。

しかし、手作業でインデントやスペースを整えたり、書き方のルールを毎回確認したりするのは非効率です。

そこで活躍するのがPrettierとESLintです。

  • Prettier：コードの見た目を自動で整える
  • ESLint：コーディングルール違反やミスを検出する

この2つをVS Codeへ導入すると、保存するだけでコードが自動整形され、規約に沿ったコードを書きやすくなります。

この記事では、PrettierとESLintの違いや導入方法、自動整形の設定まで詳しく解説します。

PrettierとESLintとは？

初心者はこの2つを同じものと思いがちですが、それぞれ役割が異なります。

ツール主な役割
Prettierコードの見た目を自動整形する
ESLintコーディングルール違反やミスを検出する

基本的には両方を組み合わせて使用するのが一般的です。

Prettierでできること

Prettierはコードフォーマッターです。

例えば次のようなコードがあったとします。

function hello( name ){console.log("Hello,"+name)}

保存すると次のように整形されます。

function hello(name) {
  console.log("Hello," + name);
}

自動で以下のような調整を行います。

  • インデント
  • セミコロン
  • クォーテーション
  • 改行位置
  • スペース

そのため、コードの見た目を統一したい場合に最適です。

関連記事

ESLintでできること

ESLintはJavaScriptの静的解析ツールです。

例えば次のコードを見てみます。

const message = "Hello";

console.log(mesage);

このコードでは

  • mesage
  • message

のスペルが異なっています。

ESLintを導入していると保存前にエラーとして表示されます。

このように、

  • タイプミス
  • 未使用変数
  • 危険な書き方
  • コーディング規約違反

などを検出できます。

関連記事

VS CodeへPrettierを導入する

拡張機能をインストールする

VS Code左側の**拡張機能（Extensions）**を開きます。

検索欄で

Prettier

と検索し、

Prettier – Code formatter（Prettier）

をインストールします。

デフォルトフォーマッターに設定する

設定画面を開きます。

Ctrl + ,

Macの場合

⌘ + ,

検索欄で

default formatter

と入力します。

Editor: Default Formatter

を

Prettier - Code formatter

に変更します。

保存時に自動整形する

設定画面で

format on save

と検索します。

Editor: Format On Save

にチェックを入れます。

これだけで保存するたびに整形されます。

VS CodeへESLintを導入する

拡張機能をインストールする

拡張機能で

ESLint

と検索します。

Microsoft製の

ESLint

をインストールします。

プロジェクトへESLintをインストールする

ターミナルを開きます。

npm install -D eslint @eslint/js globals

Reactの場合は追加でインストールします。

npm install -D eslint-plugin-react

ESLintを初期設定する

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

npx eslint --init

質問に答えると設定ファイルが作成されます。

代表的には

eslint.config.js

が生成されます。

PrettierとESLintを連携させる

PrettierとESLintを同時に使う場合、整形ルールが競合することがあります。

そのため、以下のパッケージを追加することが一般的です。

npm install -D eslint-config-prettier

その後、ESLintの設定へ追加します。

import js from "@eslint/js";
import globals from "globals";
import eslintConfigPrettier from "eslint-config-prettier";

export default [
  js.configs.recommended,
  eslintConfigPrettier,
  {
    languageOptions: {
      globals: globals.browser,
    },
  },
];

これにより、Prettierが担当する整形ルールとESLintのルールが競合しにくくなります。

保存するだけで自動整形される仕組み

保存時の流れは次のようになります。

  1. ファイルを保存する
  2. Prettierがコードを整形する
  3. ESLintがルール違反をチェックする
  4. 必要に応じて警告やエラーを表示する

これにより、毎回手作業で整形する必要がなくなります。

よくあるトラブル

自動整形されない

次の項目を確認します。

  • Prettierがインストールされている
  • Default FormatterがPrettierになっている
  • Format On Saveが有効
  • ファイル形式が対応している

ESLintが動かない

次の点を確認します。

  • npmでESLintをインストールしている
  • eslint.config.jsが存在する
  • VS Codeを再起動する
  • Node.jsが正しくインストールされている

関連記事

PrettierとESLintのルールが競合する

多くの場合は

npm install -D eslint-config-prettier

を導入すると解決できます。

チーム開発では必須のツール

企業の開発現場では、多くの場合PrettierやESLintが導入されています。

理由は次のとおりです。

  • コードレビューしやすくなる
  • コーディング規約を統一できる
  • バグを減らせる
  • 保守性が向上する
  • チーム全体で品質を維持できる

個人開発でも早い段階から導入しておくと、実務に近い開発環境を構築できます。

まとめ

PrettierとESLintは、それぞれ役割が異なる便利なツールです。

  • Prettierはコードの見た目を自動整形する
  • ESLintはコーディングルール違反やミスを検出する
  • VS Codeでは拡張機能を導入するだけで利用できる
  • 保存時の自動整形を設定すると作業効率が向上する
  • eslint-config-prettierを導入すると競合を防ぎやすい

実務では両方を組み合わせて使用するケースが一般的です。開発初期から導入しておくことで、品質の高いコードを効率よく維持しやすくなります。

関連記事