有些时候，你喜欢某一首歌，

可能是因为一句歌词，

也可能是因为某个人在某本书上写过的一句话。

故事是这样开始的：

因为一些不可抗拒的原因，需要将现有的项目在另一个环境部署新的一套，并且需要把一些涉及到企业名称相关的敏感词汇修改。

对于前端童鞋而言，最头疼的便是上游的服务接口一单改变，我们便需要跟着改动。

如图所示，假设我们需要把 "company-service-name" 改为 "paas-service-name"。

这个时候，最简单的操作就是在编辑器中 ctrl+f,搜索关键字"company-service-name"（或者搜索"company"也是一样）

然后全部替换成"paas-service-name"

那么问题来了？ 如果还有类似的情况需要修改，下一次我们需要把这一次的"paas-service-name"改为"some-service-name"呢？

当然，对于代码优化而言，毫无疑问，我们需要把这个特殊的单词“company”给提取出来，定义成一个常量，那么即使后面还有类似的改动，也只需要改动一出即可。

很显然，我们需要的是这样的代码。

如何快速进行转换

上面的替换如何快速的实行呢，实际在每个项目中可能会有几十上百个文件，上千的接口path。

如果我们使用ctrl+f 搜索然后替换，而且还得手动把双引号/单引号改为反引号的模板字符串，这个工作量是非常的庞大。

这个时候就想到了vscode插件，通过template-string关键字搜索了一波。发现并没有自己想要的。

有些想法就像记忆中那些夏日突如其来的大雨。

打湿了所有的过道，所有行人......

chatgpt写代码很牛掰，很快。

而我又懒得翻vscode官方文档。

所以，我和chatgpt一拍即合，说干就干！

chatgpt的工作时间

在没有阅读任何vscode插件开发文档的前提下，

我和我的好伙伴小C开始了紧张的工作。

步骤非常详细，那么首先我找了个工作目录，按照小C的提示进行的一步。

项目的创建

也及时Yaoman和generator-code的安装，然后使用yo code生成了一个vscode插件项目，根据交互式命令完成了项目的创建。

npm install -g yo generator-code
yo code

插件源码的开发

小C

给出了上面的代码，我根本没有阅读。

按照它说的步骤进行了测试，结果当然不如意。

但是我了解了流程。

于是我们继续

小C给出的代码依然不如我意，我继续PUA它：

小C给出了新的代码，依然不能让我满意。

我跟它开始了漫长的拉锯战，

它始终不能完全理解我的意思，或者给的代码无法让我满意，

好在，

小C的态度很好

我开始忍受不了，于是我看了一眼代码，发现它给的正则并不能满足我要实现的场景。

我把解决方案转向了AST。

基于AST去实现

小C基于ast很快就实现了核心代码

我不想过于关注如何实现。

发布插件

同样的，根据小C的提示，创建了开发者账号，基于vsce登录、发布，编辑一些小信息。

我甚至懒得写文档，让小C给了一份。结果不太理想。

故事的最后

贴一下由chatgpt编写的一个非常简单的vscode插件： marketplace.visualstudio.com/items?itemN…

有兴趣的同学可以下载试试，觉得不错的话可以点个赞。

再说一些题外话

AST是前端同学的新世界，了解了就会打开新大门。

chatgpt这些AI可以快速的让我们实现一些插件/工具，当然我们还是离不开各种官方文档，不过却可以少去了解翻阅很多API。

carbon.now.sh/ 一个可以美化代码生成图片的网站

孤独的夜，总是让人难眠

难免会想起你

想起你那温柔的眼睛

让我沉醉不已

从前的车马很慢

一生只能爱一个人

那样的生活很简单

却又很浪漫