前回までのおさらい

ようやくPrettier！！！

eslintとの違いを理解

導入

Prettier を devDependencies に追加

npm i -D prettier eslint-config-prettier

.eslintrc.cjs に以下を追加する

.eslintrc.cjs

"extends": [
    ...
+    "prettier" 
],

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

.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を併用

package.json の scripts の lint を以下のように書き換える
ESLint の前に Prettier が走るようにした

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",
}

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

huskyをインストール

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

npm install -D husky

huskyの初期設定

npx husky init

作成されたpre-commitファイルを編集

pre-commit

-    npm test
+    make test //後でMakeFileを作成します

MakeFileを作って効率を上げる

MakeFileをroot直下に作成

MakeFile

test:
	cd frontend && npm run lint && npm run testrun

コミットしてみよう！

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

結果　(✅成功)

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

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(-)

結果　(❌失敗)

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

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)

Prettier,huskyの設定をしてみた