VSCode中Shift+Alt+F格式化触发ESLint大括号空格错误怎么解决？

这个问题本质是VSCode的格式化规则和你的ESLint规则冲突了——ESLint要求对象大括号{后面不能有空格（"never"模式），但你的格式化工具默认给{后加了空格，导致触发babel/object-curly-spacing错误。下面是几种靠谱的解决方法，按优先级推荐：

方法1：让ESLint自动修复（最推荐） #

如果你的项目已经配置了ESLint，直接让它接管格式化修复工作，从根源上避免规则冲突：

1. 确保VSCode安装了ESLint插件（在扩展商店搜ESLint安装即可）
2. 打开VSCode设置（快捷键Ctrl+, / Cmd+,），添加以下配置：

   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   }
   

   这样每次保存文件时，ESLint会自动修复所有它能处理的规则问题，包括这个空格错误。
3. 同时检查你的ESLint配置文件（比如.eslintrc.js、.eslintrc.json），确保明确设置了规则：

   {
     "rules": {
       "babel/object-curly-spacing": ["error", "never"]
     }
   }
   

   "never"就是要求{后和}前不要加空格，和错误提示的要求完全匹配。

方法2：如果用Prettier配合ESLint，对齐两者规则 #

如果你的项目用了Prettier做格式化，需要让Prettier的规则和ESLint保持一致：

1. 安装必要的依赖（在项目根目录执行）：

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

2. 修改ESLint配置文件，继承Prettier的配置：

   {
     "extends": [
       // 保留你原来的extends配置，比如"eslint:recommended"
       "plugin:prettier/recommended"
     ],
     "rules": {
       "babel/object-curly-spacing": ["error", "never"]
     }
   }
   

3. 在项目根目录创建.prettierrc文件，设置和ESLint匹配的规则：

   {
     "bracketSpacing": false
   }
   

   这个配置会让Prettier格式化时不在对象大括号内加空格，和ESLint规则对齐。

方法3：配置VSCode自带的JavaScript格式化工具 #

如果你没用到ESLint或Prettier，只想用VSCode自带的格式化工具，直接修改它的规则：

打开VSCode设置，搜索javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces，把这个选项设置为false。这样自带的格式化工具就不会在非空的对象大括号里添加空格了。

额外提示 #

• 可以通过VSCode右下角的格式化工具选择器（比如显示"Prettier"或"ESLint"的区域），确认当前使用的格式化工具是你配置的那一个，避免工具冲突。
• 如果修改配置后没生效，试着重启VSCode或重新加载窗口（快捷键Ctrl+Shift+P，输入"Reload Window"）。

内容的提问来源于stack exchange，提问作者Saeed Heidarizarei