はじめに
Next.js13の開発環境構築手順 step02 をやっていこうと思います。
Next.jsのベーシックな設定を確認する
Next.jsのベーシックなESLintの設定を確認するために、まずは以下のドキュメントを読みました。
eslint-config-next の確認をする
Next.js アプリケーションを create したときに生成された package.json の dependencies に初めから eslint-config-next があったので、どのようなpluginが既に含まれているか、 node_modules/eslint-config-next/index.js を確認しました。
.eslintrc.js に root: true を設定する
以下の通り .eslintrc.js を編集します。
module.exports = {
extends: [
'next/core-web-vitals',
],
root: true,
};
以下の eslint v8 のページを参考にしています。
eslintrc は eslint v9 以降では非推奨となっており、 root プロパティも無くなっているようです。
eslint:recommended の設定を追加する
ベースとして eslint:recommended の設定を適用します。
以下の通り .eslintrc.js を編集します。
module.exports = {
extends: ["eslint:recommended", "next/core-web-vitals"],
root: true,
};
@typescript-eslint/eslint-plugin をインストールして設定する
TypeScriptで書いていくので @typescript-eslint の recommended な設定を適用します。
パッケージをインストールします。
npm install --save-dev @typescript-eslint/eslint-plugin
以下の通り .eslintrc.js を編集します。
module.exports = {
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/recommended-requiring-type-checking',
'next/core-web-vitals',
],
plugins: ['@typescript-eslint'],
parserOptions: {
project: true,
tsconfigRootDir: __dirname,
},
root: true,
};
記述した内容について、基本的なことを一応補足しておきます。
pluginsに @typescript-eslint を追加することで、今インストールした @typescript-eslint/eslint-plugin に定義されたルールが使用可能になります。
ただ、これだけでは使用可能になるだけで、実際にルールを適用しているわけではないので、extends に plugin:@typescript-eslint/recommended と plugin:@typescript-eslint/recommended-requiring-type-checking を追記することで、ルールが適用されます。
どのルールを適用するか（extendsするか）については、以下のページを参考にして決めました。
- https://typescript-eslint.io/linting/configs/
- https://typescript-eslint.io/linting/typed-linting/
- https://typescript-eslint.io/architecture/parser/#project
上記した参考ドキュメント ( https://typescript-eslint.io/linting/configs/ ) に
We recommend most projects use recommended-requiring-type-checking (which requires typed linting).
ほとんどのプロジェクトでは、required-requiring-type-checking (型付きリンティングが必要) を使用することをお勧めします。
と書いてあったので plugin:@typescript-eslint/recommended-requiring-type-checking も設定しています。
また、( https://typescript-eslint.io/architecture/parser/#project )には
This option allows you to provide a path to your project's tsconfig.json. This setting is required if you want to use rules which require type information.
このオプションを使用すると、プロジェクトの tsconfig.json へのパスを指定できます。 タイプ情報を必要とするルールを使用する場合は、この設定が必要です。
と記載されているため parserOptions の設定もしています。
prettier と eslint-config-prettier をインストールして設定する
インストール
以下のコマンドを実行しました。
npm install --save-dev prettier eslint-config-prettier
.eslintrc.jsの設定をする
以下の通り .eslintrc.js を編集します。
module.exports = {
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/recommended-requiring-type-checking',
'next/core-web-vitals',
'prettier',
],
plugins: ['@typescript-eslint'],
parserOptions: {
project: true,
tsconfigRootDir: __dirname,
},
root: true,
};
prettierは以下の公式ドキュメントに倣って extends の最後に記述しています。
.prettierrcを作成する
ファイルを作成します。
vim .prettierrc
以下の内容を記述します。
{
"printWidth": 120,
"semi": true,
"singleQuote": true,
"tabWidth": 2
}
@types/eslint-config-prettier を追加する
typesyncを実行します。
npx typesync
@types/eslint-config-prettier をインストールします。
npm install
eslint-plugin-importを設定する
node_modules/eslint-config-next/index.js を先ほど確認したときに、 eslint-plugin-import が含まれていることは確認できているので、設定だけ追加していきます。
以下の通り extends と rules プロパティに追記します。
module.exports = {
extends: [
'eslint:recommended',
'plugin:import/recommended',
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/recommended-requiring-type-checking',
'next/core-web-vitals',
'prettier',
],
plugins: ['@typescript-eslint'],
parserOptions: {
project: true,
tsconfigRootDir: __dirname,
},
root: true,
rules: {
'import/order': [
'error',
{
groups: [
'builtin',
'external',
'internal',
'parent',
'sibling',
'index',
'object',
'type',
],
'newlines-between': 'always',
},
],
},
};
以下の 公式ドキュメントを参照して設定しました。
- https://github.com/import-js/eslint-plugin-import
- https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/order.md
plugin:import/recommended については、以下の記載がありました。
'recommended' is the combination of these two rule sets ( 'recommended' は次の 2 つのルール セットの組み合わせです。 ) - plugin:import/errors - plugin:import/warnings
import/order はimportの記述順に関するルールを設定できます。
このrulesについてはプロジェクトのディレクトリ構造が具体的に決まってきたらより詳細に設定するのも良いと思います。
package.json の scripts に lint:fix と format を定義する
package.json の scripts に以下の行を追記します。
"lint:fix": "next lint --fix && format",
"format": "prettier --write './src/**/*.{ts,tsx}'"
eslint と prettier でコードを自動修正する
以下のコマンドを実行して、コードを自動修正します。
npx lint:fix
VSCode の extentions をインストールする
VSCodeのextentionは似たようなのがあったりするので、私が使用しているものの identifier も書いておきます。
ESlint
- identifier: dbaeumer.vscode-eslint
- 参考リンク: ESLint - Visual Studio Marketplace
Prettier
- identifier: esbenp.prettier-vscode
- 参考リンク: Prettier - Code formatter - Visual Studio Marketplace
プロジェクトの VSCode の設定をする
.vscode ディレクトリを作成する
まずディレクトリを作成します。
mkdir .vscode
.vscode/extensions.json を作成する
ファイルを作成します。
vim .vscode/extensions.json
参考までに私は現在以下のような感じで設定しています。適宜必要なものを設定してください。
{
"recommendations": [
"dbaeumer.vscode-eslint", // eslint
"emmanuelbeziat.vscode-great-icons", // iconを変更
"esbenp.prettier-vscode", // prettier
]
}
.vscode/settings.json を作成する
ファイルを作成します。
vim .vscode/settings.json
参考までに私は現在以下のような感じで設定しています。適宜必要なものを設定してください。
{
"editor.fontFamily": "Cica",
"editor.fontSize": 18,
"editor.insertSpaces": true, // Tabキーで半角スペースを入力
"editor.matchBrackets": "always", // 対応する括弧の強調表示
"editor.renderWhitespace": "all", // 空白文字を可視化 "all" | "boundary"
"editor.tabSize": 2, // Tabキーで半角スペースn個分
"editor.wordWrap": "on", // 1行に収まらない場合は改行して表示する
"editor.formatOnSave": false, // ファイル保存時、prettier による自動フォーマット
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
"[graphql]": {
"editor.formatOnSave": true
},
"[javascript]": {
"editor.formatOnSave": true
},
"[javascriptreact]": {
"editor.formatOnSave": true
},
"[json]": {
"editor.formatOnSave": true
},
"[typescript]": {
"editor.formatOnSave": true
},
"[typescriptreact]": {
"editor.formatOnSave": true
}
}
今回はここまでにしておきます。
