コードのクオリティを高める！ESLintとPrettierの組み合わせ完全ガイド

プログラミングをしていると、コードが乱雑になったり、バグが発生したりすることがよくあります。そこで役立つのが、ESLint（コードの先生）とPrettier（お掃除ロボット）です。この記事では、これらのツールの基本的な使い方と、どのように一緒に使うかについて説明します。

ESLint: コードの先生

何をするの？

ESLintは、JavaScriptやTypeScriptのコードに対して、構文エラーやコーディングスタイルの問題を指摘してくれます。

ESLintがJavaScriptやTypeScriptのコードに対して行う構文エラーやコーディングスタイルのチェックには多くの種類があります。具体例を挙げて説明します。

構文エラーのチェック

未定義の変数を使用している

コード内で未定義の変数を使用した場合、ESLintはそれを指摘します。

console.log(myVariable); // Error: 'myVariable' is not defined

不適切な演算子の使用

例えば、等価性をチェックする際に==を使うと、型変換が行われるため非推奨です。ESLintは===の使用を推奨します。

if (x == y) { // Error: Expected '===' and instead saw '=='
  // do something
}

コーディングスタイルの統一

インデントの不一致

インデントがタブとスペースで混在している場合、ESLintはそれを指摘します。

function myFunction() {
\tconsole.log("Hello"); // Error: Mixed spaces and tabs
}

セミコロンの有無

JavaScriptではセミコロンはオプションですが、一貫性を持たせるためにESLintでチェックできます。

console.log("Hello") // Error: Missing semicolon

eval()の使用禁止

eval()関数はセキュリティリスクがあるため、ESLintはその使用を禁止します。

eval("console.log('Hello')"); // Error: eval can be harmful

使い方

1. インストール: Node.jsがインストールされている状態で、以下のコマンドを実行します。 npm install eslint --save-dev npx eslint --init
2. 設定: プロジェクトのルートディレクトリに.eslintrcという設定ファイルが生成されます。このファイルでルールをカスタマイズできます。 { "extends": ["eslint:recommended"], "rules": { "no-console": "off" } }
3. 実行: コマンドラインで以下を実行すると、ESLintがコードをチェックします。 npx eslint your-file.js

公式ドキュメント

• ESLint公式ドキュメント
• Prettier公式ドキュメント

Prettier: お掃除ロボット

何をするの？

Prettierは、コードのフォーマットを自動で整えてくれます。

Prettierは、コードの見た目（フォーマット）を自動で整えるツールですが、その背後には多くの具体的な動作があります。以下にいくつかの例を挙げて説明します。

コードの整形

インデントの自動調整

Prettierは、コードのインデント（字下げ）を自動で調整します。これにより、コードが読みやすく、一貫性があります。

javascrip code

// Before if(true){ console.log("Hello, world!"); } // After if (true) { console.log("Hello, world!"); }

行の折り返し

長いコード行は、読みにくくなる可能性があります。Prettierは、一定の文字数を超えた場合に行を自動で折り返します。

javascript code

// Before const myLongVariable = "This is a very long string that goes on and on and does not easily fit on one line."; // After const myLongVariable = "This is a very long string that goes on and on and does not easily fit on one line.";

シンタックスの統一

クォートの統一

JavaScriptでは、文字列を表現するためにシングルクォート（'）とダブルクォート（"）のどちらも使用できます。Prettierは、これらを統一することができます。

javascript code

// Before const str1 = "Hello, world!"; const str2 = 'Hello, world!'; // After (シングルクォートに統一) const str1 = 'Hello, world!'; const str2 = 'Hello, world!';

セミコロンの追加・削除

JavaScriptでは、セミコロンはオプショナルですが、Prettierを使うと、セミコロンの有無を一貫して管理できます。

javascript code

// Before const x = 1 const y = 2 // After (セミコロンを追加) const x = 1; const y = 2;

これらはPrettierが行う基本的な操作の一例です。設定ファイル（.prettierrc）でこれらのルールをカスタマイズすることができます。公式ドキュメントで提供されているオプションの一覧を参照すると、さらに多くのカスタマイズが可能です。

