Next.jsでprettierの設定

Next.jsでprettierを設定する最低限の設定をまとめます。

モジュールのインストール

yarn add -D eslint-config-prettier prettier @typescript-eslint/parser

.eslintrc.json の修正

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "project": "./tsconfig.json",
    "sourceType": "module"
  },
  "extends": ["next/core-web-vitals", "prettier"]
}

.eslintignore の作成

node_modules/
build/
public/

.prettierrc の作成

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "proseWrap": "always"
}