首先确保VS代码安装了Vetur和Eslint插件。
然后使用了vue-cli提供的简单webpack模板,这样创建的工程默认没有添加ESLint。
vue init webpack-simple test-vscode
全局安装最新的eslint
npm我- g eslint@latest
运行
eslint——init
会安装以下依赖
eslint-config-standard@latest eslint-plugin-import@>=2.2.0 eslint-plugin-node@>=5.2.1 eslint-plugin-promise@>=3.5.0 eslint-plugin-standard@>=3.0.0
同时在项目目录下生成<代码> .eslintrc.js 代码>文件。里面只有最基本的内容:
模块。出口={ “扩展”:“标准”};
表明我们使用的规则是标准<代码> 代码>规范所定义的规则。
然后本地安装最新的eslint
npm我- d eslint@latest
在<代码>包。json代码>的<代码> 代码>脚本中添加一行:
“棉絮”:“eslint, ext js。vue src "
运行:
npm运行线头
VS代码会提示我们找不到<代码> eslint-config-standard 代码>:
安装它:
npm我- d eslint-config-standard
然后运行
npm运行线头
这时就会有报错的提示了。
{ “eslint。验证”( “javascript”, “javascriptreact”, { “语言”:“vue”, “autoFix”:真的 } ] }
这样就添加了对<代码>。vue 代码>文件的支持。
5。但是这样会对<代码>。vue 代码>文件中的标签报解析错误
npm安装- d eslint-plugin-vue@next
同时在<代码> .eslintrc.js> 代码中添加使用vue插件的扩展。
//.eslintrc.js 模块。出口={ “扩展”:( “标准”, “插件:vue/基地” ] }
这样,就可以对<代码>。vue 代码>文件提供实时检查的功能了。
6。对于多余的逗号这种错误,可以在保存的时候让eslint插件自动修复。更改VS代码中的设置,添加如下规则:
{ “eslint。autoFixOnSave”:真正的 }
通过使用VS代码的插件Vetur, ESLint来对Vue工程中的<代码>。vue> 代码提供代码检查的功能。
1。需要安装的依赖:
json
:“eslint ^ 4.14.0”, :“eslint-config-standard ^ 11.0.0-beta.0”, :“eslint-plugin-import ^ 2.8.0”, :“eslint-plugin-node ^ 5.2.1”, :“eslint-plugin-promise ^ 3.6.0”, :“eslint-plugin-standard ^ 3.0.1”, :“eslint-plugin-vue ^ 4.0.0-beta.4”,
注意:<代码>这里ESLint 代码>和<代码> eslint-plugin-vue> 代码需要是最新的。
2。<代码> .eslintrc> 代码的配置
js
模块。出口={ “扩展”:( “标准”, “插件:vue/基地” ]VSCode使用之Vue工程配置eslint