ESlint [Airbnbルール] + Prettierを適用／Next.js+TypeScript

概要

next.js + typescriptに、eslintをairbnbのルールで導入+ Prettierを連携させたので忘備録
参考：https://www.npmjs.com/package/eslint-config-airbnb-typescript?activeTab=readme

前提

そもそもなぜ、Airbnb???

開発者がより安全でバグの少ないコードを書くために、
Airbnbが長年の開発経験をもとに、JavaScript/TypeScriptにおけるベストプラクティスとしてまとめており、GitHubでも高評価を得ている。
また、ReactやTypeScriptを使うプロジェクトでも推奨される設定を提供しているため。

• TypeScript導入済
• Visual Studio Codeを使用

1. ESlint:Airbnbパッケージのインストール

npm install eslint-config-airbnb-typescript \
            @typescript-eslint/eslint-plugin@^7.18.0 \
            @typescript-eslint/parser@^7.18.0 \
            --save-dev

2. Prettierパッケージのインストール

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

3. .eslintrc.jsonの設定

Prettierの設定がESLintに統合され、コード整形と静的解析が統一されるようにします。

.eslintrc.json

{
  "extends": [
    "airbnb",
    "plugin:@typescript-eslint/recommended",
    "airbnb-typescript",
    "next/core-web-vitals",
    "next/typescript",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,   // シングルクオートを使用
        "trailingComma": "all", // 末尾のカンマを常に追加
        "semi": true,          // 文の末尾にセミコロンを追加
        "tabWidth": 2,         // タブ幅を2に設定
        "useTabs": false       // スペースを使用
      }
    ],
  },
  "ignorePatterns": ["prettier.config.js"] 
}

ちなみにpackage.jsonの該当部分はこんな感じです

package.json

  "devDependencies": {
    "@eslint/js": "^9.12.0",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@typescript-eslint/eslint-plugin": "^7.18.0",
    "@typescript-eslint/parser": "^7.18.0",
    "eslint": "^8.56.0",
    "eslint-config-airbnb": "latest",
    "eslint-config-airbnb-typescript": "latest",
    "eslint-config-next": "14.2.14",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.2.1",
    "prettier": "^3.3.3",
    "typescript": "^5.5.4",
    "typescript-eslint": "^8.8.1"
  }
}

3. ESlintの実行

このコマンドにより、ESLint はコードを解析し、可能な限り自動的に問題を修正してくれます。
また、Prettier のルールに違反していた箇所が自動的に修正され、手動でコードを修正する必要がなくなります。

npx eslint . --fix

4. 自動修正の設定

手動でnpx eslint . --fixを実行するのは手間がかかるため、VSCode保存時に自動で修正する設定を行います。

4-1.拡張機能のインストール

VSCodeにESLintとPrettierの拡張機能をインストールします。

4-2.settings.jsonファイルの作成

プロジェクトディレクトリの直下に.vscodeフォルダを作成し、その中に設定ファイルsettings.jsonを作成

settings.json

{
  "editor.formatOnSave": true,        
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

以上の設定で、VSCodeでファイルを保存するたびに、ESLintによる自動修正と Prettierによるフォーマットが適用されます。

備考

バージョン外であるとの警告が出たため、バージョンを落としました

# typescriptのバージョンの確認
npm view typescript versions
# 安定版のTypeScriptの最新バージョン5.5.4を適用
npm install typescript@5.5.4 --save-dev --legacy-peer-deps