vs code 配置自动格式化代码

✅ 在 VS Code 中配置自动格式化

步骤 1：安装格式化扩展

打开 VS Code 的扩展市场 (Ctrl + Shift + X / Cmd + Shift + X)，安装以下常用格式化扩展：

• Prettier - Code formatter

• ESLint

---

步骤 2：全局配置自动格式化

1. 打开 settings.json：

   • 按 Ctrl + Shift + P (或 Cmd + Shift + P)，输入 Preferences: Open Settings (JSON)，然后回车。

2. 在 settings.json 中添加以下配置：

{
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.format.enable": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true
  }
}

---

步骤 3：针对特定文件类型配置格式化器

如果你想针对不同的文件类型使用不同的格式化器，可以在 settings.json 中添加：

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

---

步骤 4：安装 Prettier 和 ESLint 的依赖 (可选)

如果项目中使用 Prettier 和 ESLint，则需要在项目根目录下执行：

npm install --save-dev prettier eslint eslint-config-prettier eslint-plugin-prettier

---

步骤 5：配置 Prettier

在项目根目录创建 .prettierrc.json 文件：

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

---

步骤 6：配置 ESLint (可选)

如果使用 ESLint，在项目根目录创建 .eslintrc.js：

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: "module"
  },
  rules: {}
}

---

✅ 验证自动格式化是否生效：

1. 打开任意文件 (.js, .vue, .html 等)。

2. 输入不符合格式规则的代码。

3. 保存 (Ctrl + S / Cmd + S)。

4. 代码应自动按照 Prettier 和 ESLint 的配置进行格式化。