How to use vscode-html-languageservice - 10 common examples

import * as path from 'path';
import * as vscode from 'vscode';
import * as html from 'vscode-html-languageservice';
import * as lst from 'vscode-languageserver-types';
import * as nls from 'vscode-nls';
import { BladeFormattingEditProvider } from './providers/BladeFormattingEditProvider';
import { LanguageClient, LanguageClientOptions, ServerOptions, TransportKind, RequestType, TextDocumentPositionParams } from 'vscode-languageclient';

const service = html.getLanguageService()
const localize = nls.loadMessageBundle();

class DocumentHighlight implements vscode.DocumentHighlightProvider
{
    provideDocumentHighlights(document: vscode.TextDocument, position: vscode.Position, token: vscode.CancellationToken): vscode.DocumentHighlight[] | Thenable {
        let doc = lst.TextDocument.create(document.uri.fsPath, 'html', 1, document.getText());
        return (service.findDocumentHighlights(doc, position, service.parseHTMLDocument(doc)) as any);
    }
} // DocumentHighlight

export function activate(context: vscode.ExtensionContext) {

    let documentSelector: vscode.DocumentSelector = {
        language: 'blade',
        scheme: 'file'
    };

export function activate(context: vscode.ExtensionContext) {

    // create and keep html language service
    const service = html.getLanguageService();

    vscode.languages.registerCompletionItemProvider(['typescript', 'javascript'], {
        provideCompletionItems(doc, pos) {

            const offset = doc.offsetAt(pos);
            const source = ts.createSourceFile(doc.fileName, doc.getText(), ts.ScriptTarget.Latest, true);

            let token = (ts as any).getTokenAtPosition(source, offset)
            let template: ts.TaggedTemplateExpression;
            while (token) {
                if (token.kind === ts.SyntaxKind.TaggedTemplateExpression) {
                    template = token;
                    break;
                }
                token = token.parent;
            }

export function getBuiltInHtmlCollection(): HtmlDataCollection {
	// Combine data with extra html5 events because vscode-html-language-service hasn't included all events yet.
	const ALL_HTML5_EVENTS: typeof HTML5_EVENTS = [
		...HTML5_EVENTS,
		...EXTRA_HTML5_EVENTS.filter(evt => HTML5_EVENTS.find(existingEvt => existingEvt.name === evt.name) == null)
	];

	// It seems like the autocompletion value map for <select>, </select><textarea> and &lt;input&gt; needs "on" and "off" values
	const EXTENDED_HTML5_VALUE_MAP = HTML5_VALUE_MAP.map(VALUE_MAP =&gt; {
		switch (VALUE_MAP.name) {
			case "inputautocomplete":
				return {
					...VALUE_MAP,
					values: [{ name: "on" }, { name: "off" }, ...VALUE_MAP.values]
				};
			default:
				return VALUE_MAP;
		}
	});

	const result = parseHtmlData({
		version: 1,
		tags: HTML5_TAGS,
		globalAttributes: [...HTML5_GLOBAL_ATTRIBUTES, ...ALL_HTML5_EVENTS, ...ARIA_ATTRIBUTES],
		valueSets: EXTENDED_HTML5_VALUE_MAP</textarea>

wrapLineLength: 90,
			unformatted: "",
			contentUnformatted: "pre,code,textarea",
			indentInnerHtml: true,
			preserveNewLines: true,
			maxPreserveNewLines: undefined,
			indentHandlebars: false,
			endWithNewline: false,
			extraLiners: "head, body, /html",
			wrapAttributes: "auto"
		});

		const hasLeadingNewline = originalHtml.startsWith("\n");
		const hasTrailingNewline = originalHtml.endsWith("\n");

		const newHtml = `${hasLeadingNewline ? "\n" : ""}${vscode.TextDocument.applyEdits(vscTextDocument, edits)}${hasTrailingNewline ? "\n" : ""}`;

		const splitted = newHtml.split(/\[#+\]/);

		return splitted.map((newText, i) => {
			const range = ranges[i];
			return { range: { document, ...range }, newText };
		});
	}
}

regions.push({
                    languageId: 'css',
                    start: scanner.getTokenOffset(),
                    end: scanner.getTokenEnd(),
                    onlyPlaceholders: onlyPlaceholdersRegex.test(scanner.getTokenText()),
                });
                break;
            case TokenType.Script:
                regions.push({
                    languageId: languageIdFromType,
                    start: scanner.getTokenOffset(),
                    end: scanner.getTokenEnd(),
                    onlyPlaceholders: onlyPlaceholdersRegex.test(scanner.getTokenText()),
                });
                break;
            case TokenType.AttributeName:
                lastAttributeName = scanner.getTokenText();
                break;
            case TokenType.AttributeValue:
                if (
                    lastAttributeName === 'src' &&
                    lastTagName.toLowerCase() === 'script'
                ) {
                    let value = scanner.getTokenText();
                    if (value[0] === '\'' || value[0] === '"') {
                        value = value.substr(1, value.length - 1);
                    }
                    importedScripts.push(value);
                } else if (
                    lastAttributeName === 'type' &&
                    lastTagName.toLowerCase() === 'script'
                ) {

let token = scanner.scan();
	while (token !== TokenType.EOS) {
		switch (token) {
			case TokenType.StartTag:
				lastTagName = scanner.getTokenText();
				lastAttributeName = null;
				languageIdFromType = 'javascript';
				break;
			case TokenType.Styles:
				regions.push({ languageId: 'css', start: scanner.getTokenOffset(), end: scanner.getTokenEnd() });
				break;
			case TokenType.Script:
				regions.push({ languageId: languageIdFromType, start: scanner.getTokenOffset(), end: scanner.getTokenEnd() });
				break;
			case TokenType.AttributeName:
				lastAttributeName = scanner.getTokenText();
				break;
			case TokenType.AttributeValue:
				if (lastAttributeName === 'src' && lastTagName.toLowerCase() === 'script') {
					let value = scanner.getTokenText();
					if (value[0] === '\'' || value[0] === '"') {
						value = value.substr(1, value.length - 1);
					}
					importedScripts.push(value);
				} else if (lastAttributeName === 'type' && lastTagName.toLowerCase() === 'script') {
					if (/["'](module|(text|application)\/(java|ecma)script)["']/.test(scanner.getTokenText())) {
						languageIdFromType = 'javascript';
					} else {
						languageIdFromType = undefined;
					}
				} else {

end: scanner.getTokenEnd(),
                    onlyPlaceholders: onlyPlaceholdersRegex.test(scanner.getTokenText()),
                });
                break;
            case TokenType.Script:
                regions.push({
                    languageId: languageIdFromType,
                    start: scanner.getTokenOffset(),
                    end: scanner.getTokenEnd(),
                    onlyPlaceholders: onlyPlaceholdersRegex.test(scanner.getTokenText()),
                });
                break;
            case TokenType.AttributeName:
                lastAttributeName = scanner.getTokenText();
                break;
            case TokenType.AttributeValue:
                if (
                    lastAttributeName === 'src' &&
                    lastTagName.toLowerCase() === 'script'
                ) {
                    let value = scanner.getTokenText();
                    if (value[0] === '\'' || value[0] === '"') {
                        value = value.substr(1, value.length - 1);
                    }
                    importedScripts.push(value);
                } else if (
                    lastAttributeName === 'type' &&
                    lastTagName.toLowerCase() === 'script'
                ) {
                    if (
                        /["'](module|(text|application)\/(java|ecma)script)["']/.test(
                            scanner.getTokenText()

switch (token) {
			case TokenType.StartTag:
				lastTagName = scanner.getTokenText();
				lastAttributeName = null;
				languageIdFromType = 'javascript';
				break;
			case TokenType.Styles:
				regions.push({ languageId: 'css', start: scanner.getTokenOffset(), end: scanner.getTokenEnd() });
				break;
			case TokenType.Script:
				regions.push({ languageId: languageIdFromType, start: scanner.getTokenOffset(), end: scanner.getTokenEnd() });
				break;
			case TokenType.AttributeName:
				lastAttributeName = scanner.getTokenText();
				break;
			case TokenType.AttributeValue:
				if (lastAttributeName === 'src' && lastTagName.toLowerCase() === 'script') {
					let value = scanner.getTokenText();
					if (value[0] === '\'' || value[0] === '"') {
						value = value.substr(1, value.length - 1);
					}
					importedScripts.push(value);
				} else if (lastAttributeName === 'type' && lastTagName.toLowerCase() === 'script') {
					if (/["'](module|(text|application)\/(java|ecma)script)["']/.test(scanner.getTokenText())) {
						languageIdFromType = 'javascript';
					} else {
						languageIdFromType = undefined;
					}
				} else {
					let attributeLanguageId = getAttributeLanguage(lastAttributeName!);
					if (attributeLanguageId) {
						let start = scanner.getTokenOffset();

export function getDocumentRegions(
    languageService: LanguageService,
    document: TextDocument
): HTMLDocumentRegions {
    const regions: EmbeddedRegion[] = [];
    const scanner = languageService.createScanner(document.getText());
    let lastTagName: string = '';
    let lastAttributeName: string | null = null;
    let languageIdFromType: string | undefined;
    const importedScripts: string[] = [];

    let token = scanner.scan();
    while (token !== TokenType.EOS) {
        switch (token) {
            case TokenType.StartTag:
                lastTagName = scanner.getTokenText();
                lastAttributeName = null;
                languageIdFromType = 'javascript';
                break;
            case TokenType.Styles:
                regions.push({
                    languageId: 'css',
                    start: scanner.getTokenOffset(),
                    end: scanner.getTokenEnd(),
                    onlyPlaceholders: onlyPlaceholdersRegex.test(scanner.getTokenText()),
                });
                break;
            case TokenType.Script:
                regions.push({

while (token !== TokenType.EOS) {
        switch (token) {
            case TokenType.StartTag:
                lastTagName = scanner.getTokenText();
                lastAttributeName = null;
                languageIdFromType = 'javascript';
                break;
            case TokenType.Styles:
                regions.push({
                    languageId: 'css',
                    start: scanner.getTokenOffset(),
                    end: scanner.getTokenEnd(),
                    onlyPlaceholders: onlyPlaceholdersRegex.test(scanner.getTokenText()),
                });
                break;
            case TokenType.Script:
                regions.push({
                    languageId: languageIdFromType,
                    start: scanner.getTokenOffset(),
                    end: scanner.getTokenEnd(),
                    onlyPlaceholders: onlyPlaceholdersRegex.test(scanner.getTokenText()),
                });
                break;
            case TokenType.AttributeName:
                lastAttributeName = scanner.getTokenText();
                break;
            case TokenType.AttributeValue:
                if (
                    lastAttributeName === 'src' &&
                    lastTagName.toLowerCase() === 'script'
                ) {
                    let value = scanner.getTokenText();