文档简介
eslist作为开发过程中必不可少的工具，如何更好的利用它为开发做好辅助工作，结合自身项目的不同特点，如何定制属于自己的eslit规范
目标
- 利用自定义开发eslint规则，规范代码的开发规范
设计思路简介
首先聊聊eslint的使用场景
自己的项目目前使用的eslint的方式
ESLint支持使用第三方AST解析器，刚好Babel也支持ESLint，于是我们就可以用@babel/eslint-parser来替换espree. 装好插件之后，修改.eslintrc.js即可
由于前期开发人员没有深入的研究每一个eslint插件的具体规则
都是在百度认为能解决项目中的某一项检测功能，而进行的依赖包添加， .eslintrc.js中也没有使用，以下以我自己的项目为例，由于项目存在周期已经三年以上，故而存在多个依赖包是此情况，现在分析几个eslint的插件包
当前系统中引入未使用的eslint第三方插件
"eslint-plugin-import": "~2.28.1",
提供对ES6+ import/export语法的支持，点击跳转
"eslint-plugin-node": "~11.1.0",
针对node使用相关规范，点击跳转
"eslint-plugin-promise": "~4.3.1",
promise使用的相关规范，点击跳转
"eslint-plugin-standard": "~4.1.0",
Standard Linter的补充插件
"eslint-plugin-vue": "~7.20.0",
vue官网提供的检测插件：点击跳转
文件进行eslint的方式及对应步骤
第一步：针对提交commit动作的拦截触发
插件@commitlint/cli，属性pre-commit提交前触发的方法，可自定义相关检测条件范围，比如文件类型等
第二步：内部调用eslint的检测规则，rules中对应的一系列规则，也可以手动执行。命令如下
npx eslint src/ 文件路径
第三步：执行内部规则，初步解释为 节点转换为ast树结构后，进行对应节点状态等情况处理
先参考一下ast结构的示例：在线查看
eslint 自定义的规则开发示例
背景基于当前小组内部制定的代码review规范，进行规则拆解，并纳入规则的实现。
当前根据规则开发的验证规则插件为：eslint-plugin-dir-structure
在线相关文档如下：点击查看
eslint自定义规则的参考文档地址如下：点击查看
规则开发指导文档：点击查看
检测规则分解过程与实现
目标：检测当前router文件夹下的js文件中的path路径与views中模块是否一一对应，router默认导出的变量名称是否为驼峰形式，是否包含了整个文件路径（方便根据变量名直接知道其用途）
详细讲解看具体代码 npm 官网查看 eslint-plugin-dir-structure
第一步检测文件夹目录与文件path是否一致
第二步检测 vue文件的name 命名。 ---- vue/multi-word-component-names。 vuename命名规范
检测当前 service下的变量的定义
检测export default 返回值的命名是否与路径一致
- 第三步检测系统是否存在使用非驼峰形式的命名，主要针对文件夹命名，文件命名
变量命名要求必须使用 驼峰的形式命名. camelcase
下一步待研究stylelint得相关规则并实现匹配自己项目规范的场景
比如当前项目中大量使用了scss 的相关方法如：@include @if @function等，scss的基础知识文档点击在线查看
比如当前要实现检测代码中是否存在 color值，主要针对vue文件、scss文件，template部分，style部分 ----后续调研如何利用Stylelint实现检测
