Hello,

I saw that there is a launch.json configuration, but I could not figure out how to actually debug this plugin. I started the compile watch task, and tried to follow this Typescript guide on debugging language services (it seemed similar), but could not get it to stop at any breakpoints.

I was planning on taking a look at #19, but it's much harder to reason about without some running code for context 😅

I could add a section to the README.md if I get some hints to get it working (if it's possible to debug).

Could you write a guide?

Firstly, thanks for your work on this plugin, it's great to be able to have syntax highlighting and Intellisense for template strings :) I've noticed, though, that ts-styled-plugin gets rather upset (Do not use empty rulesets: ts-styled-plugin(9999)) if there's a style attribute that is populated by a Lit styleMap Directive, i.e.,

<div style=${styleMap(styles}}></div>

While I appreciate the primary issue is upstream in ts-styled-plugin, there is no way when using this plugin to configure it such that it ignores – say – empty style rules, which I would be able to set were I configuring the plugin directly. I think it comes down to https://github.com/microsoft/typescript-lit-html-plugin/blob/main/src/index.ts#L50, which I think is passing through an empty config to ts-styled-plugin.

I was wondering, would it be possible to either take extra config for ts-styled-plugin, or use any relevant global configs rather than setting it to {}?

Thanks!

In the following snippet:

html`
<style>
  div {
    display: flex;
    alig <-- cursor here
  }
</style>
`

I get alignItems if I press tab instead of align-items. Can this plugin recognize the <style> tag and auto-complete for CSS properties instead?

From @abdonrd on July 7, 2018 1:24

Copied from original issue: mjbvz/vscode-lit-html#41

VS Code 1.24 registered < as a sig help trigger for jsx. This cause us to show signature help whenever you type < inside a html string. This is generally good, except that we end up showing the sig help for the template function itself instead of for the html tags. We should either show the html sig help or nothing when inside html template strings

In the code snippet gif in the README, the syntax highlighting of HTML looks very nice. However, the ${title} seems to not be highlighted to note that title is a JS variable. Could the dynamic parts of the template literal be syntax highlighted as JS?

From @jolleekin on October 15, 2018 12:34

Steps to reproduce

1. Type <some-tag></

Actual

• The plugin suggests /some-tag

Expected

• The plugin suggest /some-tag>

Suggestions

Even better, the plugin could automatically insert the closing tag when user finishes typing the opening tag. For example, the plugin automatically inserts </some-tag> after user types <some-tag> or <some-tag attribute1="value1" attribute2="value2">.

Copied from original issue: mjbvz/vscode-lit-html#52

Add support for using emmet abbreviations inside lit-html templates

Should probably use https://www.npmjs.com/package/vscode-emmet-helper

Trying to get syntax highlighting in css template strings in VS Code using extension. I've tried adding the following to settings.json but it doesn't seem to have any effect. I feel like I must be doing something incorrect... but then again, maybe not?

settings.json:

"lit-html.tags": [
    "html",
    "css"
]

for example, when using css template strings:

import { css } from 'lit-element/lit-element.js';

export const colors = css`
    :host {
        display: block;
        color: blue;
    }
    :host([hidden]) {
        display: none;
    }
`;

It would be wicked cool to have intelliSense support for custom elements defined in the code:

import { LitElement, html,  property, customElement } from 'lit-element';

@customElement('my-element')
class MyElement extends LitElement {
    @property({ type: String }) public foo: string;

    render () {
        return html`<span>${this.foo}</span>`
    }
}

const markup = html`
    <!-- Here intelliSense picks up definition for my-element and suggests to use it with attribute foo >
`

It'd be great if there was a way to get quickinfo for our custom elements through a docstring or something.

To clarify, when I hover a regular html tag, it'll give me a tooltip with quick info on that element.

I'd like to have the same for my custom elements, potentially by adding a class docstring in the View-Model of the custom element?

I figure my use of custom-elements might be too specific to the Aurelia framework and this might not be nearly as practical as I might like to think haha. So no worries if it's not a reasonable request.

From @ncodefun on July 15, 2018 21:32

I'm reporting this here since it's this plugin that reports the error, but the context is that I work with lit-html and the vscode-lit-html extension ... So I have this:

This only happens with the style attribute, and only when the template string is multi-line. Tried with other styles before or after the expression and it doesn't work either (I thought maybe it looks for at least one colon/semi-colon pair).

Copied from original issue: microsoft/typescript-styled-plugin#64

I have a Visual Studio 2017 project with .ts files that contain html literals.

In my package.json I have:

  "devDependencies": {
    "typescript": "^2.9.2",
    "typescript-lit-html-plugin": "^0.3.1"
  }

In my tsconfig.json I have:

    "plugins": [
      {
        "name": "typescript-lit-html-plugin",
        "tags": [
          "html",
          "svg",
          "raw"
        ]
      }
    ]

When editing .ts files the literals are just strings.

Try running format on the following file:

const Nav = function() {
  return html`
    <h1>Sections</h1>
    <ul>
      ${repeat(items, i => i.id, (i, index) =>
        html`
          <li>
            ${index}: ${i.name}
          </li>
        `)}
    </ul>
  `;
}

In VSCode, see error about Overlapping ranges not allowed. This is caused by us trying to apply both sets of edits. The outer edits include a formatting for the inner placeholder which conflicts with the edits returned form the inner placeholder html section

Currently this plugin only works inside .js files. It would be useful if this could work inside .html files as well. I write lit-html inside single html file snippets for demos a lot.

For example:

<html>
  <head>
    <script type="module">
      import { html, render } from 'lit-html';
      
      const myTemplate = html`
        <div>Foo</div>
      `;// <-- not highlighted

      render(myTemplate, document.body);
    </script>
  </head>
  <body></body>
</html>

Completion entries should also return documentation and details

Plugin doesn't work at all, much like #11

package.json

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "@types/kendo-ui": "2019.1.0",
    "del": "3.0.0",
    "gulp": "4.0.0",
    "webpack": "4.29.0",
    "webpack-cli": "3.2.1",
    "typescript": "3.3.0-rc",
    "ts-loader": "5.3.3",
    "typescript-lit-html-plugin": "0.9.0"
  },
  "scripts": {
    "build:webpack": "webpack"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": true,
    "noEmitOnError": true,
    "removeComments": true,
    "sourceMap": true,
    "target": "es5",
    "lib": [ "es2015", "es5", "dom" ],
    "plugins": [
      {
        "name": "typescript-lit-html-plugin",
        "tags": [
          "html",
          "template"
        ]
      }
    ]
  },
  "compileOnSave": true
}

