microsoft/vscode-emmet-legacy

Emmet features via extension for Visual Studio Code using the new API

Emmet plugin for Visual Studio Code

This repo is no longer maintained. The emmet extension has been moved to the VS Code repo, so that it gets shipped as a built in extension. See https://github.com/Microsoft/vscode/tree/master/extensions/emmet

This is experimental alpha version of new Emmet plugin with limited features.

• Expanded abbreviation show up in the suggestion list.
• Possible abbreviations show up in the sugestion list.
• TAB is no longer used for expanding emmet abbreviations. Instead the suggestion list is used.
• The below commands already available from the built in emmet in the product will be using this extension.
  • Emmet: Expand abbreviation
    • The selected text or the text preceeding the cursor if no text is selected is taken as the abbreviation to expand.
  • Emmet: Wrap with abbreviation
    • The selected text or the current line if no text is selected, is wrapped with given abbreviation.
  • Emmet: Remove Tag
    • The tag under the cursor is removed along with the corresponding opening/closing tag. Works with multiple cursors.
  • Emmet: Update Tag
    • The tag under the cursor is updated to the given tag. Works with multiple cursors.
  • Emmet: Go to Matching Pair
    • Cursor moves to the tag matching to the tag under cursor. Works with multiple cursors.

vscode-emmet-legacy's Issues

release to the store

Extension causes high cpu load

• Issue Type: Performance
• Extension Name: emmet
• Extension Version: 1.0.0
• OS Version: Windows_NT x64 10.0.16299
• VSCode version: 1.35.0-insider

⚠️ Make sure to attach this file from your home-directory:
⚠️C:\Users\WangRui\vscode.emmet-unresponsive.cpuprofile.txt

Find more details here: https://github.com/Microsoft/vscode/wiki/Explain:-extension-causes-high-cpu-load

Emmet will not expand element within html comment

Hey, this is within a .htm file, sometimes html comments are used to remove whitespace, so this is a little annoying.

No space at all doesn't work

<!-- -->div.class<!--

Space before doesn't work

<!-- --> div.class<!-- -->

Space after doesn't work

<!-- -->div.class <!-- -->

Space before and after works

<!-- --> div.class <!-- -->

Emmet will not expand react component

I don't know how to configure emmet to supports the feature that will expand react component, or there is no such functionality.
For example:
div+Tab => <div></div>, It works.
Route+Tab => nothing happend.

auto_id_class

Is this feature currently supported in vscode-emmet?

microsoft/vscode#33592

Emmet will not expand tag names in pug files

When using emmet with html, typing in "sec" will show the suggestion box that will expand it to a section start and closing tag.
When using pug, the emmet abbreviations are not present at all. Typing in "sec" and hitting tab will not expand it into "section"

Emmet in VS Code does not preview document indentation when used with the command palette

When using the command palette, the preview of the current Emmet abbreviation applied does not preview whitespace indentation with the correct indentation type (it defaults to tabs). Note that you need the "View: Toggle Render Whitespace" turned on to see the mismatched indentation preview.

Here's an example using the "Emmet: Wrap with Abbreviation" command on a selection:

Here is another example using the "Emmet: Wrap Individual Lines with Abbreviation" command on a select:

This is not critical as the actual application of the Emmet abbreviation uses spaces instead (at least in the above examples), but it was really confusing when I was trusting the preview as accurate.

(edited for clarity)

May I set tab shortcut back?

I tried to add the command myself, but it breaks when no expandable abbreviation is available.

{
"key": "tab",
"command": "emmet.expandAbbreviation",
"when": "editorTextFocus && !editorTabMovesFocus"
}

go to matching pair failed in tsx file

• vscode version: 1.41
• typescript version: 3.7.3

in the following typescript it will be failed to execute "go to matching pair":

import React from "react";
import { Text, View } from "react-native";

interface FooInterface {
  foo: string;
  onCancel: () => void;
}

const FooComponent: React.FC<FooInterface> = props => {
  return (
    <View> // go to matching pair failed!!!
      <View>
        <Text>abc</Text>
      </View>
    </View>
  );
};

another example:

import React from "react";
import { Text, View } from "react-native";

interface FooInterface {
  foo: string;
  onCancel: () => void;
  onSuccess: () => Promise<void>;
}

const FooComponent: React.FC = props => {
  return (
    <View> // go to matching pair failed!!!
      <View>
        <Text>abc</Text>
      </View>
    </View>
  );
};

However, these files are ok:

import React from "react";
import { Text, View } from "react-native";

interface FooInterface {
  foo: string;
  onCancel: () => void;
}

const FooComponent: React.FC = props => {
  return (
    <View> // can go to matching pair!!!
      <View>
        <Text>abc</Text>
      </View>
    </View>
  );
};

import React from "react";
import { Text, View } from "react-native";

const FooComponent: React.FC<{ foo: string }> = props => {
  return (
    <View>
      <View>
        <Text>abc</Text>
      </View>
    </View>
  );
};

it seems that vscode-emmet considers the generic type parameter like Foo<Bar> as a jsx tag.