Next.js(TypeScript)의 프로젝트 제작 ESLint+Prettier(＠2022-06-29)

ちょっと色々変わってないか確認がてらプロジェクトの作成をまとめなおします.
この辺は気がついたら推奨設定が変わってたりするのでちょいちょい見直したいところです.

프로제크트의 작성

노드가 인스톨사れた環境を想定しています.まずはprojektoを作成しておきます.

npx create-next-app [プロジェクト名] --typescript

必要最低限は上記のコマンドで準備されます.
個人的に頻繁に触りそうなファyl群は 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のバージョン管理にVoltaを利用 しています.
ある程度よしなにしてくれるのでほっといてもいい気はしますが、TRABLUに巻き込まれた際に面倒になるのでnodeとyarnのバージョンをプロジェクトで固定しておきます.

volta pin node@16
volta pin [email protected]

ESLint+Prettier

ESLint

create-next-app를 만들려면 어떻게 해야 합니까?
예, .eslintrc.jsonを次のように書き換えて, semicolonの警告を出します.

{
  "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で行います.よって, 先ほど追加したセミコロンのルールールは削除してしまって構いません.(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の設定を書いておきます.
とりあえず自分の必要最低限のmonoだけ書いています.

{
  "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

で全體を解析＋フォーmattで きるようになりました.
ここから先はお好みで、ローカルで解析やtestを回すなら「husky+lint-staged」, コ밋트先でやるなら「Github ActionsでESLint+Prettier+test」라고 말해 주세요.

参考

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