如果你写过 TypeScript应该对下面这个文件再熟悉不过了{/* Visit https://aka.ms/tsconfig to read more about this file */compilerOptions:{target:ES2022,strict:true}}等等……JSON 不是不能写注释吗按照 JSON 标准下面这样的写法其实都是非法的// 这是单行注释{name:ChatGPT}{/* 这是多行注释 */name:ChatGPT}可为什么 tsconfig.json、settings.json、launch.json 等配置文件却可以愉快地写注释今天就聊聊背后的原因。JSON 为什么不能有注释JSONJavaScript Object Notation最初的目标就是数据交换格式。它的设计原则之一就是简单、统一、容易解析。因此官方 JSON 规范RFC 8259里并没有注释, 标准 JSON 只允许这些元素对象Object数组Array字符串数字Booleannull除此之外❌ 注释❌ 尾随逗号❌ 单引号全部都不允许。所以像下面这样的文件标准 JSON 解析器都会直接报错。{// 用户名name:Tom,}那为什么带注释更好虽然 JSON 不支持注释但配置文件却特别需要它。举个例子, 没有注释{strict:true,module:NodeNext,target:ES2022}对于新人来说strict 是什么为什么 target 要写 ES2022完全不知道。而有了注释以后{// 开启严格模式推荐保持 truestrict:true,// 输出 ES2022 代码target:ES2022}可读性一下子就提升了。带注释主要有几个好处降低学习成本配置项可以直接解释用途不需要频繁查文档。方便团队协作告诉其他人为什么这样配置而不仅仅是配置了什么。保留上下文记录一些特殊配置的原因方便后续维护。更好的开发体验很多 IDE 会直接显示注释阅读配置更加直观。所以虽然 JSON 不支持注释但配置文件非常需要注释。tsconfig.json 为什么可以写注释答案其实很简单因为它并不是严格意义上的 JSON。TypeScript 并没有直接使用标准 JSON 解析器。而是使用了一种扩展格式JSONCJSON with Comments。JSONC 在 JSON 的基础上增加了一些能力✅ 单行注释 //✅ 多行注释 /* */例如{// 输出目标target:ES2022,/* 是否开启严格模式 */strict:true}TypeScript 编译器会先把注释去掉再按照普通 JSON 解析。所以虽然文件名叫tsconfig.json, 实际上内容更接近tsconfig.jsonc 只是为了兼容生态没有改扩展名而已。除了 JSONC还有 JSON5目前最常见的 JSON 扩展主要有两个。JSONC特点支持 //支持 /* */不支持尾随逗号部分实现可能会兼容但规范本身不鼓励例如{// 用户名name:Tom}典型使用场景TypeScript (tsconfig.json)VS Code (settings.json)VS Code 插件配置JSON5JSON5 比 JSONC 更进一步。除了支持注释还支持单引号尾随逗号对象 Key 不加引号十六进制数字InfinityNaN例如{// 用户name:Tom,age:18,skills:[JS,TS,],}是不是越来越像 JavaScript 对象了很多前端工具都会支持 JSON5例如BabelNext.js部分配置各种 Node.js 工具链哪些工具支持 JSONC现在支持 JSONC 的工具已经很多了例如工具 是否支持 JSONCTypeScript ✅VS Code ✅Visual Studio ✅Azure 配置 ✅ESLint部分配置 ✅Monaco Editor ✅可以说只要是现代前端开发几乎都会接触到 JSONC。JSONC 怎么转换成标准 JSON如果需要把 JSONC 提交给接口、数据库或者其他只支持标准 JSON 的程序就需要先去掉注释。常见的方法有方案一使用 npm 包例如微软提供的npm install jsonc-parser或者npm install strip-json-comments它们都可以自动移除注释再输出标准 JSON。方案二在线转换工具如果只是偶尔需要转换不想安装依赖直接使用在线工具会更加方便。例如 ToolGardenhttps://toolgarden.xyz可以直接粘贴 JSONC一键移除注释输出标准 JSON复制即可使用对于临时处理配置文件来说非常方便。总结很多人第一次看到 tsconfig.json 能写注释都会觉得奇怪其实原因很简单标准 JSON 不允许注释。TypeScript 使用的是 JSONCJSON with Comments。JSONC 是为了让配置文件更易读、更易维护。JSON5 则提供了更多 JavaScript 风格的语法扩展。对于开发者来说配置文件带注释几乎已经成为现代工具链的标配。理解 JSON、JSONC 和 JSON5 的区别也能帮助我们在不同场景下选择合适的数据格式。下次再看到 tsconfig.json 里的注释就不用疑惑了——它其实不是严格意义上的 JSON而是 JSONC。