Visual Studio Code 不会自动完成 JSX 属性答案

【问题标题】：Visual Studio Code doesn't autocomplete JSX attributesVisual Studio Code 不会自动完成 JSX 属性
【发布时间】：2018-07-18 03:10:22
【问题描述】：

我正在为一个 React 项目使用 Visual Studio Code，并且有很多 .js 文件，如下所示：

import React, { PureComponent } from 'react'

class Foobar extends PureComponent {
  render() {
    return (
      <main>
        Foo
      </main>
    )
  }

}

export default Foobar

React 自己的方法的自动补全效果很好（比如将componentWill... 添加到组件中），但是在输入 JSX 时我没有得到任何建议。在main 中键入onCli... 之类的内容并不建议onClick。

我找到了一些关于打字稿定义的教程，所以我已经安装了：

"@types/react": "^16.0.36",
"@types/react-dom": "^16.0.3",

但这并没有做任何事情。即使我将文件从 .js 重命名为 .jsx、.ts 或 .tsx，我也不会在 JSX 属性上自动完成。

我有什么遗漏的吗？

我还创建了jsconfig.json：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true
  },
  "exclude": [
    "node_modules"
  ]
}

并将其添加到我的 VS Code 配置中：

"emmet.includeLanguages": {
    "javascript": "javascriptreact"
},
"emmet.syntaxProfiles": {
    "javascript": "jsx"
},
"files.associations": {
    "*.js": "javascriptreact"
}

【问题讨论】：

您是否假设在覆盖React.Component 的抽象方法时，这应该是基于自动完成“智能感知”的默认行为？
我认为 VS Code 至少会自动完成普通的 HTML 属性，例如 name、type 等等——就像普通的 .html 文件一样。
明白——你检查this thread了吗？
是的，已经检查过了 :(
噢……这也是我的问题：github.com/Microsoft/vscode/issues/41123

标签： reactjs visual-studio-code jsx

【解决方案1】：

如previous answer 中所述，November 2021 (version 1.63) 版本包括JSX attribute completions，只需更新并重新启动 VSCode，在菜单栏代码 > 重新启动以更新 并打开您的设置代码 > Settings 自定义选项，从引号 attr=''（默认）到括号 attr={} 或无，这只是完成属性。或者将其添加到您的 settings.json 文件中：

"javascript.preferences.jsxAttributeCompletionStyle": "auto"

【讨论】：

我不得不问这是否对我的回答增加了任何实质性内容？

【解决方案2】：

也许，使用 vscode v1.63 会有所帮助。它添加了这个：

JSX 属性补全

在 JavaScript 和 TypeScript 中完成 JSX 属性时，VS Code 现在将自动插入属性值：

这些完成的行为可以使用 javascript.preferences.jsxAttributeCompletionStyle 和 typescript.preferences.jsxAttributeCompletionStyle。可能的设置值为：

auto — 根据类型推断属性样式。字符串使用 attr="" 而其他类型使用 attr={}。
braces — 始终使用大括号。
None — 只需填写属性名称即可。

见release notes: jsx attribute completions

【讨论】：