Prettier,huskyの設定をしてみた

# 前回までのおさらい

https://qiita.com/Qiitakumin/items/2ccfa99d2b4e58b8ae23

# ようやくPrettier！！！

## eslintとの違いを理解 

https://zenn.dev/mami_inuzuka/articles/3deb24e2726ce9

https://go-tech.blog/nodejs/eslint-and-prettier/#index_id6

## 導入

https://ics.media/entry/17030/

### Prettier を devDependencies に追加
```shell
npm i -D prettier eslint-config-prettier
```

.eslintrc.cjs に以下を追加する
```diff_javascript:.eslintrc.cjs
"extends": [
    ...
+    "prettier" 
],
```

:::note alert
他と競合するルールを上書きして調整するため、必ず一番最後に書くこと
:::

.prettierrc を新規作成し、以下の内容で作成する
``` .prettierrc
{
    "singleQuote": true,
    "endOfLine": "lf",   // 改行コードの指定。"lf" – ラインフィード ( \n)、Linux と macOS および git リポジトリ内で共通
    "printWidth": 120,   // 長い行を折り返す位置を指定  デフォルト:80
    "tabWidth": 2,
    "trailingComma": "es5",   // 複数要素の末尾の後ろにカンマを付与するかどうか。"es5" - ES5で有効な末尾のカンマ。TypeScriptの型パラメーターに末尾のカンマはありません。
    "arrowParens": "always",   // アロー関数のパラメーターをカッコで囲む
    "semi": true
}
```

### eslintとprettierを併用

https://www.sunapro.com/eslint-with-prettier/

package.json の scripts の lint を以下のように書き換える  
ESLint の前に Prettier が走るようにした
```diff_json:package.json
"scripts": {
-    "lint": "eslint ./src --ext ts,tsx --report-unused-disable-directives --fix",
+    "lint": "prettier ./src --write && eslint ./src --ext ts,tsx --report-unused-disable-directives --fix",
}
```

### なんならコミットの時も実行できる

https://zenn.dev/otomoti_27/articles/692e1308ce849b

https://typicode.github.io/husky/get-started.html

#### huskyをインストール
いずれbackendを追加するため、root直下でインストール

```shell
npm install -D husky
```

#### huskyの初期設定

```shell
npx husky init
```

作成された`pre-commit`ファイルを編集
```diff:pre-commit
-    npm test
+    make test //後でMakeFileを作成します   
```


#### MakeFileを作って効率を上げる

https://zenn.dev/yuki_tu/articles/ad7f95b0b2482e

MakeFileをroot直下に作成
```makefile:MakeFile
test:
	cd frontend && npm run lint && npm run testrun
```

#### コミットしてみよう！

```shell
 git add . 
 git commit -m "ハスキー犬追加"
```

#### 結果　(✅成功)

:::note info
無事、テストを実行した上で、コミットできた！！
:::

```diff_shell
cd frontend && npm run lint && npm run testrun

> frontend@0.0.0 lint
> prettier ./src --write && eslint ./src --ext ts,tsx --report-unused-disable-directives --fix

src/add.ts 83ms (unchanged)
src/App.css 15ms (unchanged)
src/App.tsx 13ms (unchanged)
src/index.css 4ms (unchanged)
src/main.tsx 3ms (unchanged)
src/MyComponent.tsx 2ms (unchanged)
src/tests/add.test.ts 1ms (unchanged)
src/tests/MyComponent.test.tsx 2ms (unchanged)
src/vite-env.d.ts 1ms (unchanged)

> frontend@0.0.0 testrun
> vitest run


 RUN  v1.5.0 ~省略~

stdout | src/tests/MyComponent.test.tsx > 「Hello Test」が描画されている
<body>
  <div>
    <div>
      Hello Test
    </div>
  </div>
</body>

 ✓ src/tests/add.test.ts (1)
 ✓ src/tests/MyComponent.test.tsx (1)

+ Test Files  2 passed (2)
+      Tests  2 passed (2)
   Start at  15:23:15
   Duration  436ms (transform 23ms, setup 76ms, collect 104ms, tests 15ms, environment 290ms, prepare 91ms)

[main ee05ad4] ハスキー犬追加
 2 files changed, 3 insertions(+), 2 deletions(-)

```


#### 結果　(❌失敗)

:::note alert
失敗した時は、pushできずにテストが終了する
:::


```diff_shell
cd frontend && npm run lint && npm run testrun

> frontend@0.0.0 lint
> prettier ./src --write && eslint ./src --ext ts,tsx --report-unused-disable-directives --fix

src/add.ts 86ms (unchanged)
src/App.css 15ms (unchanged)
src/App.tsx 12ms (unchanged)
src/index.css 4ms (unchanged)
src/main.tsx 2ms (unchanged)
src/MyComponent.tsx 1ms (unchanged)
src/tests/add.test.ts 2ms (unchanged)
src/tests/MyComponent.test.tsx 2ms (unchanged)
src/vite-env.d.ts 1ms (unchanged)

/~省略~/pairTodoApp/frontend/src/App.tsx
  6:1  error  Missing return type on function  @typescript-eslint/explicit-function-return-type

- ✖ 1 problem (1 error, 0 warnings)

make: *** [test] Error 1
husky - pre-commit script failed (code 2)

```