VSCode启用ESLint+Prettier时可选链操作符被加空格报错如何解决

可选链操作符var?.foo?.bar被自动格式化为var ? .foo ? .bar和Prettier无关，核心问题是ESLint解析器配置不匹配：
你引入了airbnb-typescript规则集，但指定的解析器为@babel/eslint-parser，该解析器默认未开启可选链语法支持时，无法正确识别ES2020/TypeScript的?.语法，会将其误判为三元运算符的? + 后续属性访问的.，触发ESLint内置的空格修复规则，自动在?后插入多余空格。

注意：你当前使用的Prettier配置无影响可选链格式的规则，不需要修改Prettier配置。

优先使用以下方案，适配你当前的TS+airbnb-typescript配置：

• 安装TypeScript专属的ESLint解析器，替换不匹配的babel解析器

# 移除不匹配的babel解析器（无其他babel依赖时可执行）
npm uninstall @babel/eslint-parser
# 安装TS官方ESLint解析器
npm install -D @typescript-eslint/parser

• 修改ESLint配置文件中的parser字段
  将原配置里的"parser": "@babel/eslint-parser"替换为"parser": "@typescript-eslint/parser"，修改后的完整配置如下：

{
  "extends": ["airbnb", "airbnb-typescript"],
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "parser": "@typescript-eslint/parser",
  "rules": {
    "@typescript-eslint/semi": "off",
    "semi": "off",
    "import/prefer-default-export": "off",
    "no-unused-vars": ["error", { "argsIgnorePattern": "next" }],
    "react/react-in-jsx-scope": "off",
    "react/jsx-one-expression-per-line": "off",
    "react/jsx-props-no-spreading": "off",
    "jsx-a11y/label-has-associated-control": "off",
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
    "react/function-component-definition": "off",
    "react/require-default-props": "off",
    "no-param-reassign": "off"
  }
}

• 重启VSCode ESLint服务
  按下快捷键Ctrl+Shift+P（macOS为Cmd+Shift+P）调出命令面板，执行ESLint: Restart ESLint Server，重启后再执行格式化就不会出现可选链被加空格的问题。

特殊场景兼容 #

如果项目必须保留@babel/eslint-parser（例如存在自定义Babel转译逻辑），按以下步骤配置即可：

• 安装Babel可选链语法插件

npm install -D @babel/plugin-proposal-optional-chaining

• 在项目Babel配置文件（babel.config.json/.babelrc）中添加插件声明：

{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

• 在ESLint配置的parserOptions中添加"ecmaVersion": 2020，明确指定支持的语法版本，重启ESLint服务即可生效。

内容的提问来源于stack exchange，提问作者Brad Herman