はじめに
環境
・node -v：v20.12.1
・yarn -v：1.22.19
create-next-appでプロジェクトを作成する
yarn create next-app --typescript my-app上記のコマンドでプロジェクトを作成しましょう。
いろいろ聞かれますが、下記のように回答します。
eslintの設定
コマンドの追加
ルート直下にある「package.json」を以下のように修正します。
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
+ "lint:fix": "next lint --fix",
"lint": "next lint"
},
"dependencies": {
"next": "14.1.4",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.1.4",
"typescript": "^5"
}
}
これで「yarn lint:fix」でeslintにエラーがあれば自動で修正が可能になりました
設定を追加する
ルート直下にある「.eslintrc.json」を以下のように修正します。
{
"extends": "next/core-web-vitals",
+ "rules": {
+ "no-console": "error",
+ "indent": ["error", 2]
+ }
}今回は「console.logを使用したらエラー」「インデントは2つでなければエラー」というルールを設定しました。
prettierの設定
prettierのインストール
yarn add -D prettier上記のコマンドでprettierをインストールしましょう。
コマンドの追加
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
+ "format": "prettier --write ./src",
"lint:fix": "next lint --fix",
"lint": "next lint"
},
"dependencies": {
"next": "14.1.4",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.1.4",
"prettier": "^3.2.5",
"typescript": "^5"
}
}
設定を追加する
ルート直下に「.prettierrc」というファイルを作成し、以下のように修正しましょう。
{
"tabWidth": 4
}今回は「インデントは4つでなければエラー」というルールを設定しました。
あえてeslintで設定した「インデントは2つでなければエラー」というルールと衝突するようにしています。
後で修正しましょう。
eslintとprettierを連携させるライブラリの設定
eslint-config-prettierのインストール
yarn add -D eslint-config-prettier上記のコマンドでeslintとprettierを連携させるライブラリをインストールしましょう。
コマンドの追加
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"format": "prettier --write ./src",
+ "conflict": "eslint-config-prettier 'src/**/*.{js,jsx,ts,tsx}'",
"lint:fix": "next lint --fix",
"lint": "next lint"
},
"dependencies": {
"next": "14.1.4",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.1.4",
"eslint-config-prettier": "^9.1.0",
"prettier": "^3.2.5",
"typescript": "^5"
}
}
「yarn conflict」でeslintとprettierの設定に重複（衝突）するものはないかを確認してくれます。
全てを実行するコマンドの追加
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"format": "prettier --write ./src",
"conflict": "eslint-config-prettier 'src/**/*.{js,jsx,ts,tsx}'",
"lint:fix": "next lint --fix",
"lint": "next lint",
+ "fix": "yarn conflict && yarn lint && yarn format"
},
"dependencies": {
"next": "14.1.4",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.1.4",
"eslint-config-prettier": "^9.1.0",
"prettier": "^3.2.5",
"typescript": "^5"
}
}
これで「yarn fix」を行うと以下を行ってくれます。
①eslintとprettierの設定に重複（衝突）するものはないかを確認
②eslintでコードを確認し、修正可能なものは修正する
③prettierでコードをフォーマットする
確認
import "@/styles/globals.css";
import type { AppProps } from "next/app";
export default function App({ Component, pageProps }: AppProps) {
+ console.log('hoge');
return <Component {...pageProps} />;
}
今回はeslintエラーを表示させるためにあえて、上記のように修正します。
yarn fix上記のコマンドで確認しましょう。
うまくいけばeslintとprettierの設定が衝突していることを教えてくれます。
今回はeslintのindentが衝突しているようです。
下記のように修正しましょう。
{
"extends": ["next/core-web-vitals", "prettier"],
"rules": {
"no-console": "error"
- "indent": ["error", 2]
}
}
修正が済んだら再び下記のコマンドを叩きます。
yarn fix今度は下記のようなエラーが出るはずです。
これは「eslintとprettierは衝突していませんが、「./src/pages/_app.tsx」の5行目にconsole.logがあるので削除してください」と言われてます。
下記のように修正しましょう。
import "@/styles/globals.css";
import type { AppProps } from "next/app";
export default function App({ Component, pageProps }: AppProps) {
- console.log('hoge');
return <Component {...pageProps} />;
}
修正が済んだらもう一度下記のコマンドを叩きます。
yarn fixうまくいけば下記のようにインデントの数が自動で修正されているはずです。
