VSCodeで保存時にnpmプロジェクトを作らなくてもprettierでコードフォーマットする

動機

HTMLとCSSの練習をしようと思って模写コーディングを始めたのですが、タグを追加したり消したりするたびにインデントがずれて、「手動でなんてやってられない。そうだ、prettierを保存時に実行するようにしよう。」と思いました。

しかし、模写コーティングなので毎回npmプロジェクト作るのは嫌なので、プロジェクトを作らなくても、保存時にフォーマットできるようにしたいと思います。

使ったもの

• npm
• prettier
• Run on Save (VSCode拡張)

手順

1. prettier を入れる

npm install -g prettier を実行してprettierをグローバルに入れます。

2. Run on Save を入れる

Run on Save はファイルの保存時にコマンドを実行できるVSCode拡張です。
https://marketplace.visualstudio.com/items?itemName=emeraldwalk.RunOnSave

3. settings.json に設定を追加

コマンドパレットから settings.json を開き、HTMLとCSSを保存時にprettierを走らせる設定を追加します。

// RUN ON SAVE extension setting
"emeraldwalk.runonsave": {
  "commands": [
    {
      // HTMLのコードでprettierを保存時に実行
      "match": ".html$",
      "cmd": "prettier --write ${fileBasename}"
    },
    {
      // CSSのコードでprettierを保存時に実行
      "match": ".css$",
      "cmd": "prettier --write ${fileBasename}"
    }
  ]
}

これで保存時にprettierが実行されると思います。