在 VScode 中配置前端代码格式化，可以通过以下几个步骤进行：

1. 安装 Prettier 插件

Prettier 是一个流行的代码格式化工具，支持很多编程语言，包括 JavaScript、TypeScript、HTML 和 CSS。

• 打开 VScode，点击左侧的 扩展（Extensions）图标，搜索并安装 Prettier - Code formatter。

2. 配置 Prettier

通过修改 .vscode/settings.json 文件来配置 Prettier 格式化选项：

• 在 React 项目的根目录下创建（如果没有的话）一个 .vscode/settings.json 文件，添加以下内容：

  {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true, // 保存时自动格式化
  "prettier.singleQuote": true, // 使用单引号
  "prettier.trailingComma": "es5", // 在可能的情况下，添加尾随逗号
  "prettier.semi": true, // 结尾加分号
  "prettier.tabWidth": 2 // 缩进宽度
  }

3. 配置项目中的 .prettierrc 文件（可选）

为了让团队中的每个人都使用相同的代码格式，可以在项目根目录下添加一个 .prettierrc 配置文件，内容如下：

{
  "singleQuote": true,
  "trailingComma": "es5",
  "semi": true,
  "tabWidth": 2
}

这样，无论是使用 Prettier 插件，还是通过命令行运行 prettier，都会遵循这些配置。