在 Visual Studio Code (VS Code) 中，你可以配置自动保存时自动格式化代码。这可以通过安装合适的扩展（如 Prettier 或 ESLint）和配置设置来实现。下面是详细步骤：

1. 安装 Prettier 扩展

1. 打开 VS Code。
2. 点击左侧的扩展图标（四个方块组成的图标）。
3. 在搜索栏中输入 “Prettier - Code formatter”。
4. 找到并点击 “Prettier - Code formatter”，然后点击 “安装” 按钮。

2. 配置 VS Code 自动格式化

1. 打开 VS Code 设置：

   • 点击左下角的齿轮图标，然后选择 “设置”。
   • 或者按 Ctrl+, 快捷键打开设置。

2. 在设置中搜索 “Format On Save”。

3. 勾选 “Editor: Format On Save” 选项。

3. 配置 Prettier 作为默认格式化程序

1. 在设置中搜索 “Default Formatter”。
2. 找到 “Editor: Default Formatter” 选项，并选择 “esbenp.prettier-vscode”。

4. 添加 Prettier 配置文件（可选）

你可以在项目根目录中添加一个 .prettierrc 文件，定义 Prettier 的配置。以下是一个示例 .prettierrc 文件：

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

5. 安装 ESLint 扩展（可选）

如果你还想使用 ESLint 来格式化和检查代码，可以安装 ESLint 扩展：

1. 打开 VS Code。
2. 点击左侧的扩展图标。
3. 在搜索栏中输入 “ESLint”。
4. 找到并点击 “ESLint”，然后点击 “安装” 按钮。

6. 配置 ESLint 自动修复

1. 打开 VS Code 设置。
2. 在设置中搜索 “Eslint: Auto Fix On Save”。
3. 勾选 “Eslint: Auto Fix On Save” 选项。

7. 添加 ESLint 配置文件（可选）

你可以在项目根目录中添加一个 .eslintrc 文件，定义 ESLint 的配置。以下是一个示例 .eslintrc 文件：

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "@typescript-eslint"
  ],
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "single"]
  }
}

8. 保存并格式化代码

现在，每当你保存文件时，VS Code 将自动格式化代码。如果 Prettier 和 ESLint 都安装并配置好，它们将协同工作，确保代码按照你定义的风格进行格式化和检查。

完整的配置示例

在 .vscode 目录下创建一个 settings.json 文件，以确保这些设置在项目级别生效：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.autoFixOnSave": true
}

通过以上步骤，你可以在 VS Code 中实现自动保存时自动格式化代码的功能。