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

Question

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?

Answer 1

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