VSCode 修改 JavaScript 代码样式不依赖插件，而是通过 editor.tokenColorCustomizations 配置 settings.json 中的 textMateRules，精准匹配作用域（如 keyword.control.js、string.quoted.single.js）并覆盖颜色与字体样式，修改后保存即生效。
VSCode 里改 JavaScript 代码样式，不是靠插件，而是靠配置
很多人搜“VSCode 自定义 JS 代码样式”，以为要装个插件点几下就变颜色、改字体——其实不是。VSCode 本身不提供“JS 专属样式编辑器”，真正起作用的是 editor.tokenColorCustomizations 这个设置项，它控制所有语言的语法高亮（包括 JavaScript 的 function、string、keyword 等 token），而插件只负责提供语法解析能力（比如让 const 被识别为 keyword），不直接决定颜色。
- 插件如
JavaScript (ES6) code snippets或ESLint不影响高亮颜色，只影响补全、校验、格式化 - 真正改“样式”的动作，是手动编辑
settings.json，通过textMateRules匹配作用域（scope）并覆盖颜色 - 如果你没看到
const变色，大概率是当前主题没定义该 scope，或你写的 scope 名字不匹配（比如写成keyword.control却实际应为keyword.control.js）
最稳妥的做法：先用快捷键 Ctrl + Shift + P 输入 Developer: Inspect Editor Tokens and Scopes，把光标停在 function 上，看右下角弹出的真实 scope 名称，再照着写规则。
怎么精准改 JavaScript 关键字、字符串、函数名的颜色
改错 scope 是最常见的失败原因。JavaScript 不同元素的作用域不是凭经验猜的，比如：
-
function关键字：通常是keyword.control.js或keyword.control.flow.js - 字符串内容：常用
string.quoted.single.js、string.quoted.double.js - 模板字符串内插值：
source.js meta.template.expression.js - 函数名（声明处）：
entity.name.function.js - 变量名（非声明）：
variable.other.readwrite.js
这些 scope 会随 VSCode 版本、JS 扩展版本、甚至是否启用 TypeScript 支持而变化。所以别复制网上的旧配置直接粘贴。
推荐写法（加到 settings.json 中）：
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": ["keyword.control.js"],
"settings": { "foreground": "#FF5555" }
},
{
"scope": ["string.quoted.single.js"],
"settings": { "foreground": "#98C379", "fontStyle": "italic" }
}
]
}
-
scope值用数组，可一次匹配多个 scope -
fontStyle可填"italic"、"bold"、"underline"或空字符串 - 修改后无需重启，保存即生效（但部分 scope 可能需重新打开 JS 文件）
为什么改了 settings.json，JS 字符串还是没变色
常见卡点不在配置语法，而在作用域覆盖逻辑和主题继承关系：
- 当前使用的颜色主题（如
Default Dark+）本身已定义了大量 scope，你的textMateRules默认只覆盖「当前激活主题」下的规则；如果换主题，配置可能失效 -
editor.tokenColorCustomizations分为global和themes两层，直接写顶层是全局生效；若想只对某个主题生效，得嵌套进themes数组里 - 如果你在
.vscode/settings.json（工作区级）里写，而当前文件是用户级打开的（没开文件夹），那配置不生效 - 某些 scope（如 JSX 中的
string）会被javascriptreact语言模式接管，scope 名称变成string.quoted.single.jsx，而非.js
检查方式：打开一个 .js 文件 → Ctrl + Shift + P → Developer: Inspect Editor Tokens and Scopes → 点击目标文本 → 看 “Scope names” 列表最末尾那个（优先级最高）→ 把它完整复制进 scope 字段。
不想手写 scope？用插件辅助，但别依赖它自动改
确实有插件如 Highlight Bad Chars 或 Bracket Pair Colorizer 能增强视觉反馈，但它们不修改 JS 语法高亮本身。真正能帮你“看到 scope”的只有官方工具：
-
Developer: Inspect Editor Tokens and Scopes（必须用，无替代） - 安装
Grammarly或Todo Tree这类插件，对 JS 样式零影响 -
Peacock只改标题栏颜色，跟代码高亮无关
顺带提醒：过度自定义高亮容易导致语义混淆。比如把所有 string 都设成红色，反而掩盖了错误字符串（如路径拼错、未闭合引号）。建议只调核心几类：关键字、字符串、函数名、注释，其余保持主题默认。
