起因

哎，小路，你这个保存是不是有问题呀，是不是少传什么参数了呀，于是，我打开浏览器，填写完数据后，点击保存，然后去 network 页签里去查看接口请求时传递的参数，不看还好，一看，好嘛，这么长的字符串，中间一堆转义字符，说白了其实就是嵌套着的 json 字符串，大概类似于这样

甚至数据多到一下展示不完，必须点击行尾的 show more 按钮才行，这样，好不容易全选复制完了，放到类似 www.json.cn/# 这样的 json 解析和格式话网站，结果又会是这样的

纳尼，这波很受伤，有没有🤕，于是我就冒出个想法，我想写本书，抱歉，走错片场了😝，其实到了这里，想必大家也已经猜到了，我想写一个类似于这种 json 格式化的网站，但是写网站要服务器，对于没有赚到第一桶金的前端er来说，不太现实，于是我就萌生了写个 vscode 插件的想法，作为前端，不可能不知道 vscode，而且最最关键的，vscode 本身就是用 js 写的，那么他的插件肯定也离不开 js...

经过

说干就干，首先百度了各个教程，发现最详细的无非就是一个官网的直接翻译的文档，貌似涉及的也很有限，不行了，受不了了，于是直接下载了网易有道词典，直接开始啃这个外文网站，啃得过程才发现，其实大致的流程和之前上传一个 npm 包差不多，都是先注册人家网站得一个账号，然后创建项目，然后获取用户对应的token，再然后在命令行，用命令行登录和发布，具体得流程大概如下

1. 注册微软账号，如果没有账号，可以直接去注册微软账号
2. 打开 dev.azure.com 用微软账号登录
3. 点击右上角，获取个人 token，没有得话就新建一个，基本选默认的就行了，权限什么的最好全选，然后记住保存下这个 token 和 name，如下图

4. 接下来来到命令行这里 全局注册插件生成脚手架

npm install -g yo generator-code 初始化插件项目 yo code

项目建好后，关闭 vscode,然后在项目目录重新打开 vscode，然后按 f5,就可以愉快的调试代码了

5. 最后就是发布了，涉及 vsce 全局安装vsce

npm install -g vsce 用刚才保存的 name 登录，输入刚才保存的 token vsce login username 发布 vsce publish

结果

插件发布后，大致就是这样

想要看具体实现的，可以直接去我 github， github.com/Guanrui1/cl… 😋