How to autocomplete JSX tags in Sublime Text 3

Zach Zach (249)
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.

Windows

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!

If you found this page useful, check out our guide on how to open files in the same Sublime Text window. You can also optimize your workflow with this guide on tab cycling in Sublime Text—changing documents is as easy as using a keyboard shortcut.

Zach Zach (249)
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.