美文网首页
2019-02-14 Vue框架下eslint插件的使用

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

作者: tsl1127 | 来源:发表于2019-02-14 16:14 被阅读0次

一、说明
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

相关文章

网友评论

      本文标题:2019-02-14 Vue框架下eslint插件的使用

      本文链接:https://www.haomeiwen.com/subject/glveeqtx.html