Created
November 16, 2015 19:33
-
-
Save wesbos/2bb4a6998635df97c748 to your computer and use it in GitHub Desktop.
How to properly get a TAB trigger working with Emmet inside of JSX
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"keys": ["tab"], | |
"command": "expand_abbreviation_by_tab", | |
// put comma-separated syntax selectors for which | |
// you want to expandEmmet abbreviations into "operand" key | |
// instead of SCOPE_SELECTOR. | |
// Examples: source.js, text.html - source | |
"context": [ | |
{ | |
"operand": "meta.group.braces.round.js, text.html", | |
"operator": "equal", | |
"match_all": true, | |
"key": "selector" | |
}, | |
// run only if there's no selected text | |
{ | |
"match_all": true, | |
"key": "selection_empty" | |
}, | |
// don't work if there are active tabstops | |
{ | |
"operator": "equal", | |
"operand": false, | |
"match_all": true, | |
"key": "has_next_field" | |
}, | |
// don't work if completion popup is visible and you | |
// want to insert completion with Tab. If you want to | |
// expand Emmet with Tab even if popup is visible -- | |
// remove this section | |
{ | |
"operand": false, | |
"operator": "equal", | |
"match_all": true, | |
"key": "auto_complete_visible" | |
}, | |
{ | |
"match_all": true, | |
"key": "is_abbreviation" | |
} | |
] | |
} |
Great
Thank you very much. Happy sublime again.
I needed to include typescript so i used "operand": "meta.block.tsx, source.tsx, source.jsx, source.js, meta.group.braces.round.js, text.html"
thanks! it works
Thank you!
Thank you!!!!
Thanks a million
it's not working for me. I use linux and i don't think this settings work for sublime on linux. I've tried everything - typing by hand, copying and pasting and even following the video tutorial but it still doesn't work.
Same here, something seems to be updated and i cannot get the tab function to work. It works for shift+f5 though. Also there seems to be an update in naming. My config:
{
"keys": ["tab", "shift+f5"],
"command": "emmet_expand_abbreviation",
"args": { "tab": true },
"context": [
{
"operand": "meta.block.tsx, meta.group.braces.round.js, text.html",
"operator": "equal",
"match_all": true,
"key": "selector"
},
// run only if there's no selected text
{
"match_all": true,
"key": "selection_empty"
},
// don't work if there are active tabstops
{
"operator": "equal",
"operand": false,
"match_all": true,
"key": "has_next_field"
},
// don't work if completion popup is visible and you
// want to insert completion with Tab. If you want to
// expand Emmet with Tab even if popup is visible --
// remove this section
{
"operand": false,
"operator": "equal",
"match_all": true,
"key": "auto_complete_visible"
},
{
"match_all": true,
"key": "is_abbreviation"
}
]
},
Thanks!!
Not working
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I am using vs code and tried it first but did not work. if someone is facing issue while they have added the binding the way Wes has told
just make sure you do this setting.
code=>preference=>settings=> user.settings
just add this code snippet in between your curly braces
"emmet.includeLanguages": { "javascript": "javascriptreact" }
save and make sure you follow what Wes has done in the video and you will be on your way.