CODEWITHSUNDEEP
autocompletesublimetext3sublimetextreactjs
Igor Okorokov
Igor Okorokov

Reputation: 943

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?

Upvotes: 59

Views: 25684

Answers (7)

SherylHohman
SherylHohman

Reputation: 17900

As others suggested: install Babel and Emmet !

Emmet Abbreviation's list ( see the demo here ) ( and cheat sheet here )
You don't even need to type in the angled brackets -> Emmet -> Settings will do that, the closing tag, and more!

update: Emmet (v2+) now works with the tab key for JSX and HTML elements when you start them with < .
For example <div then tab will auto complete to <div></div> While <MyComponent then tab will expand to <MyComponent></MyComponent>

This new feature, is enabled by default. To turn it off, open the Emmet settings and change the jsx_prefix setting to false: "jsx_prefix": false To do that open Preferences -> Package Settings -> Emmet.

Previous version of Emmet:

Use CtrlE to expand the abbreviation.

Emmet docs: great at explaining the abbreviations.. But Failed to state how to "Expand Abbreviation" - at least, I was unable to locate it.

From Sublime, I

  • opened up: Preferences -> Package Settings -> Emmet -> Key Bindings - Default
  • searched for expand_abbreviation
  • found ctrl+e

Happiness - Works like a Charm :-)

update: I no longer recommend AutoCloseTags.
At least in my installation of Sublime Text 4, it no longer seems to work.

Use Babel plus Emmet instead.

I also recommend installing AutoCloseTags, as provided by FMcorz and Daniel Shannon.

This combination gives

  • auto-closing of (interpreted tag due to nesting rules), by simply typing </, great on the fly, whereas, Emmet will
  • expand an "abbreviation" to full opening and closing tags (and more) by pressing Crtl-E. This is great for creating a skeleton.

Upvotes: 4

Ryan Jeremiah Freeman
Ryan Jeremiah Freeman

Reputation: 495

Install: babel & Emmet

Then add this into your Key Bindings - User

"Key Bindings - User" is on "Preferences > Key Bindings"

{
    "keys": ["tab"], "command": "expand_abbreviation_by_tab", "context": [
        {
            "operand": "source.js", 
            "operator": "equal", 
            "match_all": true, 
            "key": "selector"
        },
        {   
            "key": "selection_empty", 
            "operator": "equal", 
            "operand": true,
            "match_all": true 
        }
    ]
},
{ "keys": ["tab"], "command": "next_field", "context":
    [
        { "key": "has_next_field", "operator": "equal", "operand": true }
    ]
}

Upvotes: 35

myoung
myoung

Reputation: 373

It will not autoclose the brackets for you as you type, but you can just use Sublime's built-in tag closer with commandoption. for mac, or alt. for windows.

Upvotes: 26

FMCorz
FMCorz

Reputation: 2706

Based on Daniel's answer, I made a plugin just for this.

Source: https://github.com/FMCorz/AutoCloseTags

To install:

  1. Add the above repository with Package Control: Add repository
  2. Execute the command Package Control: Install package
  3. Select AutoCloseTags

Upvotes: 7

Syahmi Nawi
Syahmi Nawi

Reputation: 21

If you have babel installed for sublime, try open your .js and .jsx files and go to view > syntax > open all with current .. > babel > javascript (babel) to view correct syntax highlighting and use CTRL + E to auto-complete html tag inside ur .jsx

Upvotes: 2

Daniel P. Shannon
Daniel P. Shannon

Reputation: 1046

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.

Upvotes: 89

Martin
Martin

Reputation: 7714

I heavily suggest the combination of babel-sublime and emmet. If you specify "JavaScript (Babel)" as your syntax, both packages will work together, with emmet properly generating "className" and "htmlFor" if needed.

The only downside is that the expand will not work with TAB but with CTRL+E. This is due to TAB having a bunch of other usage in JavaScript.

Upvotes: 8

Related Questions