VSCode使用的Vue工程配置eslint

确保VS Code首先安装了Vetur和Eslint插件。

然后，使用vue-cli提供的简单webpack模板，因此以这种方式创建的项目默认情况下不会添加ESLint。

vue init web pack-简单测试-vscode配置过程

全球安装最新的eslint

运行npm i -g [emailprotected]

埃斯林-伊尼特

安装了以下依赖项

[电子邮件受保护]=2 . 2 . 0[电子邮件受保护]=5 . 2 . 1[电子邮件受保护]=3 . 5 . 0[电子邮件受保护]=3.0.0。同时，在项目目录中生成eslintrc.js文件。只有最基本的内容：

module . exports={ ' extends ' : ' standard ' }；它表明我们使用的规则是由标准规范定义的规则。

然后在本地安装最新的eslint

Npm i -D [emailprotected]在package.json的脚本中添加一行：

Lint' :' eslint-ext.js，vuesrc的操作：

Npm运行lintVS代码将提示我们找不到eslint-config-standard:

安装它：

NPM I-D eslint-config-标准然后运行

此时，npm run lint将被提示报告错误。

4.但是，对于中的错误没有相应的提示。vue文件。这时候维图尔派上了用场。在VS代码设置中添加以下规则：

{ ' ESL int . validate ' :[' JAVAScript '，' JavaScript react '，{'language' :' vue '，' autofix' : true}]}这增加了对的支持。vue文件。

5.但是这将解析。vue文件不正确

此时，您需要安装[email protected]下一个插件。

同时，npm install -D [emailprotected]使用vue插件eslintrc.js添加了扩展.

//. eslintrc . js module . exports={ ' extends ' :[' standard '，' plugin:vue/base']}以便。vue文件可以实时检查。

6.对于冗余逗号的错误，可以让eslint插件在保存时自动修复。更改VS代码中的设置并添加以下规则：

{'eslint。autofixonsave ' : true }摘要

通过使用VS Code的插件Vetur和ESLint，我们可以为提供代码检查功能。Vue项目中的vue。

1.要安装的依赖项：json

esint ' : '^4.14.0'，' esint-config-standard ' : '^11.0.0-beta.0'，' esint-plugin-import ' : '^2.8.0'，' esint-plugin-node ' : '^5.2.1'，esint-plugin-promise ' : ' 3 . 6 . 0 '，' esint-plugin-standard ' : ' 3 . 0 . 1 '，' esint-plugin-vue ' 3: ' 4 . 0 . 0-beta。

2.eslintrc的配置js

module . exports={ ' extends ' :[' standard '，' plugin : vue/base ']}；3.JSON VSCOde的配置

{'ESLint。validate' : ['JavaScript '，' JavaScript react '，{'language' :' vue '，' autofix' : true}]，' eslint。autofixonsave ' : true }参考文献：Vetur document eslint document eslint-。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。