本文除了说明步骤，也会带上原理和方法，从而更好理解这些工具的机制和相互关系
?
步骤一：
在 vscode 上下载安装 Vetur 插件?
Vetur 是目前 vue 开发几乎必备的 IDE 插件。
从官方文档可知，它的常用功能包括了 vue 语法高亮、错误提示、格式化等。基本的开发需求差不多都可以这一个插件搞定。
下载安装 Vetur 之前，.vue 类型的文件原来会被 vscode 识别为 plainText，
下载后，vue 文件的语法解析挂靠了 Vetur 插件，可以呈现语法高亮和提示错误了。
步骤二：
在 Vetur 的官方文档里我们可以看到，Vetur 支持 Prettier 等以下几种格式化插件
并且这些插件?已经打包集成到 Vetur 里了，不需要额外下载。
而且 vue 文件里的 js/css/html 等部分，默认用 Prettier 来格式化。
这一点可以从官方提供的默认「语言-格式化工具」vscode 配置看到：
步骤三：
如果你的 Prettier 配置不生效，需要确认当前的格式化工具是什么
或者你想用其他工具来格式化你的 vue 文件
查看和更改这些默认「语言-格式化工具」配置的方法，在官方文档里也有提到：
即在 vscode 的 setting 里搜索?vetur.format.defaultFormatter，对相应语言下拉更改即可
步骤四：
如果你想自定义格式化的规则，比如是否要出现尾逗号、语句结尾是否加分号等
需要对 Prettier 进行规则配置。这里配置有两种方法，
第一种?是采取 Prettier 官网提供的全局 Prettier 插件配置方法?（官网地址）
（这个和自己下载去插件 Prettier 后配置是一样的，因为本质也是 Vetur 集成了 Prettier 插件）
做法简而言之就是在根目录新建?.prettierrc 文件，添加一下配置，不赘述。
{
"semi": false,
"trailingComma": "all"
}第二种 是在 vscode?的配置文件 setting.json 里添加对?Vetur 的格式化配置
（关于如何打开 vscode 的 setting.json文件，网上有很多教程，可自行搜索）
"vetur.format.defaultFormatterOptions": {
"prettier": {
"semi": false,
"trailingComma": "all"
}
}