Next.js + TypeScript + ESLint + Prettier 設定例

JavaScript Standard Style を用いた設定

Next.js プロジェクト作成

npx create-next-app project_name
cd project_name

src ディレクトリにまとめる

mkdir src && mv pages styles src

typescript の導入

mv src/pages/index.js src/pages/index.tsx
mv src/pages/_app.js src/pages/_app.tsx
mv src/pages/api/hello.js src/pages/api/hello.ts
yarn add --dev typescript @types/react @types/node
yarn build

ビルドすると tsconfig.json が生成される

tsconfig の strict を true にする (Mac 版)

BSDのsed

sed -i '' 's/\"strict\"\: false/\"strict\"\: true/' tsconfig.json

ESLint と Prettier の導入

yarn add --dev \
  eslint \
  prettier \
  @typescript-eslint/eslint-plugin \
  @typescript-eslint/parser \
  eslint-config-standard \
  eslint-config-prettier \
  eslint-plugin-standard \
  eslint-plugin-prettier \
  eslint-plugin-react \
  eslint-plugin-node \
  eslint-plugin-import \
  eslint-plugin-promise

.eslintrc.json の設定

cat << EOF > .eslintrc.json
{
  "extends": [
    "standard",
    "plugin:prettier/recommended",
    "plugin:react/recommended"
  ],
  "plugins": ["@typescript-eslint"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "@typescript-eslint/adjacent-overload-signatures": "error",
    "prettier/prettier": [
      "warn",
      {
        "singleQuote": true,
        "semi": false
      }
    ],
    "yoda": "off",
    "react/prop-types": "off",
    "react/react-in-jsx-scope": "off",
    "import/first": "off",
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": [
      "warn",
      {
        "argsIgnorePattern": "^_"
      }
    ],
    "no-dupe-class-members": "off",
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": ["error"]
  },
  "globals": {
    "fetch": false
  }
}
EOF

おまけ（コミット）

git add .
git commit -m "init"