通过设置等宽字体如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 实现。

代码小浣熊

代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节

51

查看详情

示例：修改 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 代码会显得更加清晰美观，提升开发体验。不复杂但容易忽略细节，建议结合个人视觉习惯微调。