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

自動のフォーマッターなどの設定を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のバージョン管理ソフトをインストール
```bash
curl https://get.volta.sh | bash
```
nodeをインストール
```bash
~$ volta install node
success: installed and set node@18.13.0 (with npm@8.19.3) as default
~$ cd fronttest/
```
viteでプロジェクトを作ります。
```bash
$ 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](https://commitlint.js.org/#/)
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](https://typicode.github.io/husky/#/)
```
npx husky-init && npm install
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'
```
以降Huskyの設定がところどころ入ります。

#### [commitizen](https://github.com/commitizen/cz-cli)
commitメッセージの入力スタイルを強制できるcommitizenをインストールしますが、こちらはnpmのパッケージではなく、vscodeの拡張機能で使います。設定ファイルをつくり.cz-config.cjsとして保存。
下の設定で呼び出します。
設定ファイルは[こちら](https://qiita.com/manak1/items/e094338fd68e99d20876)のを編集して使用しました。
```
  "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を押すと自動でファイルが作られ記載されます。

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

#### VSCodeの設定

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

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

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

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

#### ESLintをインストール

```bash
$ 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
```js
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

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

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

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