如何在 vscode 上为 css 模块设置更漂亮答案

【问题标题】：How to set up prettier on vscode for css modules如何在 vscode 上为 css 模块设置更漂亮
【发布时间】：2021-11-27 05:01:09
【问题描述】：

Prettier 正在奇怪地格式化我的 module.css 文件。

预期：

.foo {
  @apply 
  border-2
  rounded
}

实际（第一个样式移到 apply 旁边，并在末尾添加一个 ;

.foo {
  @apply border-2
  rounded;
}

所有其他文件的格式都正确。

正在检测文件是 CSS。

这是保存 module.css 文件后的 vscode 输出

["INFO" - 4:12:25 PM] Formatting file:///src/components/Card/Card.module.css
["INFO" - 4:12:25 PM] Using config file at '/.prettierrc'
["INFO" - 4:12:25 PM] Using ignore file (if present) at /.prettierignore
["INFO" - 4:12:25 PM] File Info:
{
  "ignored": false,
  "inferredParser": "css"
}
["INFO" - 4:12:25 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 4:12:25 PM] Prettier Options:
{
  "filepath": "/src/components/Card/Card.module.css",
  "parser": "css",
  "trailingComma": "none",
  "semi": false,
  "singleQuote": true,
  "arrowParens": "always",
  "printWidth": 120
}
["INFO" - 4:12:25 PM] Formatting completed in 0.01ms.

【问题讨论】：

标签： visual-studio-code prettier prettier-vscode

【解决方案1】：

您应该在 @apply 中使用空格而不是换行来分隔类名，因为它可能难以处理您的无效 vanilla CSS（@apply 是该语言的扩展）：

.foo {
  @apply border-2 rounded;
}

Prettier Playground Link

【讨论】：

【解决方案2】：

您不必在 @apply 中使用新行，您可以使用这样的空格：

.foo {
      @apply border-2 rounded; // don`t use new line
}

【讨论】：

【解决方案3】：

CSS 和 SASS/SCSS/LESS 都是相关的。

您也可以通过添加以下内容来启用特定语言的保存格式

"[css]": {
    "editor.formatOnSave": true
}

打开 settings.json 文件。*

添加此行以在保存时格式化您的代码并在保存时删除分号：

"prettier.semi": false,

【讨论】：