由于工作需要搭建新的框架,发现原来项目中并没有使用到ESlint去规范代码,就在搭建项目时,简单的搭建了一个。
1 先要知道Eslint 是什么,在学习之前要先有一个概念ESlint只是一个作为检测代码规范的工具,既然是工具肯定不会设计的太复杂。
首先把需要的安装依赖包
--save-dev会将安装包安装在packge.json文件中的devDependencies对象中,表示在开发模式中使用,上线的时候是不需要的。
然后在packge.json文件中找到script输入:
lint:create这条指令是为了生成.eslintrc.js这个文件的,编码的规范就写在这个文件中,运行结果如下:
然后生成对应的.eslintrc.js文件如图,编码规范都在此文件中配置
该文件导出一个对象,对象包含属性 env、extends、parserOptions、plugins、rules 五个属性。
env、parserOptions、plugins
这三个放在一起将是因为你只需要知道它们是干嘛的:我的程序里要用到 ES6 、Vue语法,这几个属性就是让 Eslint 能够检验到这些语法的。其余的你不需要知道更多的哪怕一丢丢的东东了。
如果觉得官方提供的默认规则不好用,可以自定义规则配置文件。关于如何创建自定义规则配置并共享可以参考:自定义规则配置
lintall这条指令是检测src中所有的.js文件的,--fix是让eslint提供自动修复基础错误的功能。运行结果如下:
不符合ESlint规则的都会报错,可通过查看对应的eslint规则表查找报错原因 ,可参考 eslint规则表。
ESlint 的配置文件并不是一次性完成的,而是在项目过程中慢慢完善的。所以配置也是一点点添加规范的。