通过设置等宽字体如Fira Code、启用连字、选择Dark+或Monokai等主题，并配置Prettier格式化，可显著提升VSCode中CSS代码的可读性与美观度。
在 VSCode 中美化 CSS 代码的显示效果，主要通过设置编辑器的字体、启用语法高亮以及自定义颜色主题来实现。虽然不能直接为 CSS 属性或选择器单独设置字体和颜色，但可以通过整体配置提升代码可读性和美观度。
1. 设置代码字体
要让 CSS 代码看起来更清晰舒适，推荐使用等宽且支持连字（ligatures）的编程字体。
操作步骤：
- 打开 VSCode 设置（Ctrl + , 或菜单“文件 > 首选项 > 设置”）
- 搜索 editor.fontFamily
- 输入你喜欢的字体，例如： 'Fira Code', 'Consolas', 'Courier New', monospace
- 如果使用支持连字的字体（如 Fira Code、JetBrains Mono），可同时开启连字：
- 搜索 editor.fontLigatures
- 勾选或设为 true
2. 选择合适的颜色主题
CSS 的颜色显示依赖于当前使用的主题。VSCode 内置多个主题，也可安装第三方主题增强视觉体验。
立即学习“前端免费学习笔记（深入）”；
切换主题方法：
- 快捷键 Ctrl + K Ctrl + T
- 从下拉列表中选择如 Dark+、Monokai、Ayu Mirage 等流行主题
- 若想更多选择，可在扩展商店搜索 “theme” 安装如：
- One Dark Pro
- Nord
- Dracula Official
3. 自定义语法高亮颜色（可选）
如果你希望进一步调整 CSS 中特定元素的颜色（如选择器、属性、值），可通过 workbench.colorCustomizations 和 editor.tokenColorCustomizations 实现。
示例：修改 CSS 字符串和属性颜色
- 打开设置 JSON（设置右上角图标“打开设置 (JSON)”）
- 添加如下配置：
{
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "support.type.property-name.css",
"settings": {
"foreground": "#ff9d00"
}
},
{
"scope": "string.quoted.double.css",
"settings": {
"foreground": "#a6e22e"
}
}
]
}
} - 保存后即可看到对应语法颜色变化
提示：可用 Scope Inspector 工具（命令面板搜 “Developer: Inspect Editor Tokens and Scopes”）查看具体语法范围名称。
4. 格式化 CSS 代码（提升排版美观）
使用格式化工具统一缩进、换行、空格等结构，使代码更整洁。
推荐方式：
- 安装 Prettier - Code Formatter 插件
- 在项目根目录添加 .prettierrc 配置文件：
{
"semi": true,
"trailingComma": "es5",
"singleQuote": false,
"tabWidth": 2,
"useTabs": false
} - 保存文件时自动格式化：设置中启用 editor.formatOnSave
基本上就这些。通过合理设置字体、主题和格式化规则，VSCode 中的 CSS 代码会显得更加清晰美观，提升开发体验。不复杂但容易忽略细节，建议结合个人视觉习惯微调。
