vscode 使用Vue Official 格式化vue

Question

vscode 使用Vue Official 格式化vue，属性都连成一行了,网上都没有找到里面Vue.volar格式化的配置方式

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

在VSCode中使用Vue官方格式化工具格式化Vue代码时，如果你发现属性都被连续排在一行里，可能是因为你的格式化配置中设置了这样的样式。如果你想要更改格式化风格或调整Vue文件（.vue）的格式化规则，可以通过以下几个步骤来进行配置：

1. 安装 Vue 和 Vue 官方格式化插件：确保你安装了 Vue 和 Vetur 或 Vue Volar（取决于你使用的 Vue 版本）。Vetur 是 Vue 2 的官方插件，而 Vue Volar 是 Vue 3 的官方插件。这些插件提供了对 Vue 文件的语法高亮和格式化支持。

   安装方法：在VSCode的扩展面板中搜索并安装 Vue 或 Vue Volar 插件。

2. 配置格式化选项：VSCode 提供了一些配置选项来自定义代码格式化的样式。你可以在 settings.json 文件（用户或工作区级别）中设置这些选项。对于 Vue 文件，你可以找到与 Vue 或 Vetur/Vue Volar 相关的配置选项来调整格式化规则。

   例如，你可以尝试调整 vue.format 配置项来改变格式化风格。具体的配置项可能会因版本而异，你可以查阅 Vue Volar 或 Vetur 的文档来了解可用的配置选项。

3. 使用格式化快捷键或命令：在VSCode中，你可以使用快捷键 Shift + Alt + F（在Windows和Linux上）或 Shift + Option + F（在Mac上）来格式化当前文件。如果你希望自动保存时自动格式化文件，你可以在 settings.json 中设置 "editor.formatOnSave": true。

如果你使用的是 Vue Volar 并且想要调整格式化规则到官方推荐的样式，你可以在 Vue Volar 的插件设置中找到相关的配置选项。通常，插件的设置面板会提供对格式化选项的详细配置，包括如何格式化单文件组件的不同部分（<template>、<script> 和 <style>）。此外，Vue Volar 也可能支持基于 ESLint 的规则配置来格式化代码风格。

如果在网上没有找到 Vue Volar 的格式化配置方式，建议查看 Vue Volar 的官方文档或者在其 GitHub 仓库中查找相关的配置示例和使用指南。有时候具体的配置可能会随着版本的更新而改变，因此确保你查看了最新版本的文档或更新日志。