Next.jsプロジェクトでのESLintとPrettier設定方法
はじめに
コーディングのルールを設定するため、Next.js のプロジェクトに ESLint と Prettier を設定したので備忘録として記事を書きます
拡張機能のインストール
VSCode で ESLint と Prettier を使用するため、拡張機能をインストールします
拡張機能をインストール後にsettings.jsonを設定することで、エディターで lint と formatter を使用できるようになります
ESLint の拡張機能
Prettier の拡張機能
Prettier をフォーマッターに設定し、ESLint で自動整形するようにするため以下のような settings.json を作成します
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.addMissingImports": "always",
"source.fixAll.eslint": "always"
},
"files.insertFinalNewline": true
}Next.js の ESLint
Next.js ではプロジェクト作成時に ESLint を使用するか選択することができます
ESLint を使用するを選択するとeslint-config-nextがデフォルトでインストールされますeslint-config-nextは ESLint の推奨設定が含まれたパッケージです
eslint-config-next では以下の ESLint プラグインの推奨ルールセットを使用します：
※引用：https://nextjs.org/docs/app/building-your-application/configuring/eslint#eslint-config
ESLint の設定ファイル作成
ESLint の設定ファイル(.eslintrc.*)を作成します.eslintrc.*は同じディレクトリに複数の設定ファイルがある場合、ESLint は一つのみを使用します.eslintrc.jsから順に優先するようになっているため、デフォルトで作成される.eslintrc.jsonは削除し.eslintrc.jsを作成します
module.exports = {
root: true,
extends: ['next/core-web-vitals'],
plugins: [],
rules: {},
}.eslintignore ファイルの作成
ESLint を実行から特定のファイルとディレクトリを無視するように設定します
設定方法は 2 通りあり、
- ignorepatterns を
.eslintrc.*に追加する方法 - .eslintingnore ファイルを作成する方法
の 2 通りがあります
今回は.eslintignore ファイルを作成する方法で設定を行います
プロジェクトのルートディレクトリに.eslintignore を作成します
.next/*
env/*
node_modules/*
public/*ESLint パッケージ追加
eslint-config-next 以外の必要なパッケージを追加していきます
typescript-eslint
typescript-eslintは ESLint と Prettier が TypeScript をサポートできるようにするツールです
以下のコマンでパッケージをインストールします
ドキュメントでは@typescript-eslint/parser, eslint, typescriptもコマンドに記載されていますが、Next.js プロジェクトにすでに含まれているため以下のコマンドには含めていません
npm i -D @typescript-eslint/eslint-pluginインストールができたら.eslintrc.jsに以下の設定を追加します
module.exports = {
root: true,
+ parser: "@typescript-eslint/parser",
+ extends: ["plugin:@typescript-eslint/recommended", "next/core-web-vitals"],
+ plugins: ["@typescript-eslint"],
rules: {},
};
各設定についての解説
parser: '@typescript-eslint/parser'ESLint に、インストールした@typescript-eslint/parserパッケージを使用してソース ファイルを解析するように指示します
- これは必須です。そうでない場合、ESLint は TypeScript コードを通常の JavaScript であるかのように解析しようとしてエラーをスローします
plugins: ['@typescript-eslint']ESLint に@typescript-eslint/eslint-pluginパッケージをプラグインとしてロードするように指示します
- これにより、コードベース内で typescript-eslint のルールを使用できるようになります
extends: [ ... ]あなたの設定が指定された設定を拡張することを ESLint に伝えます
plugin:@typescript-eslint/recommendedは「推奨」構成です。これはeslint:recommendedと似ていますが、プラグインから TypeScript 固有のルールを有効にする点が異なりますroot: trueこのファイルがプロジェクトで使用されるルートレベルのファイルであり、ESLint がこのディレクトリを超えて構成ファイルを検索しないことを示すのは、一般的に良い ESLint の実践方法です
※引用：https://typescript-eslint.io/getting-started/legacy-eslint-setup
prettier
prettierはコードを一貫したスタイルに統一するためのコードフォーマッタです
ESLint で Prettier を使用できるようにするため以下 2 つのパッケージをインストールします
eslint-plugin-prettier：Prettier を ESLint のルールとして実行できるようにするパッケージeslint-config-prettier：Prettier と競合する ESLint ルールをオフにするパッケージ
以下のコマンドでパッケージをインストールします
npm i -D eslint-plugin-prettier eslint-config-prettier
npm i -D -E prettierインストールができたら.eslintrc.jsに以下の設定を追加しますextendsの最後に"plugin:prettier/recommended"を追加します
module.exports = {
root: true,
parser: "@typescript-eslint/parser",
extends: [
"plugin:@typescript-eslint/recommended",
"next/core-web-vitals",
+ "plugin:prettier/recommended",
],
plugins: ["@typescript-eslint"],
rules: {},
};以下のような.prettierrcファイルを作成します
{
"semi": false,
"arrowParens": "always",
"singleQuote": true,
"trailingComma": "es5"
}参考：eslint-plugin-prettier(github)
eslint-plugin-unused-import
eslint-plugin-unused-importは未使用の import を見つけて削除します
私はプラグインを入れただけだと未使用の import を見つけて削除することはできず、実際にはeslint --fixを実行するかまたは settings.json で"source.fixAll.eslint": "always"を設定する必要がありました
以下のコマンドでパッケージをインストールします
npm i -D eslint-plugin-unused-importsインストールができたら.eslintrc.jsに以下の設定を追加します
module.exports = {
root: true,
parser: "@typescript-eslint/parser",
extends: [
"plugin:@typescript-eslint/recommended",
"next/core-web-vitals",
"plugin:prettier/recommended",
],
+ plugins: ["@typescript-eslint", "unused-imports"],
+ rules: {
+ "@typescript-eslint/no-unused-vars": "off",
+ "unused-imports/no-unused-imports": "error",
+ "unused-imports/no-unused-vars": [
+ "warn",
+ {
+ vars: "all",
+ varsIgnorePattern: "^_",
+ args: "after-used",
+ argsIgnorePattern: "^_",
+ },
+ ],
+ },
};参考：eslint-plugin-unused-imports(github)
eslint-plugin-import
eslint-plugin-importは import のファイルパスや import 名のスペルミスをチェックします
eslint-plugin-import と合わせて eslint-import-resolver-alias もインストールし、パスエイリアスを設定します
以下のコマンドでパッケージをインストールします
npm i -D eslint-plugin-import eslint-import-resolver-aliasインストールができたら.eslintrc.jsに以下の設定を追加します
const path = require("path");
module.exports = {
...
+ settings: {
+ "import/resolver": {
+ alias: {
+ map: [
+ ["generated", path.resolve(__dirname, "./src/__generated__")],
+ ["app", path.resolve(__dirname, "./src/app")],
+ ["components", path.resolve(__dirname, "./src/components")],
+ ["generated_rest", path.resolve(__dirname, "./src/generated_rest")],
+ ["gqls", path.resolve(__dirname, "./src/gqls")],
+ ],
+ extensions: [".ts", ".tsx", ".js", ".jsx"],
+ },
+ },
+ "import/ignore": "node_modules",
+ },
...
rules: {
...
+ "import/order": [
+ "error",
+ {
+ groups: [
+ "builtin",
+ "external",
+ "internal",
+ "sibling",
+ "parent",
+ "index",
+ ],
+ "newlines-between": "always",
+ alphabetize: {
+ order: "asc",
+ caseInsensitive: true,
+ },
+ },
+ ],
},
};参考:
- eslint-plugin-import
- eslint-import-resolver-alias
- Next.js で import の alias を貼るのに割とハマった話
- Configure ESLint, Prettier and path aliases with Next.js
husky と lint-staged の設定
husky と lint-staged を使用してコミット前に lint を強制するようにします
lint を強制することにより lint を通過しないコードは commit できないようにします
huskyとは、Git フックで任意のプログラムを実行するための npm ライブラリです
lint-stagedとは、ステージングされたファイルに対して lint を実行するための npm ライブラリです
以下のコマンドでパッケージをインストールします
npm i -D husky lint-stagedパッケージがインストールできたら以下を実行します
npx husky initするとpackage.jsonに以下が追加されます
"scripts": {
...
+ "prepare": "husky"
},次に .husky/pre-commit で lint-staged を実行するように設定します
まず、package.json を以下のように修正します
"scripts": {
...
+ "lint-staged": "lint-staged"
},
...
"lint-staged": {
"*.{js,ts,jsx,tsx}": [
"eslint"
]
}追加できたので、.husky/pre-commit をnpm run lint-stagedに修正します
echo "npm run lint-staged" > .husky/pre-commitこれでgit commit時にステージングされたjs,ts,jsx,tsxに対して ESLint を実行できるようになります
参考：【2024/01 最新】husky + lint-staged でコミット前に lint を強制する方法
おわりに
今回、色々な記事を参考にしながら ESLint と Prettier を設定しました
設定する項目が多く大変でしたが、この記事が未来の自分や他の方のお役に立てば幸いです
ここまでご覧いただきありがとうございました
