ESLintとPrettierの設定のところ

毎回ESLintとPrettierのインストールや設定方法が曖昧だったので、こちらにまとめておきます。

ESLint（静的検証ツール）

JavaScriptのコード解析ツール。コードスタイルの指針に従った書き方をしているかチェックし、品質を保つのに役立つ。 Documentation

1. インストール

プロジェクトのルートディレクトリで以下のコマンドを実行。

$ npm install eslint --save-dev

2. 設定ファイルの作成

Configure ESLint

設定ファイルである.eslintrc.*（.js, .json, .yml）を作成。
※package.jsonがすでに存在することが前提。
※eslint --initでの対話形式での作成も可能。
参考：ESLintのセットアップ方法

• env

  • Specifying Environments
  • 使用する環境を定義。
  • 例: "browser": true, "node": true, "es6": true
  • 特定の環境でのグローバル変数や機能をESLintが認識できるようになる。

• extends

  • Extending Configuration Files
  • 他の設定ファイルや共有された設定を拡張
  • 例: "extends": "eslint:recommended"

• parserOptions

  • Specifying Parser Options
  • パーサのオプションを設定できる。

• plugins

  • Configuring Plugins

• rules

  • 各ルールの詳細
  • Configuring Rulesでルールの設定方法を知れる。

3. 実行

// 指定されたファイル名に対してESLintを実行して、コードの潜在的な問題点やスタイルガイド違反を警告やエラーとして出力。自動修正は行わない。
$ npx eslint <ファイル名>

// `--fix`オプションを付けることで、ESLintが自動で修正を行い、コードを修正。
$ npx eslint <ファイル名> --fix

Prettier（コードフォーマッター）

コードを美しく整形するツール。自動整形が可能で、コードの品質を維持しつつ、統一されたフォーマットを保てる。
Documentation

1. インストール

プロジェクトのルートディレクトリで以下のコマンドを実行。

$ npm install prettier --save-dev

2. 実行

// カレントディレクトリ内のファイルに対して、Prettierを実行し、ファイルを書き換え、自動フォーマットを行う。
$ `npx prettier --write .` 

// カレントディレクトリ内のファイルに対して、Prettierを実行し、ファイルがPrettierフォーマットに従っているかどうかを確認。ファイルがPrettierフォーマットに従っていない場合、エラーを表示。
$ `npx prettier --check .`

3. eslint-config-prettierのインストール

Prettierと競合するESLintのルールを無効にするための設定。

Integrating with Linters

eslint-config-prettier

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

所感✏️

ソースコードの品質を保つのに、これらのツールは必要不可欠だと感じました。
ミスを減少させ、より重要な部分に集中できるのは大きなメリットです。
TypeScriptやReact用の設定もあるので、プロジェクトを通してさらに学びたいと思います。