Visual Studio Code

Prettier拡張機能を使ってコードを自動フォーマット

Prettier拡張機能の概要

Prettierはコードを自動でフォーマットするVisual Studio Codeの拡張機能です。HTML(Pug)、CSS(SCSS)、JavaScriptなど多くのファイルタイプに対応しています。

インストール方法

PrettierはマーケットプレイスのPrettierページにアクセスし、[Install]ボタンをクリックします。

Visual Studio Codeが立ち上がり、Prettierの拡張機能タブが表示されたら、[インストール]ボタンをクリックします。これでPrettierが有効になります。

Prettierを有効にするには、VS Codeの自動フォーマットをONに設定する必要があります。アクティビティバーの最下段の[設定ボタン]をクリックし、[設定]をクリックします。

設定画面が表示されるので、「設定の検索」テキストボックスに「save」と入力します。

[Format On Save]をチェックしてください。これで自動フォーマットが有効になります。

設定の検索方法

Prettierの設定は拡張機能ビューから行えます。[拡張機能]アイコンをクリックし、[管理]アイコンをクリックします。メニューが表示されたら、[拡張機能の設定]をクリックします。

Prettier拡張機能関連の設定が表示されるので、必要に合わせて設定してください。

Prettierの設定画面では、検索ボックスに「@ext:esbenp.prettier-vscode」という文字が入力されています。このテキストにより、Prettierの設定だけが表示されます。ここで、Prettier設定からインデントの設定を探したい場合、検索ボックスに追加して「indent」という文字を入力してください。すると、「@ext:esbenp.prettier-vscode index」にマッチする設定だけが表示されます。
インデントをタブにする場合、Indent Lines with tabsのチェックをONにしてください。

関連記事