自動のフォーマッターなどの設定をGithubで管理しておこうと思います。その過程です。（個人開発レベル想定です）

これをしておけば……
コード書く → 保存するとVSCodeでフォーマットされる → コミットする → 自動でコミットメッセージがフォーマットに沿っているかチェックしたり、テストが走ったりする、だめなら弾かれる → いつもキレイやったー

記事日付
2023年1月31日
完成レポジトリ : https://github.com/opvelll/vite-react-project
使いたいときにレポジトリをクローンして設定をコピーしたり、テンプレートとして使ったりします。

今回は
・nodeとnpmで構築します。
・viteとReactが入っている
・自動のフォーマッター（Prettier,ESLint）
・コミットメッセージのチェック(Commitlint)
・VSCodeの設定を管理。
・Docker使わずnodeバージョン管理ソフト使います。
・GitHub Actionsは今回設定しない。ローカル周りの設定

想定環境
・Windows11とWindows Subsystem for Linux(以下WSL)
・理由はHuskyというツールでシェルスクリプトが走るので、ターミナルでシェルスクリプトが動かないと厳しい。

出てくるツール
・Volta
・Vite
・React
・TypeScript
・Vitest
・React Testing Library
・Prettier
・ESLint
・Husky
・ローカルcommitlint(あと VSCode で Commitizen

以下は作成作業工程のログです。

WSL

VSCodeとWSLをインストール
VSCodeにはWSL用プラグインをインストール

Volta

Node.jsのバージョン管理ソフトをインストール

curl https://get.volta.sh | bash

nodeをインストール

~$ volta install node
success: installed and set node@18.13.0 (with npm@8.19.3) as default
~$ cd fronttest/

viteでプロジェクトを作ります。

$ npm create vite@latest
Need to install the following packages:
  create-vite@4.0.0
Ok to proceed? (y) y
✔ Project name: … kp-test
✔ Select a framework: › React
✔ Select a variant: › TypeScript

プロジェクトに移動して、voltaでnodeとnpmのバージョン情報を記録してからnpm install

$ volta pin node npm
success: pinned node@18.13.0 (with npm@8.19.3) in package.json
success: pinned npm@9.4.0 in package.json
$ npm install

git init

VSCodeからinitialize RepositoryとPublish to GitHubを行う

commitlint

commitlintでコミットメッセージのチェック

npm install --save-dev @commitlint/{cli,config-conventional}
echo "module.exports = { extends: ['@commitlint/config-conventional'] };" > commitlint.config.cjs

チュートリアルと違い '.js' を '.cjs' に変更しています。

Husky

git hooksを設定できるHuskyをインストール install

npx husky-init && npm install
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

以降Huskyの設定がところどころ入ります。

commitizen

commitメッセージの入力スタイルを強制できるcommitizenをインストールしますが、こちらはnpmのパッケージではなく、vscodeの拡張機能で使います。設定ファイルをつくり.cz-config.cjsとして保存。
下の設定で呼び出します。
設定ファイルはこちらのを編集して使用しました。

  "config": {
    "cz-customizable": {
      "config": ".cz-config.cjs"
    }
  }

Vitest

テストツールのインストール

$ npm install -D vitest

package.jsonのコマンドを変更

    "test": "vitest",
    "testrun": "vitest run",
    "coverage": "vitest run --coverage",

huskyで実行するコマンドも変更

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run testrun

React Testing Library

npm install --save-dev @testing-library/react

prettierとESLint

コードの自動整形ツールとコーディング規約ツールをインストールします。
これらは後でVSCodeの拡張機能もインストールします。

$ npm install --save-dev --save-exact prettier
$ echo {}> .prettierrc.json

以下は.prettierrcのデフォルト設定

{
    "trailingComma": "es5",
    "tabWidth": 4,
    "semi": false,
    "singleQuote": true
}

次に.prettierignoreファイルを作って.gitignoreの内容をコピペ。
node_modulesをとりあえず弾きます。

試す

$ npx prettier --write .

VSCodeの拡張機能からPrettierをインストール

VSCodeのPrettierをインストールします。
さらに.vscode/extension.jsonファイルを作りGitで管理して、プロジェクトに必要な拡張機能を指定します。

拡張機能を検索して、欄の歯車からAdd workspace recommendationsを押すと自動でファイルが作られ記載されます。

{
    "recommendations": [
        "esbenp.prettier-vscode",
        "knisterpeter.vscode-commitizen",
        "dbaeumer.vscode-eslint"
    ]
}

VSCodeの設定

設定ファイルも同じように管理します。
共有する設定は、save時に自動でフォーマットや、デフォルトのフォーマッターなどです。

ルートフォルダの上で右クリック＞Open Folder Settingを開いて、defaultのformatterを上記のものに、save時に自動でフォーマットするように変更。設定すると.vscode/settings.jsonに自動で記載されます。

{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

.gitignoreを変更して上記のVSCode設定が共有されるよう変更します。

ESLintをインストール

$ npm init @eslint/config
Need to install the following packages:
  @eslint/create-config@0.4.2
Ok to proceed? (y) y
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ What format do you want your config file to be in? · JavaScript
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest eslint@latest
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm

生成された.eslintrcを変更します
nodeをtrue
react17以上に対応するためextendsに'plugin:react/jsx-runtime'を追加
参考: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/react-in-jsx-scope.md#when-not-to-use-it

module.exports = {
    env: {
        browser: true,
        es2021: true,
        node: true,
    },
    extends: [
        'eslint:recommended',
        'plugin:react/recommended',
        'plugin:react/jsx-runtime',
        'plugin:@typescript-eslint/recommended',
    ],
    overrides: [],
    parser: '@typescript-eslint/parser',
    parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
    },
    plugins: ['react', '@typescript-eslint'],
    rules: {},
}

prettierと干渉しないようにするプラグインもインストール

npm install --save-dev eslint-config-prettier

.eslintrcに追加

{
  "extends": [
    "some-other-config-you-use",
    "prettier"
  ]
}

試す

 npx eslint ./src

huskyを設定して、PrettierとESlintがpre-commit hookで実行されるようにします
参考:https://prettier.io/docs/en/precommit.html

npx mrm lint-staged

package.jsonを書き換える

    "lint-staged": {
        "*.{js,jsx,cjs,mjs,json,ts,tsx,html,css}": [
            "eslint --cache",
            "prettier --write"
        ],
        "*.md": "prettier --write"
    }

（eslintのcacheファイルを.gitignoreで除外するよう設定しておく。）

これでcommit時にローカルでeslintとprettierが走るようになりました。

VSCode上でmasterブランチにコミットしないように保護する

F1 > Open Setting > Git: Branch Protection > Add Item

ブランチ名を入力
設定ファイルに反映される。

{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "git.branchProtection": ["master"]
}

まとめ

基本的な設定を完了したので、これをベースに制作しながら調整したいと思います。