本文仅供本人学习使用，文章来源：https://blog.csdn.net/wangshu696/article/details/80983538，侵删。
为了统一团队的代码规范，除了一纸规范说明之外，还需要引入工具进行限制。虽说工具并不能完全实现规范中的规则，但至少能够在一定程度上缓解代码不统一的局面。
相对于后端，前端代码规范的质量检查涉及到HTML, CSS，Javascript ，如今还涉及到SCSS，ES5，JSX, React，Vue，Angular等，更是复杂。
本文提供了在检查工具方面的规则制定，在编辑器IDE中进行配置，在webpack中进行打包。让开发小伙伴有所参考
相关规则可以在webpack4项目demo中看到，里头放了相关的规则链接注释，欢迎围观~
笔者对常见的代码检查工具做了一番调研，结合规则支持度，配置方式，在编辑器Sublime于Webstrom这只IDE上的支持度，在webpack打包的支持，最终确立了使用如下方案
HTML / tpl:HTMLHint
CSS / SCSS:StyleLint
JS / JSX:ESLint
对比参考：JavaScript 代码静态质量检查CSS 代码静态质量检查HTML代码风格检查工具对比
尽管如此，这三个插件也并不完美，有太多太多的坑踩遍了，如果你有更合适的套件，欢迎建议~
选取了工具之后，就需要确立相应的规则。
规则非常多，对我们这种没经验的小白是不可能一条一条自主去选取的，所以需要依据某些参考。但也只能是参考，我们需要把这些通用的设置，结合到我们实际项目中，并一条条去了解规则，最终选出并摘录进我们的规则集中。
ESLint规则
ESLint规则最多，参考自eslint-config-alloy，再加入我们的自定义
StyleLint规则
ESLint规则也很多，以stylelint-config-standard为基础，加入自定义
HtmlHint规则
HtmlHint的规则比较少，可以直接自定义
要注意的是它并不支持JS语法，需要使用JSON格式（在webpack中会强制按这个语法parse）
对于页面中嵌入的CSS与JS，也需要进行检查。
在ESlint中提供了eslint-plugin-html插件，然而对<style> 与 <script> 造成的缩进处理不当（配置失效的样子），这个是比较难搞的 与 造成的缩进处理不当（配置失效的样子），这个是比较难搞的
在StyleLint中提供了stylelint-processor-arbitrary-tags插件，不过新版似乎内置了支持。然而也并算完美，至少能用就行
在Sublime，Webstorm或其他编辑器IDE中使用这些工具的前提：
安装NodeJS，然后使用NPM在全局安装以下依赖包
npm i -g eslint babel-eslint eslint-config-alloy eslint-plugin-html eslint-plugin-react stylelint stylelint-config-standard htmlhint
在项目根目录下添加三个工具对应的文件 (这三个文件即为对应的检查规则集)，以便代码编辑器在任何地方都能找到配置文件，如
ESLint 和 StyleLint 工具提供了自动修复功能，可以修复简单的错误如少了分号，多了空格，缩进不正确等
但要注意的是，自动修复某些时候可能会使代码发生逻辑或语法错误，需谨慎使用（自动修复后一定一定一定记得比对代码，确保无误）
sublime安装对应的linter工具，以SublimeLinter工具为基础进行配置
Ctrl+Shift+P 调出安装插件层，输入关键字 sublimelinter 进行搜索安装
再安装相应的工具插件，SublimeLinter-eslint,SublimeLinter-stylelint,SublimeLinter-contrib-htmlhint
安装ESLint-Formatter以支持自动修复检查的错误
新增一个构建任务，可命名为，StyleLint-Fix.sublime-build 以支持自动修复检查的错误
在其中填入以下内容，保存在相应的位置即可
{
"shell_cmd": "stylelint $folder/node_modules/.bin/eslint --fix $file"}
接下来就是配置 SublimeLinter
打开插件配置，在User部分填入以下内容并保存即可
stylelint配置中的executable全局路径需要设置好
可以看到，在sublimelinter的配置中是以手动（manual）模式进行调用检查的，可以防止某些文件代码量太大，频繁检查消耗性能
需要检查的时候，在当前文件打开命令即可，或者使用对应快捷键（如果看不到命令，就采用重启大法吧）
以下命令关键字都是在以 Ctrl+Shift+P打开命令层的前提下进行的
Lint This View ，执行检查
SublimeLinter还支持检查HTML或tpl文件里嵌入的JS和CSS, 但Webstorm不行唷~~
Show All Errors，在底部显示错误列表
使用 ESlint-formatter进行自动修复JS
使用 StyleLint-Fix 进行自动修复CSS
这个需要调出构建任务列表层，或者使用快捷键 Ctrl+Shift+B，选择我们的fix任务执行即可
HTMLHint的不提供自动修复功能
打开设置
启用内置的ESLint检查
启用内置的StyleLint检查
本地安装HTMLHint插件，下载地址，注意 此插件仅可支持检查HTML后缀文件，不支持tpl，有兴趣的可以给作者提PR
安装之后，可能需要重启，在列表中可以看到插件配置入口
因此插件比较特殊，在windows下，bin中请使用 node执行程序的绝对路径 全局 htmlhint的绝对路径
其他环境下就慢慢试吧..
bin: D:\Program Files\nodejs\node.exe C:\Users\e470\AppData\Roaming\npm\node_modules\htmlhint\bin\htmlhint
path: .htmlhintrc
内置的ESLint与StyleLint不支持自动修复功能，所以我们需要手动创建 File Watcher
配置成手动执行可能会更好些
需要执行的时候，执行即可
参考我的webpack项目配置DEMO, 在 webpack.config.js中传入相应的参数
正式使用时autoFix会按需设置，建议修复。如果选择修复，webpack将按模块的设置进行批量修复，可能会有大量文件被修改，所以需要做好代码比对工作
另外，开启自动修复可能会导致webpack编译无限循环的问题，对于这个我们可以引入一个新的插件time-fix-plugin，直接调用即可
newTimeFixPlugin()
在使用 htmlhint-loader的时候，webpack默认无法识别html资源，在以往我们可以直接使用 htmlWebpackPlugin来识别，因为它内置支持了ejs-loader
但现在这个代码检查插入之后，我们就需要手动设置好html语法的loader。
不能使用html-loader,使用之后会导致无法识别我们的ejs语法，导致htmlWebpackPlugin的资源插入失效
解决办法也很简单，使用 ejs-loader即可，见下方配置
另外，在生产模式 npm run build：prod的时候，提供了将检查结果输出到文件的功能（css的不支持），见 lint目录
虽然有点错乱，也够搜索存档用了
而具体在webpack的核心配置文件里面，配置也是挺简单的，虽然也有蛮多不如意
首先相关的npm包需要安装好，使用htmlhint-loader eslint-loaderstylelint-webpack-plugin
配置核心部分
