使用Prettier可通过singleQuote配置控制css引号类型，vscode内置格式化器不支持此功能。需安装Prettier插件并设置singleQuote为true或false以统一引号样式，如url(‘image.png’)或url("image.png")。通过settings.json指定Prettier为默认格式化器可确保一致行为，团队协作时应共享.prettierrc和编辑器配置文件。

VSCode 格式化 CSS 代码时，控制引号类型主要依赖于你使用的格式化工具，比如 Prettier 或内置的 VSCode 默认格式化器。默认情况下，CSS 中通常不涉及引号，但在属性值使用自定义函数、URL 或数据 URI 时，可能会出现引号，此时引号样式（单引号或双引号）就可能被格式化工具影响。

1. 使用 Prettier 控制引号类型

如果你使用 Prettier 格式化 CSS/scss/less 文件，可以通过配置 .prettierrc 文件来设置引号样式：

• 安装 Prettier 插件：Prettier – Code formatter
• 在项目根目录创建 .prettierrc 文件
• 添加以下配置指定引号类型：

{ “singleQuote”: true }

说明：

• singleQuote: true → 使用单引号（如 url('image.png')）
• singleQuote: false → 使用双引号（如 url("image.png")）

保存后，格式化 CSS 文件时会按照该规则统一引号类型。

立即学习“前端免费学习笔记（深入）”；

2. VSCode 内置格式化器设置

VSCode 自带的 CSS 格式化器（由 CSS Language Service 提供）一般不会主动更改引号类型，它更倾向于保留原始写法。但你可以通过以下设置增强控制：

• 打开 VSCode 设置（Ctrl + ,）
• 搜索：`css format`
• 确保启用格式化功能，例如勾选 CSS › Format: Enable

注意：VSCode 内置格式化器不提供直接设置引号类型的选项，因此若需精确控制，推荐搭配 Prettier 使用。

比格设计

比格设计是135编辑器旗下一款一站式、多场景、智能化的在线图片编辑器

124

查看详情

3. 确保文件使用正确的格式化工具

有时格式化行为不符合预期，是因为没有指定默认格式化器：

• 右键点击 CSS 文件 → Format Document With…
• 选择 Prettier 作为默认格式化工具
• 可在 settings.json 中固定配置：

{ “[css]”: { “editor.defaultFormatter”: “esbenp.prettier-vscode” }, “[scss]”: { “editor.defaultFormatter”: “esbenp.prettier-vscode” } }

4. 实际效果示例

格式化前：

background-image: url(“bg.jpg”); content: ‘””‘;

设置 singleQuote: true 后格式化：

background-image: url(‘bg.jpg’); content: ”;

可见 URL 和字符串中的双引号被转为单引号（取决于配置）。

基本上就这些。关键在于使用 Prettier 并配置 singleQuote 选项来统一 CSS 中的引号样式，VSCode 原生格式化器对此支持有限。确保项目中配置一致，团队协作时建议共享 .prettierrc 和 .vscode/settings.json。不复杂但容易忽略的是默认格式化器的选择问题。