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の設定をする。
-
設定画面の検索窓で 「defaultformatter」と検索
-
「Prettier Code formatter esbenp.prettier-vscode」にチェックを入れる。
4. 設定の反映を行うために画面のリロードを行う。
これまでにやった設定を反映させるために画面をリロードします。
command + shift + Pでコマンドのパレットを展開し、「開発者： ウィンドウの再読み込み」をクリックすることでVSCodeのリロードを行います。
まとめ
この設定が完了すれば、ファイル保存時(command + S)に自動でprettierが実行されるはずである。効率的な開発を行うためにも是非導入を！