DEV Community

niwoshi for Takenoko Tech LLC.

Posted on • Edited on

Next.js(TypeScript)のプロジェクト作成 ESLint+Prettier(@2022-06-29)

ちょっと色々変わってないか確認がてらプロジェクトの作成をまとめなおします。

この辺は気がついたら推奨設定が変わってたりするのでちょいちょい見直したいところです。

プロジェクトの作成

nodeがインストールされた環境を想定しています。まずはプロジェクトを作成しておきます。

npx create-next-app [プロジェクト名] --typescript
Enter fullscreen mode Exit fullscreen mode

必要最低限は上記のコマンドで準備されます。
個人的に頻繁に触りそうなファイル群はsrcというディレクトリにいれときたいので、pagesstylessrcというディレクトリを作成して入れておきます。
Next.jsではデフォルトでsrcというディレクトリが存在すればそちらをpagesが含まれているディレクトリとして認識してくれるので、これで動作します。
とはいえ、絶対パスに"@"を利用したい(いちいちパスを記載するのが面倒)ので、tsconfig.jsonbaseUrlの設定を追加します。

    "incremental": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
Enter fullscreen mode Exit fullscreen mode

これで相対パスを省略して記載できます。

一応動作を確認しておきたいので、src/pages/index.tsxの4行目を下記のように変更してみます。

import styles from '@/styles/Home.module.css'
Enter fullscreen mode Exit fullscreen mode

動作チェックです。

yarn dev
Enter fullscreen mode Exit fullscreen mode

問題無く表示されればOKです。

Voltaでnodeとyarnのバージョン固定

自分はnodeのバージョン管理にVoltaを利用しています。

ある程度よしなにしてくれるのでほっといてもいい気はしますが、トラブルに巻き込まれた際に面倒になるのでnodeとyarnのバージョンをプロジェクトで固定しておきます。

volta pin node@16
volta pin yarn@1.22
Enter fullscreen mode Exit fullscreen mode

ESLint+Prettier

ESLint

create-next-appで作成していれば必要最低限の準備は既に出来ています。
試しに、.eslintrc.jsonを次のように書き換えて、セミコロンの警告を出します。

{
  "extends": "next/core-web-vitals",
  "rules": {
    "semi": ["error", "never", {"beforeStatementContinuationChars": "never"}],
    "semi-spacing": ["error", {"after": true, "before": false}],
    "semi-style": ["error", "first"],
    "no-extra-semi": "error",
    "no-unexpected-multiline": "error",
    "no-unreachable": "error"
  }
}
Enter fullscreen mode Exit fullscreen mode

index.tsxなどのどこかにセミコロンを記入して

yarn lint
Enter fullscreen mode Exit fullscreen mode

すると警告が表示されると思います。
この時点で

yarn lint --fix
Enter fullscreen mode Exit fullscreen mode

で修正まで入るようになります。

Prettier

整形は例にならってPrettierで行います。よって、先ほど追加したセミコロンのルールは削除してしまって構いません。(ESLint -> Prettierの順番で実行しようと考えているのでどうせ上書きされる)
PrettierとESLintのプラグインをインストールしておきます。

yarn add -D -E prettier
yarn add -D eslint-config-prettier
Enter fullscreen mode Exit fullscreen mode

eslint-config-prettierの設定を適応させるために、.eslintrc.jsonを書き換えておきます。

{
  "extends": ["next/core-web-vitals", "prettier"],
  "rules": {
    "semi": ["error", "never", {"beforeStatementContinuationChars": "never"}],
    "semi-spacing": ["error", {"after": true, "before": false}],
    "semi-style": ["error", "first"],
    "no-extra-semi": "error",
    "no-unexpected-multiline": "error",
    "no-unreachable": "error"
  }
}
Enter fullscreen mode Exit fullscreen mode

package.jsonに書いてもいいんですが、既に.eslintrc.jsonも生成されてますので、.prettierrc.jsonを作成してそこにPrettierの設定を書いておきます。
とりあえず自分の必要最低限のモノだけ書いています。

{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "jsxSingleQuote": true
}
Enter fullscreen mode Exit fullscreen mode

Prettierでプロジェクト全体を整形したい場合用に、package.jsonscriptsformatというコマンドを追加しておきます。

    "format": "prettier --write ./**/*.{js,jsx,ts,tsx,json,css} --ignore-path .gitignore"
Enter fullscreen mode Exit fullscreen mode

とりあえず上記までで

yarn lint --fix
yarn format
Enter fullscreen mode Exit fullscreen mode

で全体を解析+フォーマットできるようになりました。
ここから先はお好みで、ローカルで解析やテストを回すなら「husky+lint-staged」、コミット先でやるなら「Github ActionsでESLint+Prettier+テスト」という構成などが考えられると思います。

参考

https://qiita.com/mysticatea/items/9da94240f29ea516ae87

Top comments (0)