Programs » Sublime Text

Emmet Shortcuts

1. Ctrl+Shift+; – Remove Tag and leave its content.

Gracefully removes HTML/XML tag under current caret position.

{"keys": ["shift+ctrl+;"], "args": {"action": "remove_tag"}, "command": "run_emmet_action", "context": [{"key": "emmet_action_enabled.remove_tag"}]},

2. Ctrl/Shift/Alt+Shift + Up/Down – Increment/decrement numbers

Hold Ctrl to change number by 1
Hold Alt to change number by 0.1
Hold Alt+Shift to change number by 10
And press Up/Down
{"keys": ["ctrl+up"], "args": {"action": "increment_number_by_1"}, "command": "run_emmet_action", "context": [{"key": "emmet_action_enabled.increment_number_by_1"}]},
3. Ctrl+Shift+/ – Toggle Comment.

Toggles comment. Unlike basic editor’s implementations, matches HTML tag, CSS property or rule when there’s no selection.

{"keys": ["ctrl+shift+forward_slash"], "args": {"action": "toggle_comment"}, "command": "run_emmet_action", "context": [{"operand": "source.css, source.less, source.scss, text.xml, text.html - source", "operator": "equal", "match_all": true, "key": "selector"}, {"match_all": true, "key": "emmet_action_enabled.toggle_comment"}]},
4. Ctrl+Shift+. – Select Item

Quickly select important HTML and CSS code parts.

{"keys": ["shift+ctrl+."], "args": {"action": "select_next_item"}, "command": "run_emmet_action", "context": [{"key": "emmet_action_enabled.select_next_item"}]},
5. Ctrl+Shift+Y – Evaluate Math Expression

Evaluates simple math expression (5*6 -> Tab -> 30)

{"keys": ["shift+ctrl+y"], "args": {"action": "evaluate_math_expression"}, "command": "run_emmet_action", "context": [{"key": "emmet_action_enabled.evaluate_math_expression"}]},

6. Ctrl+, – Expand selection to outside tag and continue expanding

{"keys": ["ctrl+,"], "args": {"action": "balance_outward"}, "command": "run_emmet_action", "context": [{"key": "emmet_action_enabled.balance_outward"}]},
7. Ctrl+Alt+Left/Right – Prev/Next End Point.

Quickly traverse between important HTML code points.

{"keys": ["ctrl+alt+left"], "args": {"action": "prev_edit_point"}, "command": "run_emmet_action", "context": [{"key": "emmet_action_enabled.prev_edit_point"}]},
{"keys": ["ctrl+alt+right"], "args": {"action": "next_edit_point"}, "command": "run_emmet_action", "context": [{"key": "emmet_action_enabled.next_edit_point"}]},
8. Cltr+Shift+,/. – Select Prev/Next Item

Quickly select important HTML and CSS code parts.

{"keys": ["shift+ctrl+,"], "args": {"action": "select_previous_item"}, "command": "run_emmet_action", "context": [{"key": "emmet_action_enabled.select_previous_item"}]},

9. Ctrl+Shift+G – Wrap with a tag and enter its name.

{"keys": ["shift+ctrl+g"], "command": "wrap_as_you_type", "context": [{"operand": false, "operator": "equal", "match_all": true, "key": "setting.is_widget"}, {"match_all": true, "key": "emmet_action_enabled.wrap_as_you_type"}]},

10. Ctrl+Shift+’ – Rename tag

{"keys": ["shift+ctrl+'"], "command": "rename_tag", "context": [{"key": "emmet_action_enabled.rename_tag"}]},

11. Ctrl+Alt+J – Go to matching tag

{"keys": ["ctrl+alt+j"], "args": {"action": "matching_pair"}, "command": "run_emmet_action", "context": [{"key": "emmet_action_enabled.matching_pair"}]},

12. #/. – Create a div with id/class

{"keys": ["#"], "args": {"attribute": "id"}, "command": "emmet_insert_attribute", "context": [{"operand": "text.html meta.tag -string -punctuation.definition.tag.begin.html -meta.scope.between-tag-pair.html -source -meta.tag.template.value.twig", "operator": "equal", "match_all": true, "key": "selector"}, {"operator": "equal", "operand": true, "key": "setting.auto_id_class"}]},
{"keys": ["."], "args": {"attribute": "class"}, "command": "emmet_insert_attribute", "context": [{"operand": "text.html meta.tag -string -punctuation.definition.tag.begin.html -meta.scope.between-tag-pair.html -source -meta.tag.template.value.twig", "operator": "equal", "match_all": true, "key": "selector"}, {"operator": "equal", "operand": true, "key": "setting.auto_id_class"}]}

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>