CODEWITHSUNDEEP
reactjsvisual-studio-codejsx
Slevin
Slevin

Reputation: 4222

Visual Studio Code doesn't autocomplete JSX attributes

I'm using Visual Studio Code for a React project and have a lot of .js files which looks like:

import React, { PureComponent } from 'react'

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

}

export default Foobar

Autocompletion of React's own methods works fine (like adding componentWill... to the component), but I don't get any suggestions while typing JSX. Typing something like onCli... into main doesn't suggest onClick.

I've found some tutorials about typescript definitions, so I've installed:

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

But this doesn't do anything. Even if I rename my files from .js to .jsx, .ts or .tsx I don't get autocompletion on JSX attributes.

Is there anything that I've missed?

I also created a jsconfig.json:

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

And added this to my VS Code config:

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

Upvotes: 7

Views: 5253

Answers (2)

Ian
Ian

Reputation: 27

As stated in the previous answer the November 2021 (version 1.63) release includes JSX attribute completions, simply update and restart VSCode, on menu bar Code > Restart to Update and open your settings Code > Settings to customize options from either quotes attr='' (default) to brackets attr={} or none, which simply completes the attribute. Or add this on your settings.json file:

"javascript.preferences.jsxAttributeCompletionStyle": "auto"

Upvotes: 1

Mark
Mark

Reputation: 180651

Perhaps, using vscode v1.63 will help. It added this:

JSX attribute completions

When completing JSX attributes in JavaScript and TypeScript, VS Code will now automatically insert the attribute value:

The behavior of these completions can be configured using javascript.preferences.jsxAttributeCompletionStyle and typescript.preferences.jsxAttributeCompletionStyle. Possible settings values are:

auto — Infer the attribute style based on its type. Strings use attr="" while other types use attr={}.
braces — Always use braces.
None — Just complete the attribute name.

See release notes: jsx attribute completions

Upvotes: 6

Related Questions