做实习生的时候，当时带我的牛人跟我讲过一句话：能黏贴复制的千万不要自己打字，打的多错的多。但是黏贴复制也是需要时间的，那么如何快速的开发项目，避免少写代码呢，我打算根据以往的经验总结下。文章将不断更新。
首先分为几大类：
1、VSCode可以使用的快捷方法
1）只用VSCode快捷键：
举例：搭建一个html文件骨架，只需要使用 ！加 Tab键，就可以快速生成以下代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
- 利用 Snippets
VSCode中选择首选项-》用户代码片段 -》选择JavaScript片段。
{
// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"New React Class": {
"prefix": "nrc",
"body": [
"import { PureComponent } from \"react\";",
"class $1 extends PureComponent {",
"state = {}",
"constructor(props) {",
"super(props);",
"}",
"componentDidMount() {",
"}",
"render() {",
"return <div></div>",
"}",
"};",
"export default $1;"
],
"description": "Create a React Class"
}
}
然后再 js 文件中，输入nrc将能够快速新建一个 React 类文件。你可以根据自己的业务需求，建立各种各样的代码片段，快速引入。
import { PureComponent } from "react";
class Top extends PureComponent {
state = {}
constructor(props) {
super(props);
}
componentDidMount() {
}
render() {
return <div></div>
}
};
export default Top;
3）安装 Snippets 扩展插件。安装完成后，就可以使用各种快速写代码的片段了。
2、自己构建脚手架
本身已经有各种各样的脚手架了，自己不需要动手开发很多，但是由于市面上的脚手架更加通用，而在自己项目中，依然会有很多定制化的东西，根据不同的业务场景，如单页面、多页面、H5页面、后台管理页面，可能需要多个脚手架。可以在原有脚手架做二次封装。使得更加符合自己的页面场景。 一个业务脚手架都需要哪些内容呢？待补充
3、可视化拖拉生成代码
1）生成活动页代码。当页面功能较为简单时，如邀新页面，更新频繁，但是没啥负责操作，像我公司以前就开发了个叫做画容的系统，可视化构建页面，一键发布，非常方便。 后续尝试写个测试系统，待续。
2）生成业务代码。例如Table页面，这是我们项目中的一个痛点。一个table有无数个列，列跟接口属性一一对应。机械化的黏贴复制，几十个属性。产品写一遍、后端写一遍、前端再写一遍。如果在新建table的时候，产品写table中文属性，后端添加好对应字段。前端再一键生成，大大减少了机械化工作。是不是很方便？这段时间打算好好搞搞这个代码。待续。
