Autocomplete html tags in jsx (sublime text)

Igor Okorokov picture Igor Okorokov · May 4, 2015 · Viewed 20.8k times · Source

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?

Answer

Daniel P. Shannon picture Daniel P. Shannon · Dec 12, 2016

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.