ちょっと色々変わってないか確認がてらプロジェクトの作成をまとめなおします。
この辺は気がついたら推奨設定が変わってたりするのでちょいちょい見直したいところです。
プロジェクトの作成
nodeがインストールされた環境を想定しています。まずはプロジェクトを作成しておきます。
npx create-next-app [プロジェクト名] --typescript
必要最低限は上記のコマンドで準備されます。
個人的に頻繁に触りそうなファイル群はsrcというディレクトリにいれときたいので、pages、stylesはsrcというディレクトリを作成して入れておきます。
Next.jsではデフォルトでsrcというディレクトリが存在すればそちらをpagesが含まれているディレクトリとして認識してくれるので、これで動作します。
とはいえ、絶対パスに"@"を利用したい（いちいちパスを記載するのが面倒）ので、tsconfig.jsonにbaseUrlの設定を追加します。
"incremental": true,
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
これで相対パスを省略して記載できます。
一応動作を確認しておきたいので、src/pages/index.tsxの4行目を下記のように変更してみます。
import styles from '@/styles/Home.module.css'
動作チェックです。
yarn dev
問題無く表示されればOKです。
Voltaでnodeとyarnのバージョン固定
自分はnodeのバージョン管理にVoltaを利用しています。
ある程度よしなにしてくれるのでほっといてもいい気はしますが、トラブルに巻き込まれた際に面倒になるのでnodeとyarnのバージョンをプロジェクトで固定しておきます。
volta pin node@16
volta pin yarn@1.22
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"
}
}
index.tsxなどのどこかにセミコロンを記入して
yarn lint
すると警告が表示されると思います。
この時点で
yarn lint --fix
で修正まで入るようになります。
Prettier
整形は例にならってPrettierで行います。よって、先ほど追加したセミコロンのルールは削除してしまって構いません。（ESLint -> Prettierの順番で実行しようと考えているのでどうせ上書きされる）
PrettierとESLintのプラグインをインストールしておきます。
yarn add -D -E prettier
yarn add -D eslint-config-prettier
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"
}
}
package.jsonに書いてもいいんですが、既に.eslintrc.jsonも生成されてますので、.prettierrc.jsonを作成してそこにPrettierの設定を書いておきます。
とりあえず自分の必要最低限のモノだけ書いています。
{
"trailingComma": "all",
"tabWidth": 2,
"semi": false,
"singleQuote": true,
"jsxSingleQuote": true
}
Prettierでプロジェクト全体を整形したい場合用に、package.jsonのscriptsにformatというコマンドを追加しておきます。
"format": "prettier --write ./**/*.{js,jsx,ts,tsx,json,css} --ignore-path .gitignore"
とりあえず上記までで
yarn lint --fix
yarn format
で全体を解析＋フォーマットできるようになりました。
ここから先はお好みで、ローカルで解析やテストを回すなら「husky+lint-staged」、コミット先でやるなら「Github ActionsでESLint+Prettier+テスト」という構成などが考えられると思います。
Top comments (0)