如何抑制Visual Studio Code中的[ts]‘Expression Expected’误报并阻止formatOnSave自动转换可选链语法？

Let's break down fixes for both of your problems clearly:

1. Fixing False "[ts] 'Expression Expected'" Errors #

False positives like this usually stem from mismatched TypeScript versions, misconfigured settings, or plugin conflicts. Try these steps in order:

• Align TypeScript versions between VS Code and your project
  VS Code often uses its built-in TypeScript version by default, which might not match the one your project relies on. To fix this:

  1. Open the command palette (Ctrl+Shift+P on Windows/Linux, Cmd+Shift+P on Mac)
  2. Search for TypeScript: Select TypeScript Version
  3. Choose the version listed under "Workspace" (from your project's node_modules/typescript)

• Tweak your tsconfig.json settings
  Ensure your config supports modern syntax and skips unnecessary checks:

  • Add "target": "ES2020" or higher to enable proper support for optional chain operators
  • Set "skipLibCheck": true to ignore type errors in third-party libraries that might trigger false positives
  • If the error is isolated to a specific file, add it to the exclude array in tsconfig.json temporarily while debugging

• Suppress targeted errors (last resort)
  For individual lines causing false alarms, add a comment above the line:

  // @ts-ignore
  const value = n?.property;
  

  Or disable checking for an entire file with // @ts-nocheck at the top (use sparingly!).

• Check for plugin conflicts
  Disable any non-essential TypeScript/ESLint plugins temporarily to see if the error goes away. Sometimes conflicting linting rules can trigger false TS validation errors.

2. Preventing n?. from Being Formatted to n ?. with formatOnSave #

This issue is almost always tied to your chosen formatter's rules. Here's how to fix it based on common tools:

If you're using Prettier (most common) #

• Update Prettier to the latest version
  Older Prettier versions had bugs with optional chain spacing. Run npm install prettier@latest --save-dev to upgrade.
• Add explicit Prettier config
  Create a .prettierrc file in your project root with this setting to enforce correct optional chain formatting:

  {
    "optionalChaining": true
  }
  

  Alternatively, add this to your VS Code settings.json:

  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "prettier.optionalChaining": true
  }
  

If you're using VS Code's built-in TypeScript formatter #

• Adjust the formatter's spacing rules in settings.json:

  "[typescript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features",
    "typescript.format.insertSpaceBeforeAndAfterOptionalChain": false
  }
  

If ESLint is interfering #

If you're using ESLint alongside formatting, check for rules that enforce spacing around operators. Add an override to your .eslintrc.json to exempt the optional chain operator:

{
  "rules": {
    "@typescript-eslint/space-infix-ops": [
      "error",
      {
        "overrides": [
          {
            "operator": "?.",
            "before": false,
            "after": false
          }
        ]
      }
    ]
  }
}

内容的提问来源于stack exchange，提问作者js-newb