ESlintとprettierの違いは？役割を解説 - Web開発における知見共有系ページ

ESlintとprettierの違いは？
- ESLint
- Prettier
併用が推奨
ESLintの実行方法
eslintを実行した前後の例
prettierの実行方法
prettierを実行した前後の例
PrettierとESLintの併用
- PrettierプラグインとESLintの設定

ESlintとprettierの違いは？

ESLintとPrettierは、両方ともJavaScriptのコード品質を向上させるためのツールで昨今のフロントエンド開発には欠かせません。
それぞれ異なる役割を持っており、解説します。

ESLint

ESLintは、JavaScriptコードに静的解析を適用して、構文的な問題や一般的なエラーを検出するためのツールです。
例えば、未定義の変数、不正な文法、コードスタイルの不一致などを見つけることができます。
ESLintは、JavaScript開発における品質保証やコードスタイルの一貫性を確保するために広く使用されています。

Prettier

Prettierは、コードフォーマットに特化したツールで、JavaScriptコードを一貫性のある形式に整形することができます。
これにより、コードの可読性が向上し、チーム全体でコードスタイルを統一することができます。
Prettierは、スタイルガイドに従ったコード整形を自動的に実行することができ、手動でコードを整形する必要がなくなります。

併用が推奨

ESLintとPrettierは、役割が異なるため、一般的には両方を併用して使用することが推奨されています。
ESLintによって検出された問題を解決した後に、Prettierを実行してコードを整形することで、より品質の高いコードを作成することができます。

ESLintの実行方法

ESLint（エスリント）は、JavaScriptおよびTypeScriptのコードの品質をチェックし、コードスタイルの統一を支援するためのツールです。
ESLintを実行するためには、以下の手順に従ってください。

1. 環境の準備

まず、Node.jsがインストールされていることを確認してください。
Node.jsがインストールされていない場合は、[Node.jsの公式サイト](https://nodejs.org/)からインストールしてください。

2. プロジェクトにESLintをインストール

プロジェクトのルートディレクトリで以下のコマンドを実行し、ESLintをインストールします。

npm install eslint --save-dev

3. ESLintの初期設定

プロジェクトにESLintの設定ファイルを作成するために、以下のコマンドを実行します。

npx eslint --init

このコマンドを実行すると、いくつかの質問が表示されます。
これに答えることで、ESLintの設定ファイル（.eslintrc.jsonなど）が自動的に生成されます。
質問には以下のようなものがあります：

どのようなプロジェクトか（例えば、Reactを使っているか、TypeScriptを使っているかなど）
使用するスタイルガイド（例えば、Airbnb、Googleなど）
使用するJavaScriptのバージョン

4. ESLintの実行

ESLintを実行してコードをチェックするには、以下のコマンドを使用します。

npx eslint .

このコマンドは、現在のディレクトリとそのサブディレクトリ内のすべてのファイルをチェックします。
特定のファイルやディレクトリを指定したい場合は、以下のようにします：

npx eslint src/**/*.js

5. 問題の修正

ESLintが報告した問題を手動で修正することもできますが、自動修正可能なものについては以下のコマンドで修正を試みることができます：

npx eslint . --fix

このコマンドは、可能な限り自動的にコードを修正します。

6. エディタ統合

多くのコードエディタ（Visual Studio Code、Atom、Sublime Textなど）には、ESLintのプラグインが存在します。
これらのプラグインをインストールすると、エディタ内でリアルタイムにESLintの警告やエラーを表示することができます。

例えば、Visual Studio Codeの場合は、以下のプラグインをインストールします：
ESLintプラグインmarketplace.visualstudio.com

eslintを実行した前後の例

では、具体的な例を示して、ESLintを実行する前後のコードの違いを見てみましょう。
以下は、ESLintを実行する前のサンプルJavaScriptコードです。

ESLint実行前のコード

// example.js

var foo = 'bar'
function example() {
  console.log(foo)
  return foo
}

example()

このコードにはいくつかのスタイル違反があります。
例えば、セミコロンが欠けていたり、varを使用していたりします。

ESLintの設定ファイル（.eslintrc.json）

まず、ESLintの設定ファイルを以下のように設定します。

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules": {
    "semi": ["error", "always"],
    "no-var": "error",
    "quotes": ["error", "single"]
  }
}

この設定では、以下のルールを適用しています：

semi: 常にセミコロンを使用する
no-var: varの使用を禁止する
quotes: シングルクォートを使用する

ESLintの実行

次に、以下のコマンドを実行してESLintを実行します。

npx eslint example.js

すると、以下のようなエラーメッセージが表示されるはずです：

