ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

Emmet

by sergeche ST2/ST3 Top 25

Emmet for Sublime Text

Details

  • 2017.03.23.21.16.14
  • emmet.​io
  • github.​com
  • 2 days ago
  • 1 hour ago
  • 5 years ago

Installs

  • Total 2.50M
  • Win 1.61M
  • OS X 540K
  • Linux 349K
Mar 26 Mar 25 Mar 24 Mar 23 Mar 22 Mar 21 Mar 20 Mar 19 Mar 18 Mar 17 Mar 16 Mar 15 Mar 14 Mar 13 Mar 12 Mar 11 Mar 10 Mar 9 Mar 8 Mar 7 Mar 6 Mar 5 Mar 4 Mar 3 Mar 2 Mar 1 Feb 28 Feb 27 Feb 26 Feb 25 Feb 24 Feb 23 Feb 22 Feb 21 Feb 20 Feb 19 Feb 18 Feb 17 Feb 16 Feb 15 Feb 14 Feb 13 Feb 12 Feb 11 Feb 10 Feb 9
Windows 217 2420 3131 3097 3088 3234 3284 2066 2327 2868 3125 3258 3330 3616 2256 2472 2999 3371 3194 3476 3428 2155 2356 3068 3301 3575 3082 3284 2055 2360 2841 3331 3116 3404 3429 2128 2372 2752 3033 3150 3036 3139 1897 2116 2600 2784
OS X 42 500 769 636 629 613 657 443 477 571 674 638 663 708 402 491 580 626 704 693 729 416 459 612 742 742 654 619 396 434 591 627 654 666 612 400 450 603 649 648 640 728 418 461 568 596
Linux 48 375 451 433 462 473 480 336 363 444 452 458 510 486 386 387 491 457 474 468 462 353 340 455 490 486 445 463 373 405 500 480 423 484 516 410 382 475 495 481 440 444 370 351 428 406

Readme

Source
raw.​githubusercontent.​com

Emmet for Sublime Text

Official Emmet plugin for Sublime Text.

How to install

Warning: this plugin may not work at all in some OSes since it written in JavaScript and uses PyV8 and Google V8 binaries to run. If you experience problems or editor crashes please fill an issue.

With Package Control:

  1. Run “Package Control: Install Package” command, find and install Emmet plugin.
  2. Restart ST editor (if required)

Manually:

  1. Clone or download git repo into your packages folder (in ST, find Browse Packages… menu item to open this folder)
  2. Restart ST editor (if required)

WARNING: When plugin is installed, it will automatically download required PyV8 binary so you have to wait a bit (see Loading PyV8 binary message on status bar). If you experience issues with automatic PyV8 loader, try to install it manually.

Available actions

Increment/Decrement Number actions:

  • Increment by 1: Ctrl+↑
  • Decrement by 1: Ctrl+↓
  • Increment by 0.1: Alt+↑
  • Decrement by 0.1: Alt+↓
  • Increment by 10: ⌥⌘↑ / Shift+Alt+↑
  • Decrement by 10: ⌥⌘↓ / Shift+Alt+↓

Extensions support

You can easily extend Emmet with new actions and filters or customize existing ones. In Emmet.sublime-settings, define extensions_path setting and Emmet will load all .js and .json files in specified folder at startup.

The default value of extensions_path is ~/emmet, which points to emmet folder inside your OS user’s home folder.

Also, you can create sections named as extension files (e.g. snippets, preferences and syntaxProfiles) inside user’s Emmet.sublime-settings file and write your customizations there. See original settings file for examples.

Overriding keyboard shortcuts

Sublime Text is a great text editor with lots of features and actions. Most of these actions are bound to keyboard shortcuts so it’s nearly impossible to provide convenient plugin shortcuts for third-party plugins.

If you’re unhappy with default keymap, you can disable individual keyboard shortcuts with disabled_keymap_actions preference of Emmet.sublime-settings file.

Use a comma-separated list of action names which default keyboard shortcuts should be disabled. For example, if you want to release Ctrl+E (“Expand Abbreviation”) and Ctrl+U (“Update Image Size”) shortcuts, your must set the following value:

"disabled_keymap_actions": "expand_abbreviation, update_image_size"

You should refer Default (Your-OS-Name).sublime-keymap file to get action ids (look for args/action key).

To disable all default shortcuts, set value to all:

"disabled_keymap_actions": "all"

Not that if you disabled any action like so and you’re create your own keyboard shortcut, you should not use emmet_action_enabled.ACTION_NAME context since this is the key that disables action.

How to expand abbreviations with Tab in other syntaxes

Emmet expands abbreviations in limited syntaxes only: HTML, CSS, LESS, SCSS, Stylus and PostCSS. The reason to restrict Tab handler to a limited syntax list is because it breaks native Sublime Text snippets.

If you want to abbreviation with Tab in other syntaxes (for example, JSX, HAML etc.) you have to tweak your keyboard shorcuts settings: add expand_abbreviation_by_tab command for tab key for required syntax scope selectors. To get current syntax scope selector, press ⇧⌃P (OSX) or Ctrl+Alt+Shift+P, it will be displayed in editor status bar.

Go to Preferences > Key Bindings — User and insert the following JSON snippet with properly configured scope selector instead of SCOPE_SELECTOR token:

{
  "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": "SCOPE_SELECTOR", 
      "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"
    }
  ]
}

Tab key handler

Emmet plugin allows you to expand abbreviations with Tab key, just like regular snippets. On the other hand, due to dynamic nature and extensive syntax, sometimes you may get unexpected results. This section describes how Tab handler works and how you can fine-tune it.

By default, Tab handler works in a limited syntax scopes: HTML, XML, HAML, CSS, SASS/SCSS, LESS, PostCSS and strings in programming languages (like JavaScript, Python, Ruby etc.). It means:

  • You have to switch your document to one of the syntaxes listed above to expand abbreviations by Tab key.
  • With Ctrl-E shortcut, you can expand abbreviations everywhere, its scope is not limited.
  • When you expand abbreviation inside strings of programming languages, the output is generated with special output profile named line that generates output as a single line.

To fine-tune Tab key handler, you can use the following settings in user’s Emmet.sublime-settings file:

  • disable_tab_abbreviations_for_scopes — a comma-separated list of syntax scopes where Tab key handler should be disabled. For example, if you want disable handler inside strings of programming languages and HAML syntax, your setting will look like this:
"disable_tab_abbreviations_for_scopes": "text.haml, string"
  • disabled_single_snippet_for_scopes — a comma-separated list of syntax scopes where Tab handler should be disabled when expanding a single abbreviation. Currently, ST doesn’t provide API for getting list of native snippets. So, for example, if you try to expand a php abbreviation, it will be passed to Emmet which outputs <php></php> instead of PHP block as defined in native ST snippets. As a workaround, if you’re trying to expand a single abbreviation inside scope defined in disabled_single_snippet_for_scopes setting Emmet will look for its name inside its own snippets catalog first, inside known_html_tags setting second and if it’s not found, it allows ST to handle it and expand native abbreviation, if matched.
  • known_html_tags — a space-separated list of all known HTML tags used for lookup as described above.

If you’re unhappy with Emmet tab handler behavior, you can disable it: just add "disable_tab_abbreviations": true into user’s Preferences.sublime-settings file.

Disable automatic vendor prefixes insertion

If your workflow already includes an automated task for CSS vendor prefixing (such as Autoprefixer), you can disable Emmet's automatic vendor prefixes insertion adding this option to your user’s Emmet.sublime-settings file: “json { "preferences”: { “css.autoInsertVendorPrefixes”: false } }