Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-04-28 12:33:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

Get emmet completions from css extension (#41652)

Browse Source 
* Get emmet completions from html,css extensions

* Resolve extensionsPath, use emmet results even if empty

* Support css abbr with :

* Refactoring

* Add some basic emmet tests

* Refactoring

* More tests
This commit is contained in:
Ramya Rao
2018-02-12 21:40:10 -08:00
committed by GitHub
parent 4d12201733
commit 00f2d8ed71
26 changed files with 415 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
extensions/html/server/.vscode/launch.json vendored
View File

@@ -7,6 +7,7 @@
"type": "node",
"request": "attach",
"port": 6045,
"protocol": "inspector",
"sourceMaps": true,
"outFiles": ["${workspaceFolder}/out/**/*.js"]
},

6
extensions/html/server/package.json
View File

@@ -10,9 +10,11 @@
"dependencies": {
"vscode-css-languageservice": "^3.0.5",
"vscode-html-languageservice": "^2.0.15",
"vscode-languageserver": "^3.5.0",
"vscode-languageserver": "^4.0.0-next.4",
"vscode-languageserver-types": "^3.6.0-next.1",
"vscode-nls": "^3.2.1",
"vscode-uri": "^1.0.1"
"vscode-uri": "^1.0.1",
"vscode-emmet-helper": "1.1.34"
},
"devDependencies": {
"@types/mocha": "2.2.33",

66
extensions/html/server/src/htmlServerMain.ts
View File

@@ -4,8 +4,8 @@
*--------------------------------------------------------------------------------------------*/
'use strict';
import { createConnection, IConnection, TextDocuments, InitializeParams, InitializeResult, RequestType, DocumentRangeFormattingRequest, Disposable, DocumentSelector, TextDocumentPositionParams, ServerCapabilities, Position } from 'vscode-languageserver';
import { TextDocument, Diagnostic, DocumentLink, SymbolInformation } from 'vscode-languageserver-types';
import { createConnection, IConnection, TextDocuments, InitializeParams, InitializeResult, RequestType, DocumentRangeFormattingRequest, Disposable, DocumentSelector, TextDocumentPositionParams, ServerCapabilities, Position, CompletionTriggerKind } from 'vscode-languageserver';
import { TextDocument, Diagnostic, DocumentLink, SymbolInformation, CompletionList } from 'vscode-languageserver-types';
import { getLanguageModes, LanguageModes, Settings } from './modes/languageModes';
import { ConfigurationRequest, ConfigurationParams } from 'vscode-languageserver-protocol/lib/protocol.configuration.proposed';
@@ -17,6 +17,7 @@ import { pushAll } from './utils/arrays';
import { getDocumentContext } from './utils/documentContext';
import uri from 'vscode-uri';
import { formatError, runSafe } from './utils/errors';
import { doComplete as emmetDoComplete, updateExtensionsPath as updateEmmetExtensionsPath, getEmmetCompletionParticipants } from 'vscode-emmet-helper';
namespace TagCloseRequest {
export const type: RequestType<TextDocumentPositionParams, string | null, any, any> = new RequestType('html/tag');
@@ -69,6 +70,10 @@ function getDocumentSettings(textDocument: TextDocument, needsDocumentSettings:
return Promise.resolve(void 0);
}
let emmetSettings = {};
let currentEmmetExtensionsPath: string;
const emmetTriggerCharacters = ['!', '.', '}', ':', '*', '$', ']', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
// After the server has started the client sends an initilize request. The server receives
// in the passed params the rootPath of the workspace plus the client capabilites
connection.onInitialize((params: InitializeParams): InitializeResult => {
@@ -105,7 +110,7 @@ connection.onInitialize((params: InitializeParams): InitializeResult => {
let capabilities: ServerCapabilities & CPServerCapabilities = {
// Tell the client that the server works in FULL text document sync mode
textDocumentSync: documents.syncKind,
completionProvider: clientSnippetSupport ? { resolveProvider: true, triggerCharacters: ['.', ':', '<', '"', '=', '/'] } : undefined,
completionProvider: clientSnippetSupport ? { resolveProvider: true, triggerCharacters: [...emmetTriggerCharacters, '.', ':', '<', '"', '=', '/'] } : undefined,
hoverProvider: true,
documentHighlightProvider: true,
documentRangeFormattingProvider: false,
@@ -167,6 +172,12 @@ connection.onDidChangeConfiguration((change) => {
}
}
emmetSettings = globalSettings.emmet;
if (currentEmmetExtensionsPath !== emmetSettings['extensionsPath']) {
currentEmmetExtensionsPath = emmetSettings['extensionsPath'];
const workspaceUri = (workspaceFolders && workspaceFolders.length === 1) ? uri.parse(workspaceFolders[0].uri) : null;
updateEmmetExtensionsPath(currentEmmetExtensionsPath, workspaceUri ? workspaceUri.fsPath : null);
}
});
let pendingValidationRequests: { [uri: string]: NodeJS.Timer } = {};
@@ -226,19 +237,52 @@ async function validateTextDocument(textDocument: TextDocument) {
}
}
let cachedCompletionList: CompletionList;
connection.onCompletion(async textDocumentPosition => {
return runSafe(async () => {
let document = documents.get(textDocumentPosition.textDocument.uri);
let mode = languageModes.getModeAtPosition(document, textDocumentPosition.position);
if (mode && mode.doComplete) {
let doComplete = mode.doComplete;
if (mode.getId() !== 'html') {
connection.telemetry.logEvent({ key: 'html.embbedded.complete', value: { languageId: mode.getId() } });
}
let settings = await getDocumentSettings(document, () => doComplete.length > 2);
return doComplete(document, textDocumentPosition.position, settings);
if (!mode || !mode.doComplete) {
return { isIncomplete: true, items: [] };
}
return { isIncomplete: true, items: [] };
if (cachedCompletionList
&& !cachedCompletionList.isIncomplete
&& (mode.getId() === 'html' || mode.getId() === 'css')
&& textDocumentPosition.context
&& textDocumentPosition.context.triggerKind === CompletionTriggerKind.TriggerForIncompleteCompletions
) {
let result: CompletionList = emmetDoComplete(document, textDocumentPosition.position, mode.getId(), emmetSettings);
if (result && result.items) {
result.items.push(...cachedCompletionList.items);
} else {
result = cachedCompletionList;
cachedCompletionList = null;
}
return result;
}
if (mode.getId() !== 'html') {
connection.telemetry.logEvent({ key: 'html.embbedded.complete', value: { languageId: mode.getId() } });
}
cachedCompletionList = null;
let emmetCompletionList: CompletionList = {
isIncomplete: true,
items: undefined
};
if (mode.setCompletionParticipants) {
const emmetCompletionParticipant = getEmmetCompletionParticipants(document, textDocumentPosition.position, mode.getId(), emmetSettings, emmetCompletionList);
mode.setCompletionParticipants([emmetCompletionParticipant]);
}
let settings = await getDocumentSettings(document, () => mode.doComplete.length > 2);
let result = mode.doComplete(document, textDocumentPosition.position, settings);
if (emmetCompletionList && emmetCompletionList.items) {
cachedCompletionList = result;
return { isIncomplete: true, items: [...emmetCompletionList.items, ...result.items] };
}
return result;
}, null, `Error while computing completions for ${textDocumentPosition.textDocument.uri}`);
});

5
extensions/html/server/src/modes/cssMode.ts
View File

@@ -6,7 +6,7 @@
import { LanguageModelCache, getLanguageModelCache } from '../languageModelCache';
import { TextDocument, Position, Range } from 'vscode-languageserver-types';
import { getCSSLanguageService, Stylesheet } from 'vscode-css-languageservice';
import { getCSSLanguageService, Stylesheet, ICompletionParticipant } from 'vscode-css-languageservice';
import { LanguageMode, Settings } from './languageModes';
import { HTMLDocumentRegions, CSS_STYLE_RULE } from './embeddedSupport';
import { Color } from 'vscode-languageserver-protocol/lib/protocol.colorProvider.proposed';
@@ -31,6 +31,9 @@ export function getCSSMode(documentRegions: LanguageModelCache<HTMLDocumentRegio
let embedded = embeddedCSSDocuments.get(document);
return cssLanguageService.doComplete(embedded, position, cssStylesheets.get(embedded));
},
setCompletionParticipants(registeredCompletionParticipants: ICompletionParticipant[]) {
cssLanguageService.setCompletionParticipants(registeredCompletionParticipants);
},
doHover(document: TextDocument, position: Position) {
let embedded = embeddedCSSDocuments.get(document);
return cssLanguageService.doHover(embedded, position, cssStylesheets.get(embedded));

21
extensions/html/server/src/modes/htmlMode.ts
View File

@@ -5,13 +5,14 @@
'use strict';
import { getLanguageModelCache } from '../languageModelCache';
import { LanguageService as HTMLLanguageService, HTMLDocument, DocumentContext, FormattingOptions, HTMLFormatConfiguration } from 'vscode-html-languageservice';
import { LanguageService as HTMLLanguageService, HTMLDocument, DocumentContext, FormattingOptions, HTMLFormatConfiguration, TokenType } from 'vscode-html-languageservice';
import { TextDocument, Position, Range } from 'vscode-languageserver-types';
import { LanguageMode, Settings } from './languageModes';
export function getHTMLMode(htmlLanguageService: HTMLLanguageService): LanguageMode {
let globalSettings: Settings = {};
let htmlDocuments = getLanguageModelCache<HTMLDocument>(10, 60, document => htmlLanguageService.parseHTMLDocument(document));
let completionParticipants = [];
return {
getId() {
return 'html';
@@ -25,7 +26,23 @@ export function getHTMLMode(htmlLanguageService: HTMLLanguageService): LanguageM
if (doAutoComplete) {
options.hideAutoCompleteProposals = true;
}
return htmlLanguageService.doComplete(document, position, htmlDocuments.get(document), options);
const htmlDocument = htmlDocuments.get(document);
const offset = document.offsetAt(position);
const node = htmlDocument.findNodeBefore(offset);
const scanner = htmlLanguageService.createScanner(document.getText(), node.start);
let token = scanner.scan();
while (token !== TokenType.EOS && scanner.getTokenOffset() <= offset) {
if (token === TokenType.Content && offset <= scanner.getTokenEnd()) {
completionParticipants.forEach(participant => { if (participant.onHtmlContent) { participant.onHtmlContent(); } });
break;
}
token = scanner.scan();
}
return htmlLanguageService.doComplete(document, position, htmlDocument, options);
},
setCompletionParticipants(registeredCompletionParticipants: any[]) {
completionParticipants = registeredCompletionParticipants;
},
doHover(document: TextDocument, position: Position) {
return htmlLanguageService.doHover(document, position, htmlDocuments.get(document));

2
extensions/html/server/src/modes/languageModes.ts
View File

@@ -24,6 +24,7 @@ export interface Settings {
css?: any;
html?: any;
javascript?: any;
emmet?: { [key: string]: any };
}
export interface SettingProvider {
@@ -35,6 +36,7 @@ export interface LanguageMode {
configure?: (options: Settings) => void;
doValidation?: (document: TextDocument, settings?: Settings) => Diagnostic[];
doComplete?: (document: TextDocument, position: Position, settings?: Settings) => CompletionList | null;
setCompletionParticipants?: (registeredCompletionParticipants: any[]) => void;
doResolve?: (document: TextDocument, item: CompletionItem) => CompletionItem | null;
doHover?: (document: TextDocument, position: Position) => Hover | null;
doSignatureHelp?: (document: TextDocument, position: Position) => SignatureHelp | null;

70
extensions/html/server/src/test/emmet.test.ts Normal file
View File

@@ -0,0 +1,70 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
'use strict';
import 'mocha';
import * as assert from 'assert';
import { getHTMLMode } from '../modes/htmlMode';
import { TextDocument, CompletionList } from 'vscode-languageserver-types';
import { getLanguageModelCache } from '../languageModelCache';
import { getLanguageService } from 'vscode-html-languageservice';
import * as embeddedSupport from '../modes/embeddedSupport';
import { getEmmetCompletionParticipants } from 'vscode-emmet-helper';
import { getCSSMode } from '../modes/cssMode';
suite('Emmet Support', () => {
const htmlLanguageService = getLanguageService();
function assertCompletions(syntax: string, value: string, expectedProposal: string, expectedProposalDoc: string): void {
const offset = value.indexOf('|');
value = value.substr(0, offset) + value.substr(offset + 1);
const document = TextDocument.create('test://test/test.' + syntax, syntax, 0, value);
const position = document.positionAt(offset);
const documentRegions = getLanguageModelCache<embeddedSupport.HTMLDocumentRegions>(10, 60, document => embeddedSupport.getDocumentRegions(htmlLanguageService, document));
const mode = syntax == 'html' ? getHTMLMode(htmlLanguageService) : getCSSMode(documentRegions);
const emmetCompletionList: CompletionList = {
isIncomplete: true,
items: undefined
}
mode.setCompletionParticipants([getEmmetCompletionParticipants(document, position, document.languageId, {}, emmetCompletionList)])
const list = mode.doComplete!(document, position);
assert.ok(list);
assert.ok(emmetCompletionList)
if (expectedProposal && expectedProposalDoc) {
let actualLabels = emmetCompletionList!.items.map(c => c.label).sort();
let actualDocs = emmetCompletionList!.items.map(c => c.documentation).sort();
assert.ok(actualLabels.indexOf(expectedProposal) !== -1, 'Not found:' + expectedProposal + ' is ' + actualLabels.join(', '));
assert.ok(actualDocs.indexOf(expectedProposalDoc) !== -1, 'Not found:' + expectedProposalDoc + ' is ' + actualDocs.join(', '));
} else {
assert.ok(!emmetCompletionList || !emmetCompletionList.items);
}
}
test('Html Emmet Completions', function (): any {
assertCompletions('html', 'ul|', 'ul', '<ul>|</ul>');
assertCompletions('html', '<ul|', null, null);
assertCompletions('html', '<html>ul|</html>', 'ul', '<ul>|</ul>');
assertCompletions('html', '<img src=|', null, null);
assertCompletions('html', '<div class=|/>', null, null);
});
test('Css Emmet Completions', function (): any {
assertCompletions('css', '<style>.foo { display: none; m10| }</style>', 'margin: 10px;', 'margin: 10px;');
assertCompletions('css', '<style>foo { display: none; pos:f| }</style>', 'position: fixed;', 'position: fixed;');
assertCompletions('css', '<style>foo { display: none; margin: a| }</style>', null, null);
assertCompletions('css', '<style>foo| { display: none; }</style>', null, null);
assertCompletions('css', '<style>foo {| display: none; }</style>', null, null);
assertCompletions('css', '<style>foo { display: none;| }</style>', null, null);
assertCompletions('css', '<style>foo { display: none|; }</style>', null, null);
assertCompletions('css', '<style>.foo { display: none; -m-m10| }</style>', 'margin: 10px;', '-moz-margin: 10px;\nmargin: 10px;');
});
});

46
extensions/html/server/yarn.lock
View File

@@ -2,6 +2,10 @@
# yarn lockfile v1
"@emmetio/extract-abbreviation@^0.1.4":
version "0.1.4"
resolved "https://registry.yarnpkg.com/@emmetio/extract-abbreviation/-/extract-abbreviation-0.1.4.tgz#f5be070db97901ecc37e5204f2ace68242cdcefa"
"@types/mocha@2.2.33":
version "2.2.33"
resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-2.2.33.tgz#d79a0061ec270379f4d9e225f4096fb436669def"
@@ -10,6 +14,10 @@
version "7.0.43"
resolved "https://registry.yarnpkg.com/@types/node/-/node-7.0.43.tgz#a187e08495a075f200ca946079c914e1a5fe962c"
jsonc-parser@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-1.0.0.tgz#ddcc864ae708e60a7a6dd36daea00172fa8d9272"
vscode-css-languageservice@^3.0.5:
version "3.0.5"
resolved "https://registry.yarnpkg.com/vscode-css-languageservice/-/vscode-css-languageservice-3.0.5.tgz#8470989c07bbe740db4fa621423e98384d2c342f"
@@ -17,6 +25,14 @@ vscode-css-languageservice@^3.0.5:
vscode-languageserver-types "3.5.0"
vscode-nls "^2.0.1"
vscode-emmet-helper@1.1.34:
version "1.1.34"
resolved "https://registry.yarnpkg.com/vscode-emmet-helper/-/vscode-emmet-helper-1.1.34.tgz#1e2d3e26c389efc6f73ceb4c0ed797ae07291874"
dependencies:
"@emmetio/extract-abbreviation" "^0.1.4"
jsonc-parser "^1.0.0"
vscode-languageserver-types "^3.6.0-next.1"
vscode-html-languageservice@^2.0.15:
version "2.0.15"
resolved "https://registry.yarnpkg.com/vscode-html-languageservice/-/vscode-html-languageservice-2.0.15.tgz#e3ec34c4d62bc636f8a16c9b474e5851ca13aab0"
@@ -25,26 +41,30 @@ vscode-html-languageservice@^2.0.15:
vscode-nls "^2.0.2"
vscode-uri "^1.0.1"
vscode-jsonrpc@^3.5.0:
version "3.5.0"
resolved "https://registry.yarnpkg.com/vscode-jsonrpc/-/vscode-jsonrpc-3.5.0.tgz#87239d9e166b2d7352245b8a813597804c1d63aa"
vscode-jsonrpc@^3.6.0-next.1:
version "3.6.0-next.1"
resolved "https://registry.yarnpkg.com/vscode-jsonrpc/-/vscode-jsonrpc-3.6.0-next.1.tgz#3cb463dffe5842d6aec16718ca9252708cd6aabe"
vscode-languageserver-protocol@^3.5.0:
version "3.5.0"
resolved "https://registry.yarnpkg.com/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.5.0.tgz#067c5cbe27709795398d119692c97ebba1452209"
vscode-languageserver-protocol@^3.6.0-next.5:
version "3.6.0-next.5"
resolved "https://registry.yarnpkg.com/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.6.0-next.5.tgz#ed2ec2db759826f753c0a13977dfb2bedc4d31b3"
dependencies:
vscode-jsonrpc "^3.5.0"
vscode-languageserver-types "^3.5.0"
vscode-jsonrpc "^3.6.0-next.1"
vscode-languageserver-types "^3.6.0-next.1"
vscode-languageserver-types@3.5.0, vscode-languageserver-types@^3.5.0:
vscode-languageserver-types@3.5.0:
version "3.5.0"
resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.5.0.tgz#e48d79962f0b8e02de955e3f524908e2b19c0374"
vscode-languageserver@^3.5.0:
version "3.5.0"
resolved "https://registry.yarnpkg.com/vscode-languageserver/-/vscode-languageserver-3.5.0.tgz#d28099bc6ddda8c1dd16b707e454e1b1ddae0dba"
vscode-languageserver-types@^3.6.0-next.1:
version "3.6.0-next.1"
resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.6.0-next.1.tgz#98e488d3f87b666b4ee1a3d89f0023e246d358f3"
vscode-languageserver@^4.0.0-next.4:
version "4.0.0-next.4"
resolved "https://registry.yarnpkg.com/vscode-languageserver/-/vscode-languageserver-4.0.0-next.4.tgz#162440b15bedaab07e1676f046e4d9b8578b3d92"
dependencies:
vscode-languageserver-protocol "^3.5.0"
vscode-languageserver-protocol "^3.6.0-next.5"
vscode-uri "^1.0.1"
vscode-nls@^2.0.1, vscode-nls@^2.0.2: