webpack手动搭建vue项目（四）—— vscode配合vetur eslint统一代码风格

1.代码风格问题

1.由于 每个人编写代码习惯不一致，而且所用编辑器不同，导致项目代码不能形成统一风格。

 2.vscode的默认的代码格式化

ctrl+shift+f

 无法通过

eslint

的代码风格检查是一个非常蛋疼的问题

2.解决方案

本文前置条件为通过webpack手动搭建vue项目完成前三部。参考地址

1.安装所需插件

使用vscode编辑器，安装eslint、vetur、EditorConfig for Visual Studio Code插件。

2.添加.editorconfig文件

在项目根目录添加文件如下

root = true

[*]    //此处风格可根据自己项目来更改
charset = utf-8
indent_style = tab    
indent_size = 4   
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
           

3.在vscode添加用户设置

"eslint.autoFixOnSave": true,
	"vetur.validation.template": false,
	"vetur.validation.style": false,
	"eslint.validate": [
		"javascript",
		"javascriptreact",
		{
			"language": "html",
			"autoFix": true
		},
		{
			"language": "vue",
			"autoFix": true
		}
	]
           

这样就可以愉快的自动检测出语法问题，并且保存时候自动修改格式问题啦！