Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Autocomplete html tags in jsx (sublime text)

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?

like image 562
Igor Okorokov Avatar asked May 04 '15 10:05

Igor Okorokov


People also ask

How do I enable autocomplete in Sublime Text?

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.

Does JSX allows us to write HTML in React?

JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.

Does JSX use HTML?

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.


1 Answers

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.

like image 107
Daniel P. Shannon Avatar answered Sep 22 '22 21:09

Daniel P. Shannon