VSCode 格式化 VUE 代码并自定义 Prettier 规则

本文除了说明步骤，也会带上原理和方法，从而更好理解这些工具的机制和相互关系

 

步骤一：

在 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"
  }
}