这篇保姆级教程会带你从0到1实现自动格式化：先教你装ESLint和VSCode插件（附官网下载链接，避免下错盗版插件），接着一步步改settings.json配置（代码直接复制粘贴就行，每个参数都标了注释），最后针对Vue/React/TS项目给不同配置方案。我自己带实习生时就用这套方法，新人第一天就能写出符合团队规范的代码，再也不用我手把手改格式了。
为什么这个配置能生效？简单说就是让VSCode在你按Ctrl+S时，自动调用ESLint插件按规则修复代码。ESLint官方文档里特别强调过，”自动化的格式检查比人工审查更可靠”，毕竟机器不会像人一样看心情放宽标准。配置完你可以立刻验证：故意写行带双引号的代码，保存后如果自动变成单引号，就说明成了。跟着步骤走，不管你是用Vue还是React，甚至TypeScript项目，都能搞定”保存不格式化””规则冲突报错”这些常见问题。5分钟配置，换以后写代码再也不用被格式打断思路，要不要试试？
你有没有遇到过这种情况：刚配好ESLint自动格式化，结果装了Prettier之后，保存代码时格式反而更乱了？去年带的一个React项目就踩过这个坑，ESLint想把引号改成单引号，Prettier非要用双引号，保存的时候代码格式来回跳，简直要抓狂。后来查了官方文档才明白，其实ESLint和Prettier本来分工不同，ESLint主要管代码质量（比如有没有未使用的变量），顺便管部分格式；Prettier是专业管格式的（比如换行长度、缩进），但有时候它们的格式规则会打架，比如ESLint允许末尾换行可选，Prettier强制必须有，这就冲突了。
解决起来特别简单，装两个小插件就行：eslint-config-prettier和eslint-plugin-prettier。第一个插件专门关掉ESLint里和Prettier冲突的格式规则，第二个插件把Prettier的格式规则变成ESLint能识别的规则，相当于让它们“握手言和”。你直接在项目终端里运行npm install save-dev eslint-config-prettier eslint-plugin-prettier，等安装完，打开.eslintrc.js（或者.eslintrc.json）文件，在extends数组里加上’plugin:prettier/recommended’这一项。我当时改完保存，代码瞬间就稳定了——ESLint负责质量检查，Prettier负责格式美化，俩工具各司其职，再也不打架了。现在我们团队所有项目都这么配，不管是Vue、React还是TS项目，格式问题一次搞定，省了好多麻烦。
配置后保存时没有自动格式化，可能是什么原因？
可能的原因包括：
Vue/React/TypeScript项目需要额外配置吗？
基础配置（VSCode插件+settings.json）对所有项目通用，但不同框架需补充对应ESLint插件以支持语法检查。例如：Vue项目需安装”eslint-plugin-vue”并在.eslintrc中添加”extends”: [“plugin:vue/recommended”]；React项目需安装”eslint-plugin-react”和”eslint-plugin-react-hooks”；TypeScript项目需安装”@typescript-eslint/eslint-plugin”和”@typescript-eslint/parser”，并在parserOptions中设置”parser”: “@typescript-eslint/parser”。这些插件可通过npm安装，确保规则适配框架语法。
如何自定义ESLint自动格式化的规则？
可在项目根目录的.eslintrc.js（或.eslintrc.json）文件中修改”rules”字段自定义规则。例如：需要2个空格缩进，可添加”indent”: [“error”, 2]；强制使用单引号，添加”quotes”: [“error”, “single”]；禁止使用分号，添加”semi”: [“error”, “never”]。修改后保存.eslintrc文件，VSCode会自动应用新规则，保存代码时按自定义规则格式化。所有规则可参考ESLint官方规则文档。
配置ESLint自动格式化后，和Prettier冲突了怎么办？
ESLint和Prettier冲突时，推荐使用”eslint-config-prettier”和”eslint-plugin-prettier”解决：
保存时提示“ESLint: Failed to load plugin ‘import’ declared in ‘.eslintrc’”，如何解决？
该错误通常是因为缺少对应的ESLint插件，需安装提示中缺失的插件。例如提示缺少”import”插件时，运行”npm install save-dev eslint-plugin-import”；若提示缺少”vue”插件，安装”eslint-plugin-vue”。安装完成后重启VSCode，ESLint会自动加载插件。若仍报错，检查项目package.json中是否已正确声明插件依赖，或尝试删除node_modules后重新安装依赖。
