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 时我没有得到任何建议。输入类似onCli...into 的内容main并不建议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"
}

Answer 1

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

\n

\n

JSX 属性完成

\n

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

\n

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

\n

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

\n

\n

请参阅发行说明：jsx 属性完成

\n