dev next

Next.js + Typescript での ESLint と Prettier の設定

Keita Imatomi
2021-2-16 13:20

僕は基本、Linter や Formatter にこだわりはないので、一緒に仕事するエンジニアさんに合わせます。

以下は、個人的にはこんな感じかなぁというものです。

パッケージのインストール

ESLint関連とPrettier関連のパッケージを追加する。

$ npm i -D \
    eslint \
    prettier \
    @typescript-eslint/eslint-plugin \
    @typescript-eslint/parser \
    eslint-plugin-react \
    eslint-config-prettier \

設定ファイル

.eslintrc.json

インストールしたパッケージや設定を記述していく。Next.js の場合react-in-jsx-scopeは不要(Next.jsがやってくれる)なのでオフにしておく。

/.eslintrc.json

{ "extends": [ "eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended", "prettier" ], "plugins": ["@typescript-eslint", "react"], "parser": "@typescript-eslint/parser", "env": { "browser": true, "commonjs": true, "es6": true, "node": true }, "settings": { "react": { "version": "detect" } }, "rules": { "react/react-in-jsx-scope": "off" } }

.prettierrc.json

お好みで

  • シングルクォーテーションを使用
  • 末尾のセミコロンを不要

prettierrc.json

{ "singleQuote": true, "semi": false }

.prettierignore

公式 の通り

.prettierignore

node_modules **/.next/** **/_next/** **/dist/** packages/next/bundles/webpack/packages/*.runtime.js packages/next/compiled/** packages/react-refresh-utils/**/*.js packages/react-refresh-utils/**/*.d.ts packages/react-dev-overlay/lib/** **/__tmp__/** lerna.json .github/actions/next-stats-action/.work packages/next-codemod/transforms/__testfixtures__/**/* packages/next-codemod/transforms/__tests__/**/* packages/next-codemod/**/*.js packages/next-codemod/**/*.d.ts packages/next-env/**/*.d.ts test-timings.json

VS Code

  1. 拡張機能で ESLintPrettier をインストールする。
  2. 設定でDefault FormatterPrettierを選択し、Format On Save にチェックを入れる。

image

こちらもどうぞ