【vue、react】前端如何为package.json添加注释

前言

写了个项目，想给package.json 加注释结果发现加不上去，就在网上查找了相关文章，特意总结记录一下，防止下次使用。

参考文章：如何为package.json添加注释

众所周知，JSON文件是不支持注释的，除了JSON5/JSONC之外，我们在开发项目特别是前端项目时，大量会用到JSON文件，特别是在编写package.json中的scripts时，由于缺少注释,当有大量的命令脚本时，就有了添加注释的需求。

因此就有了JsonComments这个Vscode扩展插件，可以为工程中的任意Json文件增加注释功能。启用JsonComments插件的效果如下：

安装

打开VSCode扩展，搜索JsonComments，然后安装即可。

使用方法

• 添加注释
  打开当前工作区任意JSON文件，在任意键上悬停，在悬停提示中点击Add Comment，即可输入并添加注释。 添加的注释将以CodeLens的形式显示在所注释的键上方。

• 删除注释
  直接点击注释内容，选择删除注释即可。

• 清空注释
  按下Ctrl+Shift+P，输入Clear All Comments，即可清空当前文档的所有注释。

问题

• 注释内容保存在哪里？
  默认情况下，注释内容保存在当前工作区的package.json文件中的json-comments中。 如果你想要修改保存位置，可以工作区配置中进行修改。

• 如何更改注释保存位置?
  修改工作区配置JsonComments中的Save File和Entry Key即可。 例如：

// 保存在当前工作区的comments.json文件中
"json-comments": {
    "Save File": "comments.json",
    "Entry Key": ""                
}

• 注释会修改原始的JSON文件吗？
  不会，所有的注释默认均保存在package.json文件中的中。

• 注释提交到到Git后会丢失吗？
  不会，只要你将保存注释的文件一起提交即可。

• 开发团队中其他人可以看到注释吗？
  可以，只需要安装JsonComments插件即可。

• 当JSON文件编辑后注释内容会丢失吗？
  只要所注释的键的jsonpath路径没有变化就不会丢失。JsonComments是以jsonpath路径为键来保存注释内容的。

• 当移动JSON文件时会导致注释丢失吗？
  当前版本会导致注释失效，但是注释内容还保存package.json（默认）中，您可以通过手动修改对应的jsonpath来恢复。下一版本将通过侦听文件移动来自动完成此工作。