本地 VSCode 的格式化规则与项目中的 .eslintrc.js 配置保持一致

1. 安装必要扩展

在 VSCode 中安装以下插件：

• ESLint：核心 ESLint 支持
• Vetur（Vue 项目必需）：Vue 语法高亮/格式化

2. 配置 VSCode 设置

在 VSCode 设置 (settings.json) 中添加以下配置：

{
  // 启用 ESLint 自动修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // 关闭 VSCode 默认格式化（避免冲突）
  "editor.formatOnSave": false,
  // 指定 Vue 文件使用 ESLint 格式化
  "[vue]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  // 指定 JavaScript 文件使用 ESLint 格式化
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  // 关闭 Vetur 的默认格式化（防止与 ESLint 冲突）
  "vetur.format.enable": false,
  // 启用 ESLint 验证 Vue 模板
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ]
}

关键配置说明

配置项	值	作用
editor.codeActionsOnSave	{ "source.fixAll.eslint": true }	保存时自动修复 ESLint 错误
editor.defaultFormatter	"dbaeumer.vscode-eslint"	强制使用 ESLint 格式化
vetur.format.enable	false	禁用 Vetur 自带的格式化
eslint.validate	["javascript", "vue", ...]	对 Vue 文件启用 ESLint 检查