Autocomplete html tags in jsx (sublime text)

Question

I would like to be able to use autocomplete for html tags in my react/jsx code. The same way it works for html files. Can i configure sublime text 3 to enable tags autocomplete for jsx files?

Solution 1

Worth noting that you can enable Sublime's built-in tag closer in JSX by copying and slightly modifying the keybinding for / that comes with Default.sublime-package. Add the following to your custom keymap:

{ "keys": ["/"], "command": "close_tag", "args": { "insert_slash": true }, "context":
  [
    { "key": "selector", "operator": "equal", "operand": "(text.html, text.xml, meta.jsx.js) - string - comment", "match_all": true },
    { "key": "preceding_text", "operator": "regex_match", "operand": ".*<$", "match_all": true },
    { "key": "setting.auto_close_tags" }
  ]
}

Assuming you're using the Babel package, the selector meta.jsx.js will match JSX syntax and enable the tag-closing behavior. The scope name may be different for other packages, in which case you can use ScopeHunter to inspect the scopes that are applied by your preferred JSX syntax.

Solution 2

Install: babel & Emmet

Then add this into your Key Bindings - User

"Key Bindings - User" is on "Preferences > Key Bindings"

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

Solution 3

It will not autoclose the brackets for you as you type, but you can just use Sublime's built-in tag closer with commandoption. for mac, or alt. for windows.

Solution 4

I heavily suggest the combination of babel-sublime and emmet. If you specify "JavaScript (Babel)" as your syntax, both packages will work together, with emmet properly generating "className" and "htmlFor" if needed.

The only downside is that the expand will not work with TAB but with CTRL+E. This is due to TAB having a bunch of other usage in JavaScript.

Solution 5

Based on Daniel's answer, I made a plugin just for this.

Source: https://github.com/FMCorz/AutoCloseTags

To install:

1. Add the above repository with Package Control: Add repository
2. Execute the command Package Control: Install package
3. Select AutoCloseTags

View more solutions