Soucetreeからのコミット時にeslintとstylelintとprettierする

本日（2022.12.01）から始まりました **「un-T factory! XA Advent Calendar 2022」** の一番槍をつとめさせていただきます。どうぞよろしくおねがいします🙇‍♂️

唐突ですが…
**「リント、してますか？」** （※長嶋●雄の声で）
<img width="200" alt="野球の監督" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221915/1fad1deb-220a-74dd-6196-dafa56bc7f4b.png">

…というわけで、今回はタイトルのとおり **「Soucetreeからのコミット時にeslintとstylelintとprettierする」** 設定をご紹介いたします。

個人のクセによる無駄な差分の発生や構文エラーは、作業の効率や開発者の士気を低下させてしまいます😔
チーム開発する際には各種linterを活用して、コーディングルールを遵守したエラーのないコードで運用していきたいものですよね。

**Gitへのコミット時に自動的に構文チェックと整形が実行される**…そんな便利な開発環境（フロントエンド）の設定方法です。

対象ファイルはとりあえず以下の3種とします。
```
*.pug
*.ts
*.scss
```
※コミットメッセージについてのチェックは今回は割愛します。

以下、使用するツール（アプリ）です。
```
Git
husky
eslint
stylint
prettier

Sourcetree
VSCode
```

# eslintの設定
**eslint** とは **JavaScript（TypeScript）** のための静的検証ツールです。

[> eslint - npm](https://www.npmjs.com/package/eslint)

チェック項目は **.eslintrc.json** というファイルを作成し設定します。
膨大な項目数にめまいがしそうですが、標準で用意されている ```eslint:recommended``` のようなプリセットを活用し、特定の項目を ```"rules"``` で上書きすることもできます。

[> ESLint 設定を作成する技術](https://zenn.dev/januswel/articles/402774d76424e71ac906)

# stylelintの設定
**stylelint** とは **CSS** の構文チェックツールです。

[> stylelint - npm](https://www.npmjs.com/package/stylelint)

チェック項目は **.stylelintrc** というファイルを作成し設定します。
こちらもeslint同様、プリセットを活用するのもおすすめです。

プロパティの並び順を入れ替えるようにすると、管理しやすくなり効率がアップします。

[> Sass(SCSS) の stylelint ルールは stylelint-config-sass-guidelines に任せたい ++ Gaji-Laboブログ](https://www.gaji.jp/blog/2022/02/08/9086/)

# prettierの設定
**prettier** とはソースコードを**整形**してくれるツール（コードフォーマッター）です。

[> prettier - npm](https://www.npmjs.com/package/prettier)

多くのファイル形式やエディタに対応しています。

[> Prettier · Opinionated Code Formatter](https://prettier.io/)

# huskyの設定
**husky** とは **Git hooksを使用しコミットやプッシュ時に任意のコマンドを走らせる** ことができるnpmパッケージです。

[> Husky - Git hooks](https://typicode.github.io/husky/#/)

以下、コミット時に **eslint** , **stylelint** 、 **prettier** を実行させる設定例です。
これによりコミット時にはいやがおうにもコードは綺麗に整形され、エラーがある場合にはそのエラーを解消するまでコミットできなくなります。

```json:package.json
{
  "scripts": {
    "lint:css": "stylelint 'src/scss/**/*.scss'",
    "lint:js": "eslint 'src/ts/**/*.ts'",
    "format": "prettier --write 'src/**/*.{pug,scss,ts}'",
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.ts": "yarn lint:js",
    "src/**/*.scss": "yarn lint:css",
    "src/**/*.{js,ts,json,css,scss}": "yarn format"
  }
}
```

# Soucetreeの設定
**Soucetree** でコミットした際に **husky** を実行するには、ちょっとした設定が必要になります。

[> huskyのpre-commitフックがSourceTreeでコミットするときに動かない - Qiita](https://qiita.com/miyukiw/items/13cde45086752487c7e4)

**npx** にpathを通すため、 **.huskyrc** を **ユーザホームディレクトリ** （例ではhoge）に設置する必要があります。
```:.huskyrc
PATH="/Users/hoge/.anyenv/envs/nodenv/shims:$PATH"
```
※anyenvでnodenvをインストールしている場合

:::note warn
**Soucetree** の **「環境設定」** から **「高度な設定」** が選択できない！という方は、アプリの言語設定が **「日本語」** になっていると思われます。
一度、 **「Englsh」** などの他言語に変更し再起動すると **「高度な設定」** が選択できるようになります。
設定変更後、また **「日本語」** に戻すことも可能です。
:::

# VSCodeの設定
**VSCode** でファイルの変更を保存した際に **各種lint** や **prettier** が実行されれば、より便利ですよね。
以下の拡張機能をインストールして、 **VSCodeの設定（setting.json）** を以下のように設定すればオッケーです。

[> Prettier - Code formatter - Visual Studio Marketplace ](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
[> ESLint - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
[> Stylelint - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)

```json:setting.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode", 
  "editor.formatOnSave": true, 
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true
  }
}
```

# まとめ
各種lintやフォーマットは、チーム開発はもちろんですが、個人開発でもとても有用な設定だと思います。
環境構築は多少面倒かもしれませんが、その労力以上の見返りはあると感じます。
また、各種lintの設定は非常に奥が深いため、一度用意した設定ファイルを盲目的に流用するのではなく、定期的に見直しアップデートしていく必要があると思いました🤓

# 参考サイト
[> PrettierとESLint・Stylelintの併用 – rinoguchi's techlog](https://rinoguchi.net/2021/12/prettier-eslint-stylelint.html)
[> Prettier 入門 ～ESLintとの違いを理解して併用する～ - Qiita](https://qiita.com/soarflat/items/06377f3b96964964a65d)
[> huskyとcommitlintでgit commitメッセージの形式をチェックする｜SHIFT Group 技術ブログ｜note](https://note.com/shift_tech/n/nb4700a3b3de6)