VSCode 中的可选链接运算符支持

Posted 2023-03-13

【中文标题】VSCode 中的可选链接运算符支持

【英文标题】：Optional chaining operator support in VSCode

【发布时间】：2019-01-15 09:40:06

【问题描述】：

React Native 0.56 提供对 Optional Chaining Operator 的原生支持，即 ?.

但是最新的稳定版 VS Code 无法识别这种语法并抛出 TypeScript 验证错误：

[ts] Expression expected.

虽然没有引发编译时或 eslint 错误。

我该如何解决？

---

2019/12/11 更新：

TypeScript 从 3.7 开始正式支持可选链接！ ????

如果您仍然遇到此错误，可能是您的 VSCode 附带的 TypeScript 库是

您只需将最新版本的 typescript (>= 3.7) 安装到您的工作区即可修复它。 （由 npm 或 yarn 作为开发部门）

然后打开命令面板，输入tstv，将用于JS和TS特性的TypeScript版本从VS Code的版本切换到Workspace的版本（确保 >= 3.7）瞧！

这绝对是一个很棒的功能，感谢大家，祝黑客们愉快！

【问题讨论】：

This answer 和 this tutorial 帮助我解决了这个问题。我认为这里的关键是禁用 js/ts 验证，因为错误来自特定的“[ts]”。

在 SO 上提出问题然后不接受任何有效答案被认为是不好的形式。请选择最有用的答案并将其标记为解决方案。

【参考方案1】：

我刚刚解决了在 vscode json 设置中禁用 js/ts 验证的问题：

"javascript.validate.enable": false

你需要为 eslint 规则安装 eslint-plugin-babel。

  "plugins": [
    "babel"
  ],
  "rules": 
    "babel/new-cap": 1,
    "babel/camelcase": 1,
    "babel/no-invalid-this": 1,
    "babel/object-curly-spacing": 1,
    "babel/quotes": 1,
    "babel/semi": 1,
    "babel/no-unused-expressions": 1,
    "babel/valid-typeof": 1
  

【讨论】：

你有一个指向你的 github repo 的链接吗？很高兴看到一些实际工作的样板

把这个留给其他人。 github.com/malienist/default-config-files/blob/master/…

【参考方案2】：

你可以安装JavaScript and TypeScript Nightly，然后重新打开VSCode。

【讨论】：

谢谢！到目前为止，这是天赐的建议。关闭 TS 验证是一个蹩脚的选择，因为您将失去 VSCode 的所有好处。

【参考方案3】：

JavaScript 和 TypeScript 文件中的 VS Code 1.41 supports optional chaining。这种支持包括语法高亮和 IntelliSense。

如果您使用的是 VS Code 1.41+ 并且可选链接未按预期工作，请尝试：

检查已安装的扩展。他们中的一些人可能还不了解可选链接，这可能会导致错误或语法高亮

如果你是using a workspace typescript version，请确保它是 TypeScript 3.7+

【讨论】：

不需要使用 nightly build，也可以强制 VS Code 使用 node_modules 中的版本。见code.visualstudio.com/docs/typescript/…

在我的例子中，我有打字稿工作，但在?.prop 上悬停时没有任何信息，并且调试控制台在尝试输入带有可选链接的值时抛出错误。一些研究表明这是一个Node 14.5+ feature，所以我切换到使用该版本的节点，现在悬停工作，调试控制台现在允许我在表达式中使用?.。

【参考方案4】：

在我卸载扩展程序 JavaScript and TypeScript IntelliSense 之前，这仍然发生在我身上

是的，如果您仍然遇到此问题，请检查卸载旧插件。您也可以尝试vscode insiders 版本并检查它是否适用于该版本。它对我有用，没有做任何改变。

【讨论】：

我很高兴能帮上忙！谢谢你告诉我！

【参考方案5】：

我的情况，我需要将"tslint-config-prettier" 添加到tslint.json 文件中

这是我的tslint.json 文件

  "defaultSeverity": "error",
  "extends": [
    "tslint:recommended",
    "tslint-config-prettier"  # ----> This line
  ],
  "jsRules": ,
  "rules": 
    "semicolon": false,
    "quotemark": [true, "single"],
    "prefer-for-of": false,
    "object-literal-sort-keys": false,
    "ordered-imports": false,
    "interface-name": false,
    "callable-types": false,
    "no-console": false,
    "no-bitwise": false,
    "variable-name": [
      true,
      "allow-leading-underscore",
      "allow-snake-case"
    ]
  ,
  "rulesDirectory": []