VSCode中Vue代码的格式化问题解决

VSCode中Vue代码的格式化问题解决

1、单引号成双引号的问题；

2、句尾自动添加分号的问题；

3、函数中参数的那个括号后面的空格被删除的问题；

4、在对象的最后一项后添加逗号的问题。

使用默认Prettier 格式化 Vue 文件

未格式化的vue

格式化后的vue

可以看见单引号成双引号、句尾自动添加分号、在对象的最后一项后添加逗号，看起来很不舒服。

由此我们可以做以下操作

1、安装插件：

• 确保你已经安装了 Prettier - Code formatter 和 Vetur 插件。Vetur 是 VS Code 上专门用于 Vue 开发的插件，提供了语法高亮、智能感知、Emmet 等功能。
  • 打开 VS Code 的扩展市场（快捷键 Ctrl+Shift+X），搜索并安装 Prettier - Code formatter 和 Vetur。

2、更改配置：

右键鼠标选择使用…格式化文档

选择Prettier - Code formatter

打开 VS Code 设置 (Ctrl+,) -->点击打开设置

在setting.json中,添加以下配置，即可解决问题

    "prettier.singleQuote": true,       //使用单引号而不是双引号
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,     //在函数名和其后跟随的圆括号之间插入一个空格
    "prettier.trailingComma": "none",   // 不在对象的最后一项后添加逗号
    "files.autoSave": "onFocusChange",  //即失去焦点,自动保存
    "prettier.semi": false,             //不在在语句末尾自动添加分号

1. "prettier.singleQuote": true

   • 这个选项指示 Prettier 在格式化 JavaScript、TypeScript 等文件时使用单引号 (') 而不是双引号 (")。这有助于保持代码风格的一致性，并可能减少某些情况下转义字符的使用。

2. "javascript.format.insertSpaceBeforeFunctionParenthesis": true

   • 此选项应用于 VS Code 内置的 JavaScript 和 TypeScript 格式化工具，它会在函数名和其后跟随的圆括号之间插入一个空格。例如，函数声明function myFunc () { … }将会有一个空格在myFunc和()之间。

3. "prettier.trailingComma": "none"

   • 控制 Prettier 是否添加尾随逗号到对象或数组的最后一项。设置为"none"表示不添加任何尾随逗号，即使是在多行结构中。这对于向后兼容性很重要，尤其是当你需要支持旧版本的 JavaScript 引擎时。

4. "files.autoSave": "onFocusChange"

   • 这个设置控制了 VS Code 的自动保存功能。当设置为"onFocusChange"

     时，意味着当你从编辑器切换到其他应用程序或者窗口（即失去焦点）时，未保存的更改将被自动保存。这是一个非常实用的功能，可以防止数据丢失。

5. "prettier.semi": false

   • 指定是否在语句末尾自动添加分号。如果设置为false，Prettier 将不会在你的代码结尾处添加分号，除非它们对于避免语法错误是必需的。这种做法符合某些开发者偏好以及现代JavaScript编码标准，比如 ASI（Automatic Semicolon Insertion）。

这些配置可以帮助确保团队成员之间的代码风格一致性，并且能够提高开发效率。通过调整这些设置，你可以根据项目需求和个人偏好来定制你的开发环境。如果你正在与其他开发者协作，确保你们共享相同的 .prettierrc 文件或等效的配置文件，以保证整个团队遵循统一的代码风格。