CODEWITHSUNDEEP
reactjssublimetext3jsx
Nyxynyx
Nyxynyx

Reputation: 63619

In Sublime Text 3, how do you enable Autocompletion of HTML in JSX

In Sublime Text 3, I have the Babel package for syntax highlighting of HTML code in JSX.

However the HTML code does not have auto-completion, such as those wrapped inside the render() block. How can we enable auto-completion for the HTML codes?

Upvotes: 5

Views: 2632

Answers (2)

Alex
Alex

Reputation: 1008

You need the Emmet plug-in to have autocompletition within JSX components.

Use your package controller to install Emmet. Among other Emmet capabilities, just after writing the name of a tag, by pressing Ctrl+E it will be transformed into a opening-closing tag pair. If you want to use the Tab button, you'll need to modify the basic Emmet configuration by adding into Package Settings -> Emmet -> Key Bindings (User) a JSON doc like:

[
    {
        keys: ["tab"],
        command: "expand_abbreviation_by_tab",
        context: [
            {
                operand: "source.js",
                operator: "equal",
                match_all: true,
                key: "selector",
            },
            { match_all: true, key: "selection_empty" },
            {
                operator: "equal",
                operand: false,
                match_all: true,
                key: "has_next_field",
            },
            {
                operand: false,
                operator: "equal",
                match_all: true,
                key: "auto_complete_visible",
            },
            { match_all: true, key: "is_abbreviation" },
        ],
    },
];

The Tab autocompletition is not allowed by default to avoid conflicts with inner Sublime Text features, but this script will make Emmet aware of this and will allow autocompletition within the scope of a JSX file

Upvotes: 8

Martin
Martin

Reputation: 7714

This is difficult to answer as it depends a lot of your Sublime Text plugins.

If you are using Babel as formatting for JS and a HTML package such as Emmet, you should be fine. In some situation the "tab" may not work, but Emmet CTRL+e will still expand any partial tag, even using properly "className" instead of class.

Upvotes: 0

Related Questions