我们的项目框架都是基于项目模板生成的。学过 JS 的知道：
function Person(name = 'ant') {
this.name = name;
}
let man = new Person();
这里 Person 是 man 的原型对象。同样项目模板相当于对象 Person，具体的项目相当于 man。通过项目模板，我们可以事先将项目所需要的功能点定义好，使用的时候只需要像实例化一个对象一样，简单地 new 一下就搞定了。大大地减少重复劳动，屏蔽项目配置的复杂度。
在动手搭建之前，有必要对我们的项目模板进行一个整体规划，然后按照规划逐个实现。
2 支持哪些功能 2.1 代码检查JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。同时由于每个人的编码习惯和风格不尽相同，写出的代码风格迥异，时间久了很难维护。因为没有编译程序， JavaScript 代码错误通常需要在执行过程中不断调试，效率很低。
但是，我们不可能人肉进行代码检查，因为当代码量很大的时候，需要耗费很大的精力。所以代码检查我们借助 ESLint 来实现。ESLint 可以让程序员在编码的过程中就发现问题，避免将问题带到执行时。
为什么使用 ESLint？
- ESLint 的所有规则都是可拔插的。ESLint 不限制开发人员的编码风格。因为其设计的初衷就是为了让开发人员创建符合自己编码风格的规则。当然 ESLint 有一套内置的默认规则。但是可以修改甚至自定义自己的规则一切都是可拔插的。
- 每条规则可以自由地开关。开发人员可以根据自己项目的需要决定是否开启某条规则。也可以修改检查结果的告警等级，决定抛错还是只是警告。
一个简单的示例：
let foo = bar;
1:5 - 'foo' is assigned a value but never used. (no-unused-vars)
如果我们在 ESLint 配置文件中启用了 no-unused-vars 规则。那么当代码中出现定义未使用的变量时，就会给出错误提示。
至于 CSS 的检查，这里我们使用 stylelint 来处理。stylelint 功能非常强大，可以支持 scss、sass、less 以及 sugarss 的语法检查。此外，stylelint 和 ESlint 类似，也是提供了插件机制，开发者可以自己来定义规则，根据自己的团队定制一套统一的规范，避免样式错误。
我们看一个简单的示例。
有下面这样一段 css 代码：
/* */
a { color: #FFF; }
stylelint 规则如下：
"rules": {
"comment-no-empty": true,
"color-hex-case": "lower"
}
stylelint 提示注释内容不能为空，字体颜色的 16 进制表示字母不允许大写。
1:1 error Unexpected empty comment (comment-no-empty)
3:12 error Expected "#FFF" to be "#fff" (color-hex-case)
在日常开发中，前端开发经常做的是完成部分功能和页面的开发后，去刷新一下浏览器，看一下效果是否符合预期。所以能有一个本地 Web 服务器加载我们的页面，并且当代码变动的时候自动刷新页面，可以减少开发同学的切换成本，提升开发效
