Next.js・TypeScript 環境のESLintとPrettierの設定方法まとめ

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、Next.js・TypeScript 環境のESLintとPrettierの設定方法について解説していきます。

1 Next.js・TypeScript 環境のESLintとPrettierの設定方法まとめ
2 Twitterやってます！Follow Me！
3 React関連の書籍
4 プログラミング学習・エンジニア転職関連の情報
5 最近の投稿

Next.js・TypeScript 環境のESLintとPrettierの設定方法まとめ

以前に、Next.js・TypeScript 環境をDockerで構築する方法を記事にしているので、

そのプロジェクトにESLintとPrettierの設定を追加していきます。

Next.js・TypeScript・StoryBook・MUI・Recoilの環境をDockerで構築する方法

ESLint の設定をする

Next.jsのプロジェクトを作成する際には、create-next-appを使用すると、デフォルトでESLintの設定が済んだNext.jsプロジェクトが作成されます。

なので、その設定をカスタマイズしていきます。

ちなみに、Next.jsの設定ファイルであるnext.config.jsを使用することで、特定のディレクトリに対してESLintを適用することも可能です。

Next.jsにはESLintプラグインであるeslint-plugin-nextが用意されており、

Next.jsアプリケーションの一般的な問題や課題を簡単に検出することができるので、今回は、それも追加します。

### ESLint導入 Ver. Next.js & TypeScript

# TypeScript
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

# React & React-Hooks
yarn add -D eslint-plugin-react eslint-plugin-react-hooks

# Next.js
yarn add -D eslint-config-next

# npm の場合は、次のようになります。
npm i --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser

npm i --save-dev eslint-plugin-react eslint-plugin-react-hooks

npm i -D eslint-config-next

installが完了したら「 .eslintrc.yml 」を Next.jsプロジェクトのルードディレクトリに作成します。

今回の場合は、appディレクトリ直下に作成します。

root: true
parser: "@typescript-eslint/parser"
plugins:
  - "@typescript-eslint"
extends:
  - eslint:recommended
  - next
  - plugin:@typescript-eslint/eslint-recommended
  - plugin:@typescript-eslint/recommended
  - plugin:react/recommended
  - plugin:react-hooks/recommended
  - prettier
rules: {
  # [ 'React' must be in scope when using JSX ] Error対応
  # https://zenn.dev/ryuu/scraps/583dad79532879
  react/react-in-jsx-scope: 'off'
}

Prettier の設定をする

まず、Prettierとその関連パッケージをインストールします。

yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier

# または、、、

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

続いて、「 .prettierrc.js 」を Next.jsプロジェクトのルードディレクトリに作成します。

今回の場合は、appディレクトリ直下に作成します。

module.exports = {
  printWidth: 120, // 折り返す行の長さを指定
  tabWidth: 2, // インデントのスペースの数を指定
  semi: false, // ステートメントの最後にセミコロンを追加
  parser: "typescript", // 使用するパーサーを指定
  arrowParens: "avoid", // アロー関数の()が省略可能でも常に書く => 省略可能なときは()を書かない(デフォルト)
  trailingComma: "es5", // 末尾のカンマの設定
};

Next.js のpackage.json を確認する

Next.js のpackage.json を確認すると、次のような内容になります。

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "dependencies": {
    "@emotion/react": "^11.11.0",
    "@emotion/styled": "^11.11.0",
    "@fontsource/roboto": "^5.0.1",
    "@mui/icons-material": "^5.11.16",
    "@mui/material": "^5.13.2",
    "@mui/styled-engine-sc": "^5.12.0",
    "@types/node": "20.2.3",
    "@types/react": "18.2.6",
    "@types/react-dom": "18.2.4",
    "autoprefixer": "10.4.14",
    "eslint": "8.41.0",
    "eslint-config-next": "^13.4.4",
    "next": "13.4.3",
    "postcss": "8.4.23",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "recoil": "^0.7.7",
    "styled-components": "^5.3.11",
    "tailwindcss": "3.3.2",
    "typescript": "5.0.4"
  },
  "devDependencies": {
    "@storybook/addon-essentials": "^7.0.17",
    "@storybook/addon-interactions": "^7.0.17",
    "@storybook/addon-links": "^7.0.17",
    "@storybook/blocks": "^7.0.17",
    "@storybook/nextjs": "^7.0.17",
    "@storybook/react": "^7.0.17",
    "@storybook/testing-library": "^0.0.14-next.2",
    "@types/recoil": "^0.0.9",
    "@types/styled-components": "^5.1.26",
    "@typescript-eslint/eslint-plugin": "^5.59.7",
    "@typescript-eslint/parser": "^5.59.7",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-storybook": "^0.6.12",
    "prettier": "^2.8.8",
    "storybook": "^7.0.17"
  }
}