时间: 2020-08-04

​  最近在学习Vue.js，用到脚手架vue-cli自动创建项目后，发现vscode老是报错，总是有代码风格的问题，然后就研究了下Vscode如何配置Eslint插件来更方便的做vue项目。

​  首先确保安装以下插件：

• ESLint

• Vetur

​  其中ESLint是用来在Vscode中检测语法错误的插件，Vetur则是对vue进行高亮显示的插件，ESLint会根据当前vue项目中.eslintrc.js的配置来进行语法检查，和代码修复

打开Vscode的settings.json加上配置:

{ 
	...,
	"editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,	// 设置当文件保存时ESLint插件自动修复js
    },
	...
}

​  但是当Vscode中同时安装了ESLint和Vetur两个插件，代码格式化Shift+Alt+F会默认使用Vetur来对vue文件格式化，而Vetur会针对vue文件中html，css，js采用不同风格分别格式化，如下图:

​  上面是我修改了的,默认情况下Vetur中html，css，js都采用prettier的方式格式化，Vetur默认按prettier风格格式化了vue中js,就会和ESLint自动保存格式化发生冲突，所以干脆取消vetur对js的格式化设置为none，或者你可以在settings.json中配置

{
	...,
	"vetur.format.defaultFormatter.js": "none",
}

​  然后每次写代码按Ctrl+S保存时，ESLint就会自动按照项目中.eslintrc.js来格式化vue中js部分，按Shift+Alt+F时Vetur就会自动格式化vue文件中html，css这样就解决了vscode写vue格式化后ESLint老是报错的问题。

​  我使用的插件版本为：

• ESLint：v2.1.8

• Vetur：v0.25.0

如果你采用的别的版本,配置可能会有所不同请查看对应版本的官方文档

如果本文对你有帮助欢迎点赞哦 ٩(๑>◡<๑)۶