How to autocomplete JSX tags in Sublime Text 3

Zach Zach (248)
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. As an Amazon Associate, we may earn a small affiliate commission at no cost to you when you buy through our links.

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.

John John (304)
2 minutes

With the release of Sublime Text 2, new files that are not in the same project are not opened in a new window. Fortunately, you can change this default behavior for Sublime Text 2 and Sublime Text 3.