vscode下的vue文件格式化问题

下面是“vscode下的vue文件格式化问题”的完整攻略。

背景

在使用Vue.js进行前端项目开发时，在vscode中打开一个.vue文件后，格式化代码时会遇到一些问题。默认情况下，vscode只会格式化.html和.js部分的代码，而.vue文件中嵌套了.html、.css以及.js代码，所以需要进行一些配置才能完整格式化.vue文件。

解决方案

安装插件

首先，在vscode中安装vetur插件，该插件提供了对.vue文件的友好支持。可以在vscode的插件商店中搜索并进行安装。

配置settings.json

接下来，打开settings.json文件，可以通过文件 > 首选项 > 设置或者快捷键Ctrl + ,来打开。在该文件中添加如下配置：

"[vue]": {
  "editor.defaultFormatter": "octref.vetur"
},
"vetur.format.defaultFormatter.html": "prettier",
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatter.css": "prettier",
"vetur.validation.template": false,
"vetur.validation.script": false,
"vetur.validation.style": false,
"editor.formatOnSave": true

上述配置含义如下：

• "[vue]"：指定对于.vue文件的配置

• "editor.defaultFormatter": "octref.vetur"：使用vetur作为默认格式化工具

• "vetur.format.defaultFormatter.html": "prettier"：在.vue文件中，使用prettier格式化.html代码

• "vetur.format.defaultFormatter.js": "prettier"：在.vue文件中，使用prettier格式化.js代码

• "vetur.format.defaultFormatter.css": "prettier"：在.vue文件中，使用prettier格式化.css代码

• "vetur.validation.template": false：禁用对.vue文件中的<template>块语法错误进行检查

• "vetur.validation.script": false：禁用对.vue文件中<script>块的语法错误进行检查

• "vetur.validation.style": false：禁用对.vue文件中<style>块的语法错误进行检查

• "editor.formatOnSave": true：在保存文件时自动格式化代码

示例说明

下面以一个简单的.vue文件为例进行说明：

<template>
  <!-- 这里是Vue模板代码 -->
  <div>
    <p>Hello, {{ name }}!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'world'
    }
  }
}
</script>

<style scoped>
p {
  color: red;
}
</style>

在默认情况下，使用快捷键Shift + Alt + F进行代码格式化，只会格式化.html和.js部分的代码，如下所示：

<template>
  <!-- 这里是Vue模板代码 -->
  <div>
    <p>Hello, {{ name }}!</p>
  </div>
</template>

<script>
export default {
data() {
  return {
    name: 'world'
  }
}
}
</script>

<style scoped>
p {
color: red;
}
</style>

但是通过上述配置之后，再次使用Shift + Alt + F进行格式化，则会将.css部分的代码也进行格式化，结果如下所示：

<template>
  <!-- 这里是Vue模板代码 -->
  <div>
    <p>Hello, {{ name }}!</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'world'
    }
  }
}
</script>

<style scoped>
p {
  color: red;
}
</style>

当然，如果你想更改.html、.js、.css部分的格式化配置，只需要在settings.json文件中对应修改即可。