【脳死でやろう】Next.jsのプロジェクトにeslint+typescript+prettierでCI環境を導入する

概要

どうせ後で入れることになるし、先にlinter+CI環境作っちゃおうぜ！という記事
多少面倒でも、秩序が保たれるので絶対やったほうが良い設定だと思っています。

手順

with-typescriptでnextプロジェクトを作る

$ npx create-next-app --example with-typescript sandbox-create-next-app-ts

lintを導入する

$ npm i -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

プロジェクトルートに設定ファイルを作る。

.eslintrc.js

module.exports = {
  extends: [
    'eslint:recommended',
    'airbnb',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'prettier/@typescript-eslint',
  ],
  plugins: ['@typescript-eslint'],
  parser: '@typescript-eslint/parser',
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
      },
    },
  },
  rules: {
    'react/jsx-filename-extension': [
      2,
      { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
    ],
  },
};

prettierを導入する

$ npm i -D prettier eslint-plugin-prettier eslint-config-prettier

こちらもプロジェクトルートに設定ファイルを作る。

.prettierrc.js

module.exports = {
  singleQuote: true,
}

husky + lint-stagedを導入する

$ npm i -D lint-staged husky

package.jsonの末尾に設定を追加する。
以下はtscでの型チェック＋ステージングされているファイルのprettier自動成形を行う設定。

好みでeslintやjestもワークフローに追加するといいと思います。（筆者は@typescript-eslint/recommendedを守る自信がなかった）

package.json

  "husky": {
    "hooks": {
      "pre-commit": "tsc -p src && lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,tsx}": [
      "prettier --write"
    ]
  }

(オプション)絶対パスでimportできるようにする

相対パス地獄はつらいので、絶対パスでimportできるようにします。

tsconfigにbaseUrlを追記する。指定したパスが絶対パスの起点になる。

tsconfig.json

    "baseUrl": ".",

このまま絶対パスインポートしようとするとeslintにimport/no-unresolvedと怒られるので、パッケージを追加する。（参考）

$ npm install -D eslint-import-resolver-typescript

eslintrcのsettingsを追加する。

eslintrc.js

  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
      },
      typescript: {},  // 追加
    },
  },