共计 4355 个字符，预计需要花费 11 分钟才能阅读完成。
明天咱们聊一聊自动化生成代码的问题，试想一下，如果有一天机器代替你编写代码，你是应该感到开心还是惆怅？
计划
目前代码生成技术次要有以下几类：
1）基于模版编排生成代码
首先说下基于模版生成代码的形式，这种属于最原始最简略也是目前利用最宽泛的一种代码生成形式，能够说，简直所有的代码生成形式都是建设在模版的根底上繁殖而来。
前端最有名的莫过于 vue-cli 和 create-react-app 两款脚手架的代码生成了，他们别离基于 vue 和 react 框架进行的一键初始化我的项目生成代码，包含各公司外部的我的项目生成的脚手架，其实实质上是一样的，只是退出了公司外部集成的很多公共的组件和办法而已。
其实最早的代码生成并不是前端，因为那个时候还没有前端这个概念，在 WWW 万维网的时代，页面根本是由后端进行开发，因而在模版代码生成这一畛域咱们只是走了后端走过的路。
记得最早接触模版代码生成的是在刚开始开发后端我的项目的时候，那时候还是采纳 MVC 架构，要开发一个新的功能模块的时候，往往须要别离对 controller,service,dbService 中进行新的代码注入，有点相似于 egg 中的构造（如果不相熟后端开发的话），因而这种机械化比拟固定的结构化组织中，往往通过命令一键生成即可，而后再对 service/dbService 中写入独特的逻辑即可。
这种开发模式能节俭很多开发工夫，且上手容易，开发者往往只须要关注逻辑开发即可，但往往会呈现很多重复性的代码，这也是自动化代码生成始终存在的弊病。
2）基于可视化 UI 生成代码
基于可视化搭建的代码生成，这也是目前市场上最多的一种产物，也是很多可视化搭建文章强行给它带上的一种帽子，但精确的说它并不齐全属于自动化生产代码，只是其中的一个环节而已，因为它须要过多的退出人为干涉，最终能力失去咱们想要的运行程序，感觉它一点都不自动化，如何对得起“自动化”三字？
但可视化搭建确实能带来一些节约生产力的性能，同时也给其余角色赋能，搭建利用的不肯定是开发了，他们甚至能够不须要懂任何程序，能够是设计、产品和经营。
其中最为成熟的莫过于汽车行业生成代码。对，你没看错，就是汽车行业，在咱们的印象中，汽车行业属于比拟传统的行业，仿佛与新兴产业互联网的代码编程八竿子打不着。然而，在 2010 年之前，大多数的汽车控制软件，如发动机控件、变速箱软件、车身控制软件等都是通过手写 C 代码实现的。开发流程如下：
其中设计师是不懂代码的，从设计图交付开始到最终控制器的实现，这一过程会呈现两个问题，设计师与码农之间的沟通老本以及码农的交付品质，我的项目越大这两大问题就越突出，间接影响交付日期、老本和品质，通常状况下交付工夫与老本成反比，与品质成正比，而工夫就是金钱的明天，要同时保障老本和品质，更好的方法就是设法将将代码标准化，同时升高沟通老本。
因而，可视化 UI 生成代码仿佛是最合适的路径。它从设计师的角度登程，将视图 UI 与命令行一一绑定，设计师拖动一个视图即生成一个对应的 C 代码。最终，码农下岗了。
下面这种成熟的 Simulink 软件解决的可视化逻辑的管制，只能解决简略的逻辑，与古代的逻辑编排的设计理念雷同。当然它也有本人的毛病就是不适宜简单的我的项目工程，在这种场景，它反而比间接写代码的效率更低。
另一个驰名的可视化 UI 生成代码例子，便是.NET 时代的 eclipse 的 web 搭建，应用过 eclipse 编辑器开发 web 界面都应该晓得这个工具，如图 \
只是它在开发者的用户体验上比不上网页三剑客，最终被淘汰了，毕竟它只是主打 JAVA 开发的 IDE，开发 Web 可视化也只是其中一个扩大而已，这里也通知咱们一个情理，一个产品的精而美，比大而强反而更容易获得成功。专一而顶尖，是很多产品的胜利神秘。
当然目前可视化搭建的零碎，是在太多了，目前次要分为两种形式，运行时搭建和生成源码搭建，这里就不一一开展介绍了。
3）基于代码语料生成代码
基于代码语料生产代码的前提是要有足够的语料，也就是代码片段。这种形式，通常都是基于 IDE 的插件而开发的利用。因为它最终的目标是为了开发提效，针对的用户群体是开发者，必须有开发染指生成一个半成品的代码片段或模块。
如果你有急躁浏览到此，阐明你是对代码生成畛域感兴趣的同行，为了表示感谢，接下来会安利一波福利。这里的福利也只是针对前端开发，次要是针对 vscode 插件开展介绍。
这里其实须要分为简略和简单两种场景：
- 固定语料
- 智能化语料
固定语料
用户提前设置的代码片段，通过监听用户输出快捷键值，搜寻出对应的片段，提醒用户。\
针对 vue 的提醒插件 Vue 3 Snippets\
针对 react 的提醒插件 ES7 React/Redux/GraphQL/React-Native snippets\
下面两款插件的下载量都是百万级别以上的，所以风行水平是相对杠杠的，当然如果你感觉它们不好用，或者不够贴切公司外部的代码片段，也能够本人定制。
这种生成代码形式，简略而疾速，但也存在其弊病，固定化不好扩大，而且最令人不快的是使用者须要肯定的学习老本，须要提前理解键值以及对应的代码片段。
为了解决这个弊病，于是聪慧的程序员们便退出智能化，利用训练学习法找出对应的代码片段，于是有了接下来的智能化语料。
智能化语料
1）Kite Autocomplete 插件 \
首先介绍第一个智能化代码提醒 vscode 插件 Kite Autocomplete，在超过 2500 万个文件上训练的 ML 模型，Kite 为您的代码编辑器增加了 AI 驱动的代码实现性能，赋予开发人员超能力。\
它会依据用户输出的上下文以及以后输出，预判用户将要输出的内容。
在平安方面，kite 在本地运行，您的代码是公有的，不会来到您的机器。
这种智能化输出是依赖 n -gram 模型（不理解 n -gram 模型的童鞋能够自行搜寻理解一下），只不过它比 n -gram 模型做得更前一步，会事后读取整个文件的上下文，联合以后的输出再推断出用户的行为。
总体上，Kite Autocomplete 插件还是蛮好用的，它反对多种语言，应用 vscode 编辑器的同学强烈建议应用，在这里给你们种草了，超好用，谁用谁晓得。
2）GitHub Copilot 插件 \
接下来介绍另一个智能化代码提醒 vscode 插件 GitHub Copilot，它是 OpenAI 与微软联手推出的一款 AI 代码生成代码工具，能够说它是 vscode 官网亲儿子也不为过，不过要应用它须要注册。让咱们看看你它的官网介绍
GitHub Copilot 由 OpenAI 创立的新 AI 零碎 Codex 提供反对。GitHub Copilot 比大多数代码助手了解的上下文要多得多。因而，无论是在文档字符串、正文、函数名称还是代码自身中，GitHub Copilot 都会应用您提供的上下文并合成代码以进行匹配。咱们正在与 OpenAI 一起设计 GitHub Copilot，以便在开发人员应用它时更智能地生成平安无效的代码
它最大的外围竞争力便是能够依据正文主动生成代码，也就是说你通知编辑器性能形容，它便能够主动帮你生成你想要的代码了，听起来是不是很酷？它实现原理如下：
当然，它也能够主动填充反复代码，GitHub Copilot 非常适合疾速生成样板和反复代码模式，这个性能齐全就是将上述介绍的固定语料蕴含了进去，能够说对须要写大量模版代码的程序员是十分香的一个操作。
另一个比拟重要的性能便是测试代码，官网示意无需辛苦的测试。测试是任何弱小的软件工程我的项目的支柱。导入单元测试包，让 GitHub Copilot 倡议与您的实现代码匹配的测试。\
据官网介绍，它是一款基于训练集却能够生成素来没呈现过的新代码的工具，听起来是不是很牛？它竟然能够“创立”代码了。
最初也是最重要的一点，GitHub Copilot 插件临时只提供无限用户的试用体验，目前只有预览版本，总之一句话，临时用不了。
4）基于智能化生成代码
1）sketch2code\
介绍完 GitHub Copilot 后，上面让咱们理解微软的另一款智能化生成工具 sketch2code
它的次要性能是将手绘图转化 HTML 代码。
它实现的过程如下：
1. 首先，用户通过网站上传图片。
2. 自定义视觉模型预测图像中存在哪些 HTML 元素及其地位。
3. 手写文本辨认服务读取预测元素内的文本。
4. 布局算法应用来自预测元素的所有边界框的空间信息来生成包容所有元素的网格构造。
5.HTML 生成引擎应用所有这些信息来生成反映后果的 HTML 标记代码。
于是我连忙试了一波，成果如下：
左中右别离为草稿原图，辨认剖析图，后果 html
因为是横屏的角度，嗯嗯，我原谅你，再来个失常的吧
辨认度还是不太现实呀。
同时它还反对摄像头辨认，也就是说只有加上硬件设施，产品就能够一边在下面 bibi……哦不对，是一边布局，一边生成代码，只不过是原生的 html 代码，我又连忙试了一波，后果:
下面是摄像头拍到的快照，上传之后……
啥？辨认不出，好吧。预计是我画得比拟潦草，而且可能图片背景不是全白的，于是乎我用了它官网提供的示例图
成果好一点，但还是不能齐全辨认进去。
所以它目前还是有些缺点的
- 生成后果只能是原生 HTML
- 识别率较低，草稿图还原度有待晋升
2）teleporthq
另一款 AI 智能化代码生成工具是 teleporthq，它与下面的 sketch2code 原理很类似，只是它更进一步，如图
产品经理一边在小黑板上画图，前面的机器一边扫描，辨认并生成代码，同时实时给出预览成果。真正做到了一边画草稿一边生成代码，实现自动化生成代码性能，原文请返回(https://teleporthq.io/blog/we…)。
teleporthq 它的官网仿佛与一般的可视化搭建器并没有什么不同，然而，如果仔细观察，你会发现它其实比一般的可视化搭建器更多一些货色，比方反对草图到代码，视觉 API，而这些货色正是联合硬件设施实现代码实时输入必不可少的货色。当然它辨认草稿图的辨识度就 ememem~，除了草稿图，它也是反对辨认 Sketch 素材的。
目前它反对生成的指标代码有 React/Vue/Angular 等，更多可返回其官网 https://teleporthq.io/
teleporthq 与国内阿里的 imgcook 原理上很类似，只是 imgcook 辨认的是各种设计师的素材 (Sketch/PS/Figma) 并将其生成多种指标代码，imgcook 就不一一开展介绍，读者可自行鉴赏。
论断
明天咱们从互联网的倒退历史别离介绍了主动生成代码的几种形式：
- 基于模版编排生成代码
- 基于可视化 UI 生成代码
- 基于代码语料生成代码
- 基于智能化生成代码
无论如何倒退，其本质其实素来没有变过，那就都是基于模版自身，变的只是转换规则。
文 /Alan
关注得物技术，做最潮技术人！
