一. vscode自带的格式化功能

注意：保存文件，不使用vscode 默认的格式化功能，操作如下：
可以通过 vscode-文件-首选项-设置-用户-文本编辑器-格式化，去除format on save 前的✔

二. 使用vscode插件Vetur

插件的作用：

1.可以突出代码（代码有对应的颜色）

2.可以提高项目的开发效率(有代码提示效果)

3.可以格式化代码

注意：vscode格式化html标签属性默认不换行，改为超出一定长度，换行（vetur插件）
左下角管理点开，选择设置。在用户设置下找到vetur，打开settings.json

放入下面的配置保存:

"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
	"js-beautify-html": {
		//"wrap_attributes": "force-aligned" //属性强制折行对齐
		"wrap_attributes": "auto",// 超出长度来换行
		"wrap_line_length": 120,
		"end_with_newline": false
	},
	// "prettier": {
    //     "semi": true, //要不要分号
    //     "singleQuote": true //单引号
    // }
}

4.会把代码中的单引号(’ ')全部转换为双引号(" ") 也会在每一行后面添加分号(；)

注意：

插件Vetur会和项目开发中的 .eslintrc.js’@vue/standard’ 发生冲突
@vue/standard’不希望代码中有双引号的存在， .eslintrc.js 会把代码中的单引号(’ ')全部转换为双引号(" ") 也会在每一行后面添加分号(；)，所以关闭插件Vetur关于js代码的格式化，改为采用.eslintrc.js里的规则。

解决方法
第一步：打开vscode 的 settings.json(设置文件)

第二步
加上“vetur.format.defaultFormatter.js":“vscode-typescript”
“vetur.format.defaultFormatter.js":"vscode-typescript"的作用就是用viscode自带的格式化工具代替vetur格式化
只会格式化代码不会把单引号边位双引号，也不会分一行都加分号

// ‘@vue/standard’ 的作用是按这个插件的格式检查空格和字符缩进等一些规则，如果不一样则会报错