使い方

1. インストール: 以下のコマンドでPrettierをインストールします。
   npm install prettier --save-dev
2. 設定:
   .prettierrcという設定ファイルを作成し、以下のように設定します。 { "singleQuote": true, "semi": false }
3. 実行: コマンドラインで以下を実行すると、Prettierがコードを整形します。 npx prettier --write your-file.js

もちろん、ルールの設定方法についても詳しく説明します。

---

ESLint: ルールのカスタマイズ

ESLintでは、.eslintrc ファイルにルールを追加することで、コードのチェックをカスタマイズできます。

例: console.logを許可する

{
  "rules": {
    "no-console": "off"
  }
}

例: セミコロンを必須にする

{
  "rules": {
    "semi": ["error", "always"]
  }
}

例: インデントをスペース2つにする

{
  "rules": {
    "indent": ["error", 2]
  }
}

Prettier: ルールのカスタマイズ

Prettierでは、.prettierrc ファイルに設定を書くことで、コードのフォーマットをカスタマイズできます。

例: シングルクォートを使用する

{
  "singleQuote": true
}

例: セミコロンを削除する

{
  "semi": false
}

例: インデントをスペース4つにする

{
  "tabWidth": 4
}

ESLintとPrettierを合わせて使う

両方のツールを一緒に使う場合、以下のように.eslintrc ファイルに設定を追加します。

{
  "extends": ["plugin:prettier/recommended"]
}

この設定により、ESLintがコードをチェックする際にPrettierの設定も考慮されます。これで、コードの品質と整形の両方が一度に管理できます。

---

以上が、ESLintとPrettierでのルールのカスタマイズ方法です。これらの設定を活用することで、チーム全体でのコードの品質を一定に保つことができます。公式ドキュメントも参考にして、自分たちに合った設定を探してみてください。

• ESLint: 設定ルール
• Prettier: オプション

ESLintとPrettierの統合

1. インストール: 以下のコマンドで必要なパッケージをインストールします。 npm install eslint-plugin-prettier eslint-config-prettier --save-dev
2. 設定: .eslintrcに以下を追加します。 { "extends": ["plugin:prettier/recommended"] }

これで、ESLintがコードをチェックする際にPrettierのルールも適用されます。

他の言語への適用

JavaScriptやTypeScript以外にも、PrettierはHTML, CSS, Markdownなど多くの言語に対応しています。ESLintは主にJavaScriptとTypeScriptに対応していますが、プラグインを使えば他の言語やフレームワークにも対応可能です。

まとめ：ESLintとPrettieの違い

ESLintとPrettierは両方ともコード品質を向上させるツールですが、それぞれが得意とする領域が異なります。

ESLint

主な役割: コード品質とコーディング規約を監視・強制

• コード品質: 未使用の変数、未定義の変数、無効なthis、不正な演算子使用などを検出
• コーディング規約: インデント、スペース、セミコロンの有無などのスタイルガイドを強制
• 拡張性: コミュニティや企業が独自のルールを定義できる
• フレームワークとの統合: React, Vue, Angularなどのフレームワーク向けのプラグインや設定が豊富
• 自動修正: 一部の問題については、--fixオプションで自動修正可能

Prettier

主な役割: コードのフォーマットを統一

• 読みやすいコード: コードのインデントやスペーシングを自動で調整
• 言語サポート: JavaScript以外にもCSS, HTML, Markdown, YAMLなど多数の言語をサポート
• オプションが少ない: Prettierは意図的に設定オプションを少なくしています。そのため、チーム間での設定の一致が容易
• 速度: 高速な処理速度で大規模なコードベースでもスムーズに動作

ESLintとPrettierの併用

• コード品質とスタイルの両方を担保: ESLintがコードの品質を担当し、Prettierがコードのスタイルを担当
• 競合の回避: ESLintの一部のスタイリングルールはPrettierと競合する可能性があるため、それらを無効にする設定が一般的
• 一貫性: チーム内でコードの一貫性を保ちやすく、コードレビューが効率的に行える

このように、それぞれのツールが補完しあいながら、より高品質なコードを作成する環境を提供しています。

---