Visual Studio代码不自动完成JSX属性 [英] Visual Studio Code doesn't autocomplete JSX attributes

问题描述

我正在为Reaction项目使用Visual Studio代码，并且有许多.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代码配置：

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

推荐答案

也许使用vscodev1.63会有所帮助。它添加了以下内容：

JSX属性完成

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

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

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

参见release notes: jsx attribute completions

这篇关于Visual Studio代码不自动完成JSX属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！