Sublime Forum

Emmet 2.0 (alpha)

#1

I’m happy to announce new Emmet 2.0 plugin and looking for a user feedback: https://github.com/emmetio/sublime-text-plugin

I’ve described most noticeable changes in README, here are some more technical highlights:

  • Emmet now works as autocomplete provider and doesn’t hijacks Tab key handler
  • Provides dynamic abbreviation preview as you type
  • No default key bindings, all actions should be added manually (for now; final release will provide convenient UI for Emmet setup)
  • Entire code base is rewritten from scratch and is 100% Python code (no more heavy PyV8 downloads)
  • Huge performance improvements: unlike old monolithic implementation, Emmet 2.0 is a set of standalone modules for deeper integration with host editor features

Would like to receive feedback on new Emmet UX

Installation

UPD: added repository for easier installation

  1. In Sublime Text, open Command Palette, find and run Package Control: Add Repository command

  2. Enter the following URL into dialog and hit Enter: https://github.com/emmetio/sublime-text-plugin/releases/latest/download/registry.json

  3. From Command Palette, run Package Control: Install Package command.

  4. In opened packages list, find Emmet2 package and install it

If you’re unable to find Emmet2 package on last step or installed package doesn’t work as expected, restart Sublime Text and try again

Currently, plugin is available as build artifact: go to repo Actions, pick latest Create Sublime Text package entry and download Artifact (upper right corner), which is Emmet.sublime-package. Then copy this package into Sublime Text’s Installed Packages folder of your user directory.

24 Likes
Emmet not working always when I hit Tab
PHP Autocomplete tag
#2

Nice to see a native implementation of this! :+1:

As a note, if the alpha version is a sublime-package file it needs to be placed in the Installed Packages folder for Sublime to recognize and load it, not the Packages folder.

0 Likes
#3

Thanks! Updated initial post

0 Likes
#4

really cool stuff with expanding abbreviation previews. need to try it)
a huge thanks man!

0 Likes
#5

Shaping up really nicely. Thank you.

One bug. emmet_remove_tag action with code like:

<div>
    <div a="1"
         b="2">
    </div>
</div>

Removing outer div produces this:

<div a="1"
b="2">
</div>

Which is not ideal. The indented attributes should keep original indentation.

0 Likes
#6

Here is another one, but I’ve only tested that one in early version of ST4 so not sure if ST3 has same issue. In a css file, typing a property shows both Emmet’s “preview” and autocomplete popup. Pressing tab completes to “preview”'s value which is fine by me but then autocomplete popup should not be shown probably at all then.

43
Screenshot 2019-11-25 at 16.40.43.png684×762 72.4 KB

0 Likes
#7

Thanks! Could you please report at https://github.com/emmetio/sublime-text-plugin/issues?

0 Likes
#8

Yes, I’ve struggle with this preview/popup a bit. The problem is that in CSS autocomplete works differently, not like in HTML. The reason to keep autocomplete popup is to allow users to select native snippets with arrow and Enter. Unfortunately, ST doesn’t properly updates completions list when I modify abbreviation so I can’t put Emmet abbreviation as completion item in popup, thus display it as phantom

0 Likes
#9

Sorry for offtopic, but on what ST4 you are talking?
Is it announced already?

0 Likes
#10

We have a limited release happening via the Discord server where we are gathering feedback from active community members. It isn’t closed, but we are keeping it low-key while we work out some details. We are asking those interested to keep discussion to the Discord server. The intent here is to gather feedback, especially bug reports, without having a huge number of people jumping on board while we get things stabilized.

4 Likes
#11

That’s exciting news! Thanks for letting us know!!!

0 Likes
#12

I love it. Have done a few trial runs with it and it works beautifully

0 Likes
#13

Is there a way to remove default keybinding for expand abbreviation command (Tab key) and assign it to multiple key (good old ctrl/cmd+e)?
Maybe there is something that I’m missing but inside an HTML file, tabbing just expand whatever is on the left of the caret, either writing all the dom by hand or using expand abbreviation.
test case:

.foo>.bar*2
(tab to expand) -> expand and move caret inside first div.bar 
type whatever into first div.bar
(tab to move to next div.bar) -> will create a "whatever" tag
0 Likes
#14

If you see underline then it’s captured abbreviation and Tab will expand it. Hit Esc to reset capturing and use Tab as regular. You can disable abbreviation capturing via preferences (see https://github.com/emmetio/sublime-text-plugin/blob/master/Preferences.sublime-settings) and map emmet_expand_abbreviation action to any keyboard shortcut

1 Like
#15

Thanks.
Apart for the aggressivity of the capture (personal point of view) the new emmet works like a charm :slight_smile:

0 Likes
#16

The goal is to tune capturing so it will help you instead of annoying. You could suggest the expected workflow so I can provide better suggestions

0 Likes
#18

Thanks for this awesome plugin! However I still can’t get it to work with source.tsx files… and I miss it! Any idea or resources?

0 Likes
#19

You can check out Emmet.sublime-preferences, there are syntax_scopes (maps ST scopes to Emmet syntax name) and abbreviation_scopes (where abbreviations should be activated). Also, make sure you’re using < prefix as described in README

0 Likes
#20

Thanks for the quick response! That’s what I did, but no luck… Here’s my config for Emmet2

image
image.png1677×1077 150 KB

I saved that, then I opened a tsx file (source.tsx scope), typed <div.title then hit TAB, or CTRL+E, or even Expand Abbreviation from the command panel, but nothing…

0 Likes
#21

I’ve updated plugin to 0.2.4, it should support TSX (works for me). If it’s not, please fill an issue at https://github.com/emmetio/sublime-text-plugin

0 Likes