Visual Studio Code无法自动完成JSX属性。

Question

我正在使用Visual Studio Code开发一个React项目，有很多像下面这样的.js文件：

import React, { PureComponent } from 'react'

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

}

export default Foobar

React自带方法的自动完成很好用（例如在组件中添加componentWill...），但是在输入JSX时我没有得到任何建议。 在main中输入onCli...不会提示onClick。

我找到了一些关于typescript定义的教程，所以我安装了：

"@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"
}

- Slevin

---

你是否认为，当覆盖React.Component的抽象方法时，基于自动完成“智能感知”，这应该是默认行为的假设？ - Mark C.

我认为VS Code至少会像在普通的.html文件中一样自动完成常规HTML属性，例如name，type等。 - Slevin

明白了 - 你有查看这个线程吗？ - Mark C.

是的，已经检查过了 :( - Slevin

哦哦哦...这也是我的问题：https://github.com/Microsoft/vscode/issues/41123 - Slevin

你解决了吗？ - L. Albano

Answer 1

或许，使用vscode v1.63会有所帮助。它增加了以下内容：

JSX属性自动完成

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

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

auto - 根据类型推断属性风格。字符串使用 attr=""，而其他类型使用attr={}。
braces - 始终使用大括号。
None - 仅完成属性名称。

详见发布说明：JSX属性自动完成

- Mark

---

javascript.preferences.jsxAttributeCompletionStyle:auto 然后我得到了单引号，我想要的是双引号。 - King.

Answer 2

如上文所述，在先前的答案中提到，2021年11月版（版本1.63）包含JSX属性自动完成功能，只需更新并重新启动VSCode，在菜单栏代码 > 重新启动以进行更新，然后打开您的设置代码 > 设置，即可将选项从引号attr=''（默认）更改为括号attr={}或无，这将简单地自动完成属性。或者在您的settings.json文件中添加以下内容：

"javascript.preferences.jsxAttributeCompletionStyle": "auto"

- Ian

---

我必须问一下，这是否对我的回答有实质性的添加？ - Mark

嘿@Mark，抱歉让你久等了。实际上不是这样，但我想将你的答案与谷歌搜索结果链接起来，特别是针对Grepper用户，但它只会搜索围栏代码块而不是内联代码。因此我加了自己的简介和冗余内容。 - Ian