フロントエンド開発環境用に諸々の設定したレポジトリを作っておく

自動のフォーマッターなどの設定を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"]
}

まとめ

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