VSCodeでファイル保存時にPrettierを実行する方法
はじめに
Prettierを実行する基本的な方法は以下のようなコマンドを入力することですが、これだとコード整形するたびに毎回入力する必要があるためとても面倒です。
npx prettier . --write
これをなくす為、VSCodeの拡張機能を使いファイル保存時にPrettierを実行させるようにします。また、プロジェクト単位に限定して動作させたいのでそちらの設定もしていきます。
VSCodeを使っていることが前提なので、そうでない方はインストールをお願いします。
VSCodeにPrettierの拡張機能をインストールする
拡張機能の検索ボックスにprettierと入力すれば拡張機能が表示されるのでインストールします。
VSCodeの設定
ターミナルを開いてcommand + ,を押してVSCodeの設定を開きます。または左上メニューのcode→preferences→Settingsの順に押しても開きます。(言語表示は英語です)
メニューを開いたらWorkspaceをクリックします。これは特定のディレクトリにのみVSCodeの設定を適用したい時に使うものです。詳しくは下の記事を参照してください。
Default FormatterをPrettier - Code formatterに変更します。この設定は既定のフォーマッターを指定するものです。
するとプロジェクトに.vscodeディレクトリ、その中にsettings.jsonが作成され、先程の設定内容が書かれていると思います。プロジェクトのトップにこれがあると、VSCodeはここに書かれている設定を優先するようになります。
さらにFormat On Saveにチェックを付けます。これはファイル保存時にフォーマッターを実行する設定です。
最終的にファイルは以下のようになるはずです。
ちなみにこれらのディレクトリとファイルは全て手動で作成しても動作に変わりはありません。
動作確認
それではプロジェクトのトップにファイルを作成し、適当なコードを書きます。
const users=['alice',"bob","charlie"]
書き終わったらファイルを保存してください。するとコードが以下のようになるはずです。
const users = ["alice", "bob", "charlie"];
これは拡張機能のPrettierにデフォルト設定が適用されている為です。設定を変更したい場合はVSCodeのSettings→Workspace→Extentions→Prettierで各設定を変更できます。
設定の詳細はVSCode上で拡張機能のドキュメントを見るか、以下のページで確認してください。
また、Prettierには本来専用の設定ファイルがあり、それをVSCodeに読み込ませる方法もありますが、今回は割愛します。
おわりに
ファイル保存と同時にコード整形をすると、効率良く開発を進められると思いますので是非設定してみてください。
最後までお読みいただき、ありがとうございました！
Discussion