How to autocomplete JSX tags in Sublime Text 3

Zach Zach (236)
1 minute

This guide will show you how to autocomplete or autoclose React JSX and HTML tags in Sublime Text 2 and Sublime Text 3.

Sublime Text 3 ×1

Howchoo is reader-supported. When you buy through links on our site, we may earn a small affiliate commission at no cost to you.

Sublime Text Key Bindings Preferences

MacOS (or OS X)

In the menu bar, navigate to Sublime Text > Preferences > Key Bindings.


In the menu bar, navigate to Preferences > Key Bindings.

Sublime Text Key Bindings File

Append the following object to the end of the sublime-keymap array:

{ "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" }

Save and close the file. You're all done!

Zach Zach (236)
2 minutes

By default, CTRL-TAB and SHIFT-CTRL-TAB don't operate in the same way that Google Chrome tab cycling does. For example, when you press CTRL-TAB it doesn't always cycle to the next open document.