宝哥软件园

VSCode使用的Vue工程配置eslint

编辑:宝哥软件园 来源:互联网 时间:2021-08-25

确保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-。

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

更多资讯
游戏推荐
更多+