logo サブスレッド

IDEが勝手に整形してくれるのはすごくうれしい

今日は朝から腰が痛くて死んでます。tama です。
あれこれ作業をしようと思っていたのですがふと思い出したので遺言ブログを書き残しておきます。

はじめに

以前 開発ポリシー という記事でも書いたことがあるのですが、プロジェクト内で一定のコードフォーマッタを用いることはとても大切です。
バージョン管理ツールが余計な差分を検出しないように、コミット時には一定のフォーマットに整形されているのが望ましいわけです。

最強のコードフォーマッタはどれだ、という話題もおもしろそうですが、いろんな方がいろんなブログで記事にしてくれているし、何を求めるか方向性の違いでバンドが解散することもあるので、ここでは別の視点「どうやってコードフォーマッタを適用(強制)するか」を考えたいと思います。

Run eslint --fix on save 設定

IntelliJ IDEA、WebStorm など JetBrains系IDEは 2020.1 あたりのバージョンから Run eslint --fix on save という設定ができるようになりました。PyCharm でもできます!
(Languages & Frameworks > JavaScript > Code Quality Tools > ESLint 見つからない場合は 2020.1 以降の最新版にアップデートしましょう)
文字通りファイルを保存したときに自動的に eslint --fix してくれます。
IDE上での編集をファイルに出力する時点で整形するのでこれが最速と言えます。
VScodeの場合もプラグインを用いることで同様のことができるようです。

TypeScriptのコードで、Prettier を使えない宗教上の理由がなければこれでいいんじゃないでしょうか。
eslint --fix したとき後ろで Prettier が整形してくれるようにプラグイン(eslint-config-prettier, eslint-plugin-prettier)を設定しておきます。

Save Actions プラグイン

JetBrains IDEの Save Actions というプラグインを用いる方法です。
Pythonコードで、autopep8 までしなくても PyCharm の整形で十分な場合はこれでイケます。
もちろん TypeScript の場合も大丈夫です!
プロジェクトごとに設定しないといけませんが、General の Activate save actions on save にチェックを入れて Formatting actions は Reformat file にチェックをするだけの簡単設定です。

これも編集結果をファイルに出力する時点で(正確にはファイルに出力する前に)整形してくれます。
Run eslint --fix on save の設定とはどちらか一方だけ ON にしておくとよいでしょう。
(IDEの設定と .eslintrc の設定が競合する場合にどちらか一方(後勝ち)の整形になってしまうと思うので)

チームのみんながこの設定をしていてもコード整形による差分が出てしまう場合は IDE の設定が異なっている可能性があります。
まずはその設定のすり合わせをしましょう…

git hooks pre-commit

git commit するときに処理をするフックスクリプト(pre-commit)を使う方法です。
eslint --fixautopep8 を実行するようにしておけば未整形のコードをコミットしてしまうリスクがなくなります。
Huskypre-commit を使うまでもなく .git/hooks/pre-commit にコマンドを書けばよいですが、
チーム(そのリポジトリにコミットする全員)に同じ設定をしてもらうためには既成のツールを用いるのがよいかもしれません。

Run eslint --fix on save 設定や Save Actions プラグインと併用すると最強です。
IDEで編集したファイルは保存する時点で整形(動作確認も整形済みコードでできる)、
例えIDE以外で編集していたとしてもコミットする時点で整形される、という二段構えになります。

そんなわけで

コードをきれいに保ちたい、という話でした。
体型も reformat したら腰が痛いの治るかなぁ。

現在の位置:サブスレッド ホーム > 技術ブログ > IDEが勝手に整形してくれるのはすごくうれしい