TailwindCSS / Prettier 在@apply 中添加空間

Question

我有更漂亮的設置來格式化我的 CSS 文件在 VSCode 中的保存。 我在我的一個項目中使用 TailwindCSS 並使用1.7 中的最新添加，更漂亮地格式化文件並在單個冒號后添加一個空格，如下所示：

格式化前

.container {
  @apply flex;
  @apply flex-col;
  @apply lg:flex-row;
}

格式化后

.container {
  @apply flex;
  @apply flex-col;
  @apply lg: flex-row;
}

在lg:和flex-row之間添加一個空格。

有人知道如何解決這個問題嗎？ 目前我只是忽略 CSS 個文件來規避這個問題。

謝謝你的幫助。

Answer 1

在冒號之后添加額外的空格並不是更漂亮： ，它是“esbenp.prettier-vscode”。 要解決此問題，請在 settings.json 文件中更改此設置，如下所示。 "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },

Answer 2

在prettier的2.1.1及更高版本中，它工作得很好。

確保您已將prettier設置為default formatter

Answer 3

正如這里所說

您可以通過在此處安裝此 package 將 css 格式化程序更改為更漂亮

我做了，它對我有用