the following says "(TS) Cannot find the name 'html'"

var  test = html'
    
';

var test2 = html`

`;

Any help is greatly appreciated, let me know if you need any other information.

Could a plugin like this work without lit-html and/or with any JS file that has a template literal in it?

I use Electron with NodeJS

module.exports = {
  snippet: () => {
    return html`<div>
      </div>`;
  },
};

html is not defined

See https://github.com/Microsoft/typescript-lit-html-plugin/blob/177ec01a7064963ba31846444fc92a51c9a52b73/src/html-template-language-service.ts#L143 for more details. Temporarily just disabled formatting for these blocks altogether since there were some bad bugs around them

Is it possible to use the typescript-lit-html-plugin in neovim?
I tried the installation in both the project und the tsserver node_modules but it does not work.

Sometimes using a tag to trigger the benefits of this plugin on a template string isn't feasible, and it would be nice to be able to substitute a comment instead. For example, instead of doing this:

var template = html`
  <h1>Hello World!</h1>
`

...it would be nice to be able to do this:

var template = /*html*/`
  <h1>Hello World</h1>
`

@sjmiles noted this in mjbvz/vscode-lit-html#42

I tried to solve this by disabling validation, i.e.

"html.validate.styles": false,
"css.validate": false
which had no effect.

Ideally ts-lit-html-plugin honors those configuration options.

With the update to StyledTemplateLanguageService, I'm wondering what your thoughts are on updating the TsHtmlPluginConfiguration interface to be enable validate and lint configuration options similar to styled? Or if there's a better configuration integration approach I'm not quite seeing.

Requires microsoft/typescript-template-language-service-decorator#1 upstream

lit-extended sets properties instead of attributes by default, and adds the name$= syntax for opting-into attributes.

If would be great to understand the set of valid properties and their types from HTMLElementTagNameMap. Integration with custom elements would be relatively easy then:

import {html, render} from 'lit-html/lib/lit-extended';

class MyElement extends HTMLElement {
  someProp: number;
}
customElements.define('my-element', HTMLElement);
declare global {
  interface HTMLElementTagNameMap {
    'my-element': MyElement;
  }
}

// this should have a warning under "${'abc'}" for not being a number
html`
  <my-element someProp=${'abc'}></my-element>
`;

// this should have a warning under somProp for not being property of MyElement
html`
  <my-element somProp=${10}></my-element>
`;

// this should have a warning under<my-elemet> for not being a known element
html`
  <my-elemet></my-elemet>
`;

Basically, we want the same features as JSX type-checking. Additionally, it'd be great to have some way to tell tsc the valid attributes for an element.

hey there 👋

it would be awesome if the html highlighting would work for js blocks inside markdown as well.
Here is the use case that we are after - Screenshot from VS Code

would be awesome if that is highlighted 👍

any chance we can get some pointers on where to start looking to get this supported? e.g. we can contribute but we probably need a little help to get started 🤗

Hi,

Having the latest version of the plugin in VSCode, on mac OS. I'm a long time user, recently switched to a new notebook, but after reinstalling my stack, the plugin doesn't give any suggestions when typing basic HTML tags. Before I could write: .foo => <div class="foo"></div>, but now it doesn't seem to work.

Any ideas or settings I might need to enable to get it working?

Plugin version: v1.11.1
VSCode version: 1.69.1
Osx: 12.4

These are expected to be formatted the same way, but the formatting is broken when the attribute is not wrapped with ". The HTML specs allow bare attributes (without " wrapping), so the first example is valid, and should be formatted correctly.