VS Code で prettier-plugin-tailwindcss を使う #VSCode

prettier-plugin-tailwindcssをdev-dependencyとしてインストールします。

npm install -D prettier prettier-plugin-tailwindcss

settings.json にフォーマットの設定を追加します。

.vscode/settings.json

{
  "[html]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

ルートディレクトリに prettier.config.js を作成します。

prettier.config.js

module.exports = {
  plugins: [require('prettier-plugin-tailwindcss')],
}

HTML を編集し、

<div class="px-4 bg-sky-700">foo</div>

を保存すると、

<div class="bg-sky-700 px-4">foo</div>

とソートされます。