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

Posted 2023-02-21

【中文标题】Visual Studio Code 不会自动完成 JSX 属性

【英文标题】：Visual Studio Code doesn't autocomplete JSX attributes

【发布时间】：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

【参考方案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