pretteier

pretteirとは、ソースコードの整形ツールのことで、コードのフォーマットを開発者間で統一することが可能である。
私自身、githubにpushするときに、毎回prettierをターミナルから実行していたが、毎回毎回これだと時間と手間がかかる上に、github actionsでテストが落ちたりするのも面倒である。そこで今回は、VSCode上でファイル保存時に勝手にprettierを実行してもらう方法を紹介する。

prettierを使用することによるメリット

開発者間で同じ整形ルールで開発を行うことができる
コードの品質を保つことができる

今回やっていくこと

VSCode上でprettierの拡張機能をインストールし、コードの保存時に自動でフォーマットを整形してもらえるようにしていく。そのため、今回はprettierの自動実行プラグイン導入の手順を追っていこうと思う。

導入方法

導入方法は簡単で、以下1~4の手順に沿って導入を行なっていく。

VSCodeで拡張機能「Prettier-Code formatter」をインストールする。
拡張機能からPrettierと検索し、「Prettier-Code formatter」をインストールします。
設定から、保存時の設定を行う。

歯車マーク>設定を開く
歯車のマークから、設定をクリックし、設定画面を開く。
検索窓で「save」と検索し、「Editor: Format On Save」にチェックを入れる

3.　defaultFormatterの設定をする。

4.　設定の反映を行うために画面のリロードを行う。
これまでにやった設定を反映させるために画面をリロードします。
command + shift + Pでコマンドのパレットを展開し、「開発者：　ウィンドウの再読み込み」をクリックすることでVSCodeのリロードを行います。

まとめ

この設定が完了すれば、ファイル保存時(command + S)に自動でprettierが実行されるはずである。効率的な開発を行うためにも是非導入を！

参考文献