ESLint, Prettier を最小限の構成かつ段階的に導入することで理解を深めるためにメモ✍

この記事では、以下のステップで進めていきます。

1. シングルクォートを必須にする

2. セミコロンを必須にして、タブサイズを 2 に指定する

前提知識

• ESLint:

  • コードの静的解析を行って、エラーや警告を検出する

  • Linter と呼ばれるツール

• Prettier

  • コードのスタイルを自動で整形するツール

  • Formatter と呼ばれるツール

両者の役割を理解したうえで、併用することでパワフルなツールになる。

導入

ESLint, Prettier をプロジェクトで使用できるように必要なパッケージを導入する。

npm:

npm install eslint prettier --save-dev

yarn:

yarn add eslint prettier --dev

最小限の設定

• シングルクォートを必須の設定とする

まずは、ESLint, Prettier に以上の設定を行う。

ESLint の初期設定

vim .eslintrc.json

// .eslintrc.json
{
"rules": {
  "quotes": ["error", "single"]
}

Prettier の初期設定

vim .prettierrc

// .prettierrc
{
  "singleQuote": true,
}

Scripts の追加

vim package.json

// package.json
{
  "scripts": {
    "lint": "eslint .",
    "format": "prettier --write ."
  }
}

lint, format を追加する。

ESLint, Prettier の実行

npm run lint
npm run format

これにより、最もシンプルな設定である、シングルクォートを必須にして、ダブルクォートの場合はシングルクォートに書き換える、ということが実現できた。