本日（2022.12.01）から始まりました 「un-T factory! XA Advent Calendar 2022」 の一番槍をつとめさせていただきます。どうぞよろしくおねがいします🙇♂️
唐突ですが…
「リント、してますか？」 （※長嶋●雄の声で）
…というわけで、今回はタイトルのとおり 「Soucetreeからのコミット時にeslintとstylelintとprettierする」 設定をご紹介いたします。
個人のクセによる無駄な差分の発生や構文エラーは、作業の効率や開発者の士気を低下させてしまいます😔
チーム開発する際には各種linterを活用して、コーディングルールを遵守したエラーのないコードで運用していきたいものですよね。
Gitへのコミット時に自動的に構文チェックと整形が実行される…そんな便利な開発環境（フロントエンド）の設定方法です。
対象ファイルはとりあえず以下の3種とします。
*.pug
*.ts
*.scss
※コミットメッセージについてのチェックは今回は割愛します。
以下、使用するツール（アプリ）です。
Git
husky
eslint
stylint
prettier
Sourcetree
VSCode
eslintの設定
eslint とは JavaScript（TypeScript） のための静的検証ツールです。
チェック項目は .eslintrc.json というファイルを作成し設定します。
膨大な項目数にめまいがしそうですが、標準で用意されている eslint:recommended のようなプリセットを活用し、特定の項目を "rules" で上書きすることもできます。
stylelintの設定
stylelint とは CSS の構文チェックツールです。
チェック項目は .stylelintrc というファイルを作成し設定します。
こちらもeslint同様、プリセットを活用するのもおすすめです。
プロパティの並び順を入れ替えるようにすると、管理しやすくなり効率がアップします。
> Sass(SCSS) の stylelint ルールは stylelint-config-sass-guidelines に任せたい ++ Gaji-Laboブログ
prettierの設定
prettier とはソースコードを整形してくれるツール（コードフォーマッター）です。
多くのファイル形式やエディタに対応しています。
> Prettier · Opinionated Code Formatter
huskyの設定
husky とは Git hooksを使用しコミットやプッシュ時に任意のコマンドを走らせる ことができるnpmパッケージです。
以下、コミット時に eslint , stylelint 、 prettier を実行させる設定例です。
これによりコミット時にはいやがおうにもコードは綺麗に整形され、エラーがある場合にはそのエラーを解消するまでコミットできなくなります。
{
"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
npx にpathを通すため、 .huskyrc を ユーザホームディレクトリ （例ではhoge）に設置する必要があります。
PATH="/Users/hoge/.anyenv/envs/nodenv/shims:$PATH"
※anyenvでnodenvをインストールしている場合
Soucetree の 「環境設定」 から 「高度な設定」 が選択できない！という方は、アプリの言語設定が 「日本語」 になっていると思われます。
一度、 「Englsh」 などの他言語に変更し再起動すると 「高度な設定」 が選択できるようになります。
設定変更後、また 「日本語」 に戻すことも可能です。
VSCodeの設定
VSCode でファイルの変更を保存した際に 各種lint や prettier が実行されれば、より便利ですよね。
以下の拡張機能をインストールして、 VSCodeの設定（setting.json） を以下のように設定すればオッケーです。
> Prettier - Code formatter - Visual Studio Marketplace
> ESLint - Visual Studio Marketplace
> Stylelint - Visual Studio Marketplace
{
"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
> Prettier 入門 ～ESLintとの違いを理解して併用する～ - Qiita
> huskyとcommitlintでgit commitメッセージの形式をチェックする｜SHIFT Group 技術ブログ｜note