Giter Club home page Giter Club logo

vscode-emmet-helper's Introduction

vscode-emmet-helper

A helper module to use emmet modules with Visual Studio Code

Visual Studio Code extensions that provide language service and want to provide emmet abbreviation expansions in auto-complete can include this module and use the doComplete method. Just pass the one of the emmet supported syntaxes that you would like the completion provider to use along with other parameters that you would generally pass to a completion provider.

If emmet.includeLanguages has a mapping for your language, then the builit-in emmet extension will provide html emmet abbreviations. Ask the user to remove the mapping, if your extension decides to provide emmet completions using this module

vscode-emmet-helper's People

Contributors

aeschli avatar aliasliao avatar anubhar avatar dependabot[bot] avatar devanshj avatar gushuro avatar iifawzi avatar jeanp413 avatar jens1o avatar joaomoreno avatar johnsoncodehk avatar lancewl avatar le717 avatar lszomoru avatar nurbek0298 avatar obitorasu avatar octref avatar ramya-rao-a avatar rzhao271 avatar shskwmt avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vscode-emmet-helper's Issues

XSL self-closing tags not expanding properly

As an example, for XSL files, cp should expand to <xsl:copy select="|" />, but right now it expands to <xsl:copy select="|">|</xsl:copy>.
This issue occurs for two reasons:

  • In the snippets within expand-full.js, we have the mapping "cp": "xsl:copy[select]", without the / at the end. Therefore, the expander interprets the tag as one with content in between.
  • Even if / is added to the end, the XSL content is interpreted as HTML and expands to <xsl:copy select="|">, which is not a valid self-closing tag within XSL.

esm output missing since version 2.8.5

The package.json declares "module": "./lib/esm/emmetHelper.js", but the esm folder is missing from the package since version 2.8.5

Either remove the module field if this is deliberate or adjust the build pipeline so that the esm version is built and published.

Notification handler 'workspace/didChangeConfiguration' failed with message: emmetExtensionsPath.trim is not a function

I have installed a few extensions all of them give me this error message:
[Error - 13:17:48] Notification handler 'workspace/didChangeConfiguration' failed with message: emmetExtensionsPath.trim is not a function

I have tried to uninstall VS code and re-install it without any success, so my question is what is the problem and how do I get the extensions to work. One of them is the "Adonis JS, v1.0.2" extension.

Extend the support for commonly used tags in emmet suggestions

Commonly used tags were whitelisted, so that not every word triggers emmet suggestions which can be noise.

Emmet itself doesn't manage a white list and so we need to do so.

Current support: ['div', 'span', 'p', 'b', 'i', 'body', 'html', 'ul', 'ol', 'li', 'head', 'script', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'section']

Should include:

  • header
  • footer

Use Webpack

Use web pack to get a single file distribution of vscode-emmet-helper.

This will then free us from the need to use the umd version of the expand-abbreviation module.

Take custom tag definitions for enhancing the html emmet completion

Related: vuejs/vetur#656

Ideally, the helper library could take a list of tag definitions (similar to HTMLTagSpecification in https://github.com/Microsoft/vscode-html-languageservice/blob/master/src/parser/htmlTags.ts) and allow tag completion with those custom tags.

For example, if a definition for tag <my-component> is available and passed to the helper, the helper should provide completion for it for cases like

<my-comp|

I don't know if it's viable to pass through the list to doComplete each time, because the list could be huge. Some Vue UI library provides hundreds of custom tags (Quasar, Element).
A better approach might be having a stateful CompletionProvider class that exposes a method for adding tag definitions.

Bug: Parentheses inside text node are considered invalid hence expansion doesn't work

div{ foo (bar) baz } should expand to <div>foo (bar) baz</div>. But currently this does not work because it's considered an invalid expression due to the following code

// Its common for users to type (sometextinsidebrackets), this should not be treated as an abbreviation
// Grouping in abbreviation is valid only if preceeded/succeeded with one of the symbols for nesting, sibling, repeater or climb up
if (!/\(.*\)[>\+\*\^]/.test(abbreviation) && !/[>\+\*\^]\(.*\)/.test(abbreviation) && /\(/.test(abbreviation) && /\)/.test(abbreviation)) {
return false;
}

Restricting ( and ) to be only next to >, +, * or ^ misses the case where ( or) are inside { and } that is in a text node.

Actual behavior:

Expected behavior (as seen on emmet's docs):

I'll be sending a PR soon!

Remove limit on expansions

I am unable to use VSCode for Emmet expansions since I need larger expansions which are able to be done in SublimeText. For example, tag#id$$$*400>some-thing{PLACEHOLDER_1}+some-thing-else{PLACEHOLDER_2}.

This is extremely useful for when parsing large datasets using a regex and inputting data in auto-numbered columns for XML data tables.

It would be nice to not have to keep SublimeText installed for this one small use case.

Add issue templates and PR templates

Description

Currently this repository does not have templates for different issues and PRs. I guess adding a few templates might be a good idea and would improve the overall contributor experience.

Solution

We can simply add a .github folder and put our templates there, that should make future additions of new templates easier. We can refer to the templates being used in the vscode repository.

Problem with expanding long expressions

I am having problems with expanding the expression below:

`md-content[layout="column"].md-padding>md-subheader.md-no-sticky>div[layout=row layout-align=left]>md-button.md-raised.md-primary[ng-click="$ctrl.add()"]`

expanding only processes the chunk:

div[layout=row layout-align=left]>md-button.md-raised.md-primary[ng-click="$ctrl.add()"]

Debt: Enable strict true

By enabling strict true, we wouldn't have to deal with the fact that any function can return undefined without it showing up in the type signature.

However, many errors show up upon enabling this check, and it's not as high-pri as other issues, so I'm labelling this as a debt issue.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.