作者：寒草
微信：hancao97
介绍：一个不一样的北漂程序员，欢迎加微信批评指正交流技术或者一起玩耍约饭

序章：[一切皆有起点]

本文涵盖：我的插件介绍 / vscode extension快速上手
插件名：fe-file-rename(已上架，可以在插件商店搜索到)
git仓库：github.com/CodingCommu…

注意：
代码质量勿喷！不是真实水平！手动狗头！
本文风格突变，类似随笔，充满絮絮叨叨和中二气息，不喜勿喷

开发背景：[缘起于此，故事又将如何上演]

这款插件为何诞生，这是一个很长很长的故事。
因为我们的项目有很长时间的历史，也经历过很多波人员更替，之前也没有统一的文件命名规范，所以在文件命名上可谓是百花齐放。
大驼峰/小驼峰/连接线/下划线
以上几种命名方式在我们的仓库中皆有出现。但是，由于一些原因，我们要对其进行规范，我们采用的是连接线命名法，为什么采用这种命名规范我会在后面进行介绍。
但是其实改这个文件命名其实是一个很不爽的过程，我大体介绍一下这个可能会出现的过程：

首先打开这个项目，仔细观察有哪个文件命名不符合规范
对不规范的文件进行重命名，改成连接线命名法
修改引用，各种import，require。
检测是否可以正常运行，是否存在漏改或者改错的文件引用

看一看上面的过程，其实就发现了以下痛点：

文件命名的检查是一个肉眼检查的过程，可能存在漏改的情况
修改引用可能存在漏改或者改错的情况，需要运行以验证是否修改正确。

所以，作为一个互联网行业的工程师，我们需要让自己变得更懒，更舒适，所以让这个修改过程更自动，更舒适，不需验证就成为了我这次vscode插件开发的主要目标。

插件介绍：[始于痛点又不止于痛点]

ok，其实之前的开发背景已经列出了插件的一部分功能，即：

检测前端项目的文件命名
批量按规则重命名文件并自动修改引用

但是解决痛点并不是我的目标，在开发开始，就有了以下新的目标：

不仅限于连接线命名法,要支持大驼峰/小驼峰/连接线/下划线相互转换，并支持目录和文件有不同的规则
不仅限于按照指定规则批量修改文件名，要支持对文件路径变化进行监测，并自动修改引用。

所以功能总结下来如下(也可以参照上面git仓库的readme)：

检测前端目录规范性
配置文件名校验规则：大驼峰/小驼峰/连接线/下划线，目录和文件规则可以不一致
根据规则对文件进行重命名并修改引用：支持文件选择，即可选范围是不规范文件的子集。
可以检测文件路径变更并自动修改引用：用于对文件进行重命名或者移动时自动进行引用修改(提供开关，可以关闭自动引用修改)

操作流程：[从需求逻辑到交互实现，有形者，生于无形]

此处来自于本项目的 readme

第一步：初始化前端目录
我们选择当前工作空间的某一个文件右键，点击“初始化前端目录”

step1
第二步：批量修改不合规文件名&&文件路径变动自动修改引用
step2
上面四个按钮功能分别是：

刷新文件树：对此处显示的文件树进行手动更新[即使不手动更新，此处文件树也会自动watch文件变化进行更新]
开启关闭自动引用修改：默认关闭,开启后文件路径变化自动更新引用，一次修改一个文件或者文件夹的路径，否则不做引用修改~

tip: 文件路径变化：文件重命名，文件位置变化

切换文件夹和文件命名的校验规则：大驼峰 / 小驼峰 / 连字符 / 下划线

tip: 文件夹和文件可以采取不一样的规则

批量按照规则修改文件名并修改引用：可以选择要修改的文件进行批量修改

注意项：[待在疯狂山脉背风的阴影中，你必须管好自己的想象力。]

大小写问题
这里推荐小写文件名，可以去查看阮一峰的《为什么文件名要小写》文章 www.ruanyifeng.com/blog/2017/0…
总结下来，其实是出于 可移植性，易用性，易读性， 便捷性 考量
请注意，而且git默认也不会识别单纯的大小写变动

tip: git config –get core.ignorecase [git可以把这个属性配置为false，区分大小写]

关于批量操作中的忽略项

忽略 public,dist,node_modules,docs,test文件夹
忽略带有’.’的文件夹，默认其是配置类特殊文件夹
忽略 json,yaml,md,npmrc,lock,log,yarnrc,local文件
忽略带有两个’.’的文件, 默认其是配置文件或者特殊文件
文件前后’‘保留，因为认定文件前后是’‘表示特殊含义，例如:_dir_,_file_.ts

中章：[少年欲斩恶龙，故事便走向高潮]

此章简要介绍VSCode插件开发上手，具体信息请查阅官网，毕竟太多了，而且很多api我也没有用到～

VSCode插件快速开始：[欲寻趁手兵器，便天降宝刀]

官方文档：code.visualstudio.com/api
安装vscode插件开发脚手架

npm install -g yo generator-code
复制代码

输入yo code初始化代码

tip：我将介绍信息放在图片的文字中，方便介绍

package.json

项目入口

可以注意一下命令和package.json中配置的关系～

调试
按 F5 开始调试～

发布扩展
发布扩展比较麻烦，建议按照官方文档步骤来：code.visualstudio.com/api/working…

本来想在这里写很多开发心得，但是感觉又无从下手，其实这个插件断断续续开发了一周，中间踩了很多很多坑。无论是设计这款插件，还是在官方文档里去寻觅我要的api，还是给修改前端项目引用的包提pr，帮着完善功能，修复bug。
所以我在此处关于开发只是做个引子，可能后续更新vscode插件开发心得哈哈。但是本文后面的内容也很精彩（中二又絮叨hhhh）

终章：[故事终有结束时，新的篇章总会再次开启]

关于最近的生活：[起风了，总想干点什么]

最近没怎么写文章，因为工作确实很忙，事情也越来越多。
我刚刚工作不久，所以也像闲不下的鸭子，诶？不对为什么是鸭子！hhh就是想去很多地方去玩，就像我之前的文章，我，24岁，展望一下？所说，我有很多想去的地方，我也想尽早的去，去看看没看过的风景，去做一些没做过的事。

走过-东南西北：[人生走走停停，风景很多]

第一次看开心麻花的演出

第一次拼乐高（很小一只，没错，一定是因为贫穷）

第一次看沙漠，就像金色的大海

第一次看大海，就像蔚蓝的沙漠

第一次去哈尔滨，并俯瞰整个冰城（龙塔）

还有很多很多完全说不过来啊～
去呼和浩特吃了人生第一次蒙餐
去哈尔滨吃了人生第一顿俄餐
去滦州古城看夜景（并吃坏了肚子）
人生第一次看到樱花
…
感觉一回顾感觉这一两个月发生了很多，做了很多事，不仅仅是天天和服务端,产品battle,还有一些一些属于我的生活。