/path/to/example.js
  1:1  error  Unexpected var, use let or const instead  no-var
  1:12  error  Missing semicolon                       semi
  4:20  error  Missing semicolon                       semi
  6:1   error  Missing semicolon                       semi

✖ 4 problems (4 errors, 0 warnings)

問題の自動修正

ESLintの自動修正機能を使用して、問題を修正してみましょう。

npx eslint example.js --fix

これにより、ESLintは可能な限り自動的に問題を修正します。
修正後のコードは以下のようになります。

ESLint実行後のコード

// example.js

const foo = 'bar';
function example() {
  console.log(foo);
  return foo;
}

example();

この修正後のコードでは、以下の変更が加えられています：

varがconstに変更されています。
セミコロンが追加されています。
スタイルが統一され、全体的に読みやすくなっています。

このように、ESLintを使うことで、コードの品質を簡単に改善し、チーム全体で一貫したスタイルを維持することができます。

prettierの実行方法

Prettierは、コードのフォーマットを自動的に統一するためのツールです。
Prettierを使うことで、コードスタイルの一貫性を簡単に保つことができます。
以下に、Prettierをプロジェクトにインストールして実行する手順を示します。

1. 環境の準備

eslint同様にNode.jsがインストールされていることを確認してください。

2. プロジェクトにPrettierをインストール

プロジェクトのルートディレクトリで以下のコマンドを実行し、Prettierをインストールします。

npm install --save-dev prettier

3. Prettierの設定

Prettierの設定ファイルをプロジェクトのルートディレクトリに作成します。
設定ファイルの名前は以下のようにいくつかの形式があります：

.prettierrc
.prettierrc.json
.prettierrc.yaml
prettier.config.js
package.jsonの中に設定を追加することも可能です。

例えば、.prettierrc.jsonを使用する場合は、以下のように設定します：

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5"
}

4. Prettierの実行

設定が完了したら、以下のコマンドを実行してPrettierでコードをフォーマットします。

npx prettier --write .

このコマンドは、現在のディレクトリとそのサブディレクトリ内のすべてのファイルをフォーマットします。
特定のファイルやディレクトリを指定したい場合は、以下のようにします：

npx prettier --write "src/**/*.js"

5. エディタ統合

多くのコードエディタ（Visual Studio Code、Atom、Sublime Textなど）には、Prettierのプラグインが存在します。
これらのプラグインをインストールすると、エディタ内でリアルタイムにPrettierのフォーマットが適用されます。

例えば、Visual Studio Codeの場合は、以下のプラグインをインストールします：
Prettier - Code formattermarketplace.visualstudio.com

prettierを実行した前後の例

では、具体的な例を示して、Prettierを実行する前後のコードの違いを見てみましょう。

Prettier実行前のコード

以下は、フォーマットが不統一なサンプルJavaScriptコードです。

// example.js

const foo = "bar"
function example() {
    console.log(foo)
  return foo
}

example()

このコードにはいくつかのスタイル違反があります。
例えば、インデントが不揃いであったり、セミコロンが欠けていたり、ダブルクォートが使われていたりします。

Prettierの設定ファイル（.prettierrc.json）

まず、Prettierの設定ファイルを以下のように設定します。

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2
}

この設定では、以下のルールを適用しています：

semi: 常にセミコロンを使用する
singleQuote: シングルクォートを使用する
tabWidth: インデント幅を2スペースにする

Prettierの実行

次に、以下のコマンドを実行してPrettierでコードをフォーマットします。

npx prettier --write example.js

Prettier実行後のコード

Prettierを実行すると、コードは以下のようにフォーマットされます。

// example.js

const foo = 'bar';
function example() {
  console.log(foo);
  return foo;
}

example();

この修正後のコードでは、以下の変更が加えられています：

インデントが揃えられています（2スペース）。
ダブルクォートがシングルクォートに変更されています。
セミコロンが追加されています。

このように、Prettierを使うことで、コードスタイルの一貫性を簡単に保つことができます。
Prettierは自動でフォーマットを適用するため、手動でスタイルを修正する手間が省けます。
さらに、エディタプラグインを利用することで、コードを書きながらリアルタイムでフォーマットが適用されるように設定することも可能です。

PrettierとESLintの併用

PrettierとESLintを併用する場合、競合を避けるために設定を調整します。
以下はその例です。

PrettierプラグインとESLintの設定

まず、以下のパッケージをインストールします：

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

次に、.eslintrc.jsonに以下の設定を追加します：

{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "semi": true,
        "trailingComma": "es5"
      }
    ]
  }
}

これにより、PrettierのルールがESLintの一部として適用され、競合するスタイルのチェックを無効にします。