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?
By default, Sublime Text will automatically show the completions popup when a user is editing source code or markup, but not within prose in comments, strings or markups. Pressing the Esc key will hide the completions popup. To manually show the completions popup, press Ctrl+Space.
JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.
This funny tag syntax is neither a string nor HTML. It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With