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

Posted 2023-02-22

【中文标题】如何在 vscode 上为 css 模块设置更漂亮

【英文标题】：How to set up prettier on vscode for css modules

【发布时间】：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.

【参考方案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,