VSCode: 从插件安装到配置，如何实现 Ctrl+S 保存时，完全按照 .eslintrc.js 中的 ESLint 规则自动格式化代码

当你按下 Ctrl+S 保存文件时，VS Code 自动：

• 按照你 .eslintrc.js 的规则（如：单引号、无分号、无尾随逗号）格式化代码
• 修复 ESLint 能自动修复的问题
• 不引入 Prettier，不冲突，不飘红

🧰 一、所需插件（只需一个）

✅ 必须安装：

• ESLint
• 作者：Microsoft
• 扩展 ID：dbaeumer.vscode-eslint
• 功能：提供 ESLint 语法检查 + 自动修复功能

🔔 注意：不要安装 Prettier - Code formatter，否则可能干扰格式化行为。

🧰 二、项目配置文件（已有）

确保你项目根目录有：

✅ .eslintrc.js（或 .eslintrc.json）
你已经有了，里面定义了规则，比如：

module.exports = {root: true,parserOptions: {parser: 'babel-eslint',sourceType: 'module'},env: {browser: true,node: true,es6: true,},extends: ['plugin:vue/recommended', 'eslint:recommended'],// add your custom rules here//it is base on https://github.com/vuejs/eslint-config-vuerules: {"vue/max-attributes-per-line": [2, {"singleline": 10,"multiline": {"max": 1,"allowFirstLine": false}}],"vue/singleline-html-element-content-newline": "off","vue/multiline-html-element-content-newline":"off","vue/name-property-casing": ["error", "PascalCase"],"vue/no-v-html": "off",'accessor-pairs': 2,'arrow-spacing': [2, {'before': true,'after': true}],'block-spacing': [2, 'always'],'brace-style': [2, '1tbs', {'allowSingleLine': true}],'camelcase': [0, {'properties': 'always'}],'comma-dangle': [2, 'never'],'comma-spacing': [2, {'before': false,'after': true}],'comma-style': [2, 'last'],'constructor-super': 2,'curly': [2, 'multi-line'],'dot-location': [2, 'property'],'eol-last': 2,'eqeqeq': ["error", "always", {"null": "ignore"}],'generator-star-spacing': [2, {'before': true,'after': true}],'handle-callback-err': [2, '^(err|error)$'],'indent': [2, 2, {'SwitchCase': 1}],'jsx-quotes': [2, 'prefer-single'],'key-spacing': [2, {'beforeColon': false,'afterColon': true}],'keyword-spacing': [2, {'before': true,'after': true}],'new-cap': [2, {'newIsCap': true,'capIsNew': false}],'new-parens': 2,'no-array-constructor': 2,'no-caller': 2,'no-console': 'off','no-class-assign': 2,'no-cond-assign': 2,'no-const-assign': 2,'no-control-regex': 0,'no-delete-var': 2,'no-dupe-args': 2,'no-dupe-class-members': 2,'no-dupe-keys': 2,'no-duplicate-case': 2,'no-empty-character-class': 2,'no-empty-pattern': 2,'no-eval': 2,'no-ex-assign': 2,'no-extend-native': 2,'no-extra-bind': 2,'no-extra-boolean-cast': 2,'no-extra-parens': [2, 'functions'],'no-fallthrough': 2,'no-floating-decimal': 2,'no-func-assign': 2,'no-implied-eval': 2,'no-inner-declarations': [2, 'functions'],'no-invalid-regexp': 2,'no-irregular-whitespace': 2,'no-iterator': 2,'no-label-var': 2,'no-labels': [2, {'allowLoop': false,'allowSwitch': false}],'no-lone-blocks': 2,'no-mixed-spaces-and-tabs': 2,'no-multi-spaces': 2,'no-multi-str': 2,'no-multiple-empty-lines': [2, {'max': 1}],'no-native-reassign': 2,'no-negated-in-lhs': 2,'no-new-object': 2,'no-new-require': 2,'no-new-symbol': 2,'no-new-wrappers': 2,'no-obj-calls': 2,'no-octal': 2,'no-octal-escape': 2,'no-path-concat': 2,'no-proto': 2,'no-redeclare': 2,'no-regex-spaces': 2,'no-return-assign': [2, 'except-parens'],'no-self-assign': 2,'no-self-compare': 2,'no-sequences': 2,'no-shadow-restricted-names': 2,'no-spaced-func': 2,'no-sparse-arrays': 2,'no-this-before-super': 2,'no-throw-literal': 2,'no-trailing-spaces': 2,'no-undef': 2,'no-undef-init': 2,'no-unexpected-multiline': 2,'no-unmodified-loop-condition': 2,'no-unneeded-ternary': [2, {'defaultAssignment': false}],'no-unreachable': 2,'no-unsafe-finally': 2,'no-unused-vars': [2, {'vars': 'all','args': 'none'}],'no-useless-call': 2,'no-useless-computed-key': 2,'no-useless-constructor': 2,'no-useless-escape': 0,'no-whitespace-before-property': 2,'no-with': 2,'one-var': [2, {'initialized': 'never'}],'operator-linebreak': [2, 'after', {'overrides': {'?': 'before',':': 'before'}}],'padded-blocks': [2, 'never'],'quotes': [2, 'single', {'avoidEscape': true,'allowTemplateLiterals': true}],'semi': [2, 'never'],'semi-spacing': [2, {'before': false,'after': true}],'space-before-blocks': [2, 'always'],'space-before-function-paren': [2, 'never'],'space-in-parens': [2, 'never'],'space-infix-ops': 2,'space-unary-ops': [2, {'words': true,'nonwords': false}],'spaced-comment': [2, 'always', {'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']}],'template-curly-spacing': [2, 'never'],'use-isnan': 2,'valid-typeof': 2,'wrap-iife': [2, 'any'],'yield-star-spacing': [2, 'both'],'yoda': [2, 'never'],'prefer-const': 2,'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,'object-curly-spacing': [2, 'always', {objectsInObjects: false}],'array-bracket-spacing': [2, 'never']}
}

这个文件就是你的“代码风格宪法”

🔧 三、VS Code 设置（关键！）

1. 打开 settings.json

• 按 Ctrl + , 打开设置
• 点右上角的 “打开设置 (JSON)” 图标（{}）

2. 写入以下配置

{// 保存时自动格式化"editor.formatOnSave": true,// 保存时，自动修复所有 ESLint 可修复的问题（如引号、分号、逗号等）"editor.codeActionsOnSave": {"source.fixAll.eslint": true},// 明确指定 ESLint 为默认格式化工具"editor.defaultFormatter": "dbaeumer.vscode-eslint",// 确保 ESLint 扩展状态可见（方便调试）"eslint.alwaysShowStatus": true,// （可选）为特定语言明确指定格式化器"[javascript]": {"editor.defaultFormatter": "dbaeumer.vscode-eslint"},"[vue]": {"editor.defaultFormatter": "dbaeumer.vscode-eslint"},"[typescript]": {"editor.defaultFormatter": "dbaeumer.vscode-eslint"}
}

🧪 四、验证是否成功

• 打开一个 .js 文件
• 写一段“违规”代码：

const msg = "hello" ;
const user = { name: "tom" , age: 18 , } ;

✅ 正确结果应该是：

const msg = 'hello'
const user = { name: 'tom', age: 18 }

• 双引号 → 单引号 ✅
• 分号被删除 ✅
• 尾随逗号被删除 ✅
• 多余空格被清理 ✅
• 没有飘红 ✅

🚫 五、常见错误排查

问题	原因	解决
保存后还是加分号/加逗号	默认格式化器不是 ESLint	检查 editor.defaultFormatter 是否为 dbaeumer.vscode-eslint
飘红不修复	codeActionsOnSave 没开启	确保写了 “source.fixAll.eslint”: true
格式化没反应	ESLint 扩展未启用	检查扩展是否安装并启用
Vue 文件不生效	未指定 [vue] 的格式化器	添加 [vue] 配置

🎯 六、核心原理总结

组件	作用
ESLint 扩展	提供语法检查 + 自动修复能力
.eslintrc.js	定义你的代码风格规则（宪法）
editor.codeActionsOnSave	告诉 VS Code：“保存时，请让 ESLint 修复所有问题”
editor.defaultFormatter	告诉 VS Code：“别用内置格式化器，用 ESLint”

👉 不是“格式化工具”在格式化，而是“ESLint”在按你的规则自动修复代码。