JSX or HTML autocompletion in Visual Studio Code

问题:

Is there any way to use components or HTML completion in Visual Studio Code? Because typing each letter manually is not good idea when we have classes like Bootstrap etc. For example completion as in Emmet: ul>li*2>a

var React = require('react');

var Header = React.createClass({
    render: function () {
        return (

            <nav className="navbar navbar-defaullt">
                <div className="container-fluid">
                    <a href="/" className="navbar-brand">
                        <img width="50" height="50" src="images/logo.png" alt="logo" />
                    </a>
                    <ul className="nav navbar-nav">
                        <li><a href="/">Home</a></li>
                        <li><a href="/#about">About</a></li>
                    </ul>
                </div>
            </nav>

                );
                }
                });
module.exports  = Header;

回答1:

Visual studio code detect .jsx extensions and add emmet support by default ( i'm using VS code 1.8.1)

But if you prefer to use .js extention for all your react files - you can associate JavaScript React mode with .js files in bottom right corner of VS Code window.

How to do this step by step (gif)

回答2:

2018: Straight-to-the-point answer for React

The most straight-forward way to get JSX/HTML autocomplete in your React projects is to add this to your user settings or workspace settings (<project-path>/.vscode/settings.json):

      "emmet.includeLanguages": {
        "javascript": "javascriptreact"
      },
      "emmet.triggerExpansionOnTab": true

You may have to restart VS Code for the change to take effect.

P.S. If you're not doing this mapping for a React.js project, then KehkashanFazal's answer should probably work for you.

回答3:

If someone is still struggling with this issue:

I have discovered that simply setting

"emmet.syntaxProfiles": {
     "javascript": "jsx" 
 },

does not enable HTML completion. But, using:

"emmet.includeLanguages": {
    "javascript": "html"
}

does.

According to emmet docs:

"emmet.includeLanguages": {}

Enable emmet abbreviations in languages that are not supported by default. Add a mapping here between the language and emmet supported language.
Eg: {"vue-html": "html", "javascript": "javascriptreact"}

回答4:

Just select the appropriate Language mode at the bottom-right on the screen: set it to JavaScript React.

回答5:

None of those solutions worked... but the Auto Close Tag extension does! https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

回答6:

you can use The Auto Close Extention In Visual Studio Code . ps. when you install the extension, the autocomplete won't work until you reload VS Code , just Reopen VS Code , or go to auto close tag extension and click Reload.

link of the auto close tag Extension

回答7:

2018

I'm using VSCode (ver 1.27.2)

Base on my experienced, even though I'm working with React . The detected language on my VSCode is still vanilla JavaScript. And emmet did not work.

• One of the ways to make it work again is change the VSCode detected language to JavaScript React. This is for single JS file only.

• To change it once entirely, you need to associate it.

Click Configure File Association for .js...

And select JSX , which in my case, I already did.

• For Workplace Setting, and last if none of them work for you. Go to Preference of just to ctrl + , (comma) to open it.

Type and search for emmet or Emmet. Then copy the Setting you want to override. In my case:

{
    "emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
}

Note: I didn't try to use jsx only javascriptreact.

I implemented the second and third step. And I can now do Emmet.

回答8:

It took me two steps to get auto-closing tags in JSX.

1. Follow Kehkashan Fazal's instructions above about setting "emmet.includeLanguages"
2. Download the Auto Close Tag extension from VSCode (formulahendry.auto-close-tag)

And now you have nice auto-closing JSX tags!

回答9:

2019 Update

---

Auto closing tags in .html, .js, and .jsx

Works out of the box. That is, after typing in the closing bracket to the opening tag, the closing tag will be inserted automatically.

Emmet with basic HTML in .jsx files

Works out of the box.

Emmet with basic HTML in .js files:

Add the following setting, required for Emmet abbreviation suggestions, and required for tab expansion to work consistently.

  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },

Emmet with custom tags (e.g. React Components) in both .js and .jsx files

Add the following setting:

  "emmet.triggerExpansionOnTab": true,

Note that with this setting, Emmet will expand all words as custom tags (not just React component names)

Also note that when using Emmet to expand React components as custom tags, you have to actually choose the component name from the suggestion list and complete that first (or type out the whole name manually and close the suggestion menu with the escape key). After the word expands, you then have to tab again to get Emmet to expand the custom tag.

There's an active feature request to potentially remove this extra step (automatically expand when selecting the suggestion so that it works the same way as expanding standard html tags would).

---

Troubleshooting

Ensure you have the latest version of VSCode.

Ensure you did not change the following default settings:

"html.autoClosingTags": true,
"javascript.autoClosingTags": true,
"typescript.autoClosingTags": true,

// read the GitHub issue listed above if you're curious why this is required).
"editor.wordBasedSuggestions": true,

// you obviously don't want javascript, javascriptreact included in here if you want Emmet to be available in those files
"emmet.excludeLanguages": [
    "markdown"
],

回答10:

I went throw all answers and this config worked for me. had to include language as well as add syntaxProfile. without the trigger expansion nothing worked but now I only press Tab button to get the result.

"emmet.includeLanguages": {
    "javascript": "javascriptreact"
},
"emmet.syntaxProfiles": {
    "javascript": "jsx"
},
"emmet.triggerExpansionOnTab": true