memonext

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

imatomix
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. 拡張機能で ESLint と Prettier をインストールする。
  2. 設定でDefault FormatterにPrettierを選択し、Format On Save にチェックを入れる。
image