以前一直想花时间写一个前端小工具自动重构代码。但是，经过我的再三考虑，我暂时取消了这个计划——主要是我没有时间。（PS：生活越快乐，写一篇Charj）不过，我打算写一篇文章记录相关的想法。原因有很多：国内大部分公司用的是Vue，模板、脚本、样式都是耦合在一起的；大量的前端项目都是轻逻辑，没有复杂的业务场景。前端系统被改写的频率太快了JavaScript语法太灵活，TypeScript还没有普及……简单来说，在没有复杂场景的情况下，我不想写这样的工具。如何搭建前端自动化重构工具？在我之前写的《重构的自动化》中，介绍了如何做这样一个工具：Buildalanguage-specificgrammarparser。设定坏代码味道的内容和标准。对于每一种难闻的气味，都写上识别码。编写代码以提出改进建议和实施代码。实施闻起来很糟糕的自动重构。以Vue为例，流程是：找一个Vue的AST生成工具。如eslint-vue-parser寻找并编写适合Vue编码的相关规范。根据规范查找代码中的问题。针对这个问题寻找改进点实现自动重构下面看一个简单的例子。比如在我们的代码规范中，对于组件库的强制规范，一定要写scoped。而我们有大量的组件没有相应的实践。这时候可以这样处理。解析代码中的unscopedstyle，然后自动添加：添加的方式其实比较简单：解析后的AST会有标签等位置信息。识别所有相关类型的文件并记录需要重建的相关信息。文件、位置、更改、长度。反向遍历所有需要修改的地方，读取对应的文件，对应的位置，进行修改。保存文档。再次运行。嗯，就这么简单。配套工具根据我之前的一些研究，整理了一些相关资料，欢迎大家来玩。如果JavaScript只是为了简单的JavaScript重构，我们可以考虑使用jscodeshift这样的工具。jscodeshift是一个用于在多个JavaScript或TypeScript文件上运行codemods（自动代码修改）的工具包。当然，如果不嫌麻烦，也可以使用类似的工具：SourceEsprima4.0.1UglifyJS2TraceurAcorn8.0.4ShiftShift（无早期错误）jQuery.Mobile1.4.2149.6±1.8%170.7±1.2%178.2±6.0%214.4±13.0%429.5±13.5%203.9±9.6%角度1.2.5125.0±2.8%138.2±2.9%134.5±2.3%113.8±2.8%251.5±1.3%147.1±1.2.5%反应2158.2±1.4%160.0±0.8%128.5±2.8%310.8±2.7%182.6±2.7%总计401.8毫秒467.0毫秒472.7ms456.7ms991.9ms533.5ms嗯，原理是相似的。TypeScript官方提供了AST解析。从我之前写的前端架构守护工具：https://github.com/phodal/dilay，可以看到类似的代码。对于CSS重构，类似的工具有：https://github.com/csstree/csstree但是，我们推荐你使用Lemonj（使用Antlr进行语法树解析）：https://github.com/twfe/lemonj框架是具体到Angular，官方提供了AngularSchematics。除了自动修改代码外，它还可以做各种自动升级。对于Vue，官方也有类似的工具：https://github.com/vuejs/vue-codemod对于React，官方也有工具：https://github.com/reactjs/react-codemod结合CLI我们修改时的工具代码完成后，接下来要做的就是修改文件。这里推荐一个：schematics-utilities，虽然是Angular的上下游工具，但并不局限于框架。有了这个工具，我们可以快速修改代码，比如：recorder=tree.beginUpdate(path);recorder.remove(start,length).insertLeft(start,value);tree.commitUpdate（记录器）；这些都是相似的，没有什么特别的。总结嗯，人生苦短，你必须花1小时写一个工具来解决10分钟就能搞定的事情。本文转载自微信公众号「phodal」，可关注下方二维码。转载本文请联系phodal公众号。
