2019-02-14 Vue框架下eslint插件的使用

一、说明
1、本文的示例环境是vscode
2、基于vue框架

二、步骤
2.1、vscode里需要装下eslint插件，如图

image.png

2.2、安装eslint
（如果已经安装了eslint，可以查询下eslint的版本），比如：

image.png

这里eslint的版本必须在v5.12以上

2.3、安装私有eslint插件包

image.png
image.png

2.4、进入到项目工程里，进行eslint配置
在上面的eslint安装完之后，在工程里有个.eslintrc.js配置文件，在配置文件里添加扩展

image.png

2.5、进入vscode设置里进行用户自定义修改

image.png

上面的configFile是指定eslint配置的路径地址（注意这里的相对路径）
eslint.validate是指定对哪些格式文件进行eslint检查
修改好后进行设置保存

2.6、经过上面的步骤后，基本现有的工程代码里就会执行eslint检查
比如

image.png
image.png
image.png

2.7、如果没有进行修改，那么在执行相应的npm run命令时也会在终端里显示warning或error提示信息

image.png

2.8、说明：
（1）报错no magic number是什么意思

image.png
image.png (2) 在.vue文件里对于自闭和的标签比如<input/> eslint也会报错，原因是 image.png

但我们是需要input标签的，那么我们就可以进行规制例外
在.eslintrc.js里把这个规则off掉

image.png