microsoft
/
vscode-emmet-helper
зеркало из https://github.com/microsoft/vscode-emmet-helper.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

pull latest master

This commit is contained in:
jens1o 2017-07-29 09:26:54 +02:00
Родитель e291a4596d 1184a6c6d4
Коммит 9fc3c07980
9 изменённых файлов: 762 добавлений и 5309 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

22
.vscode/launch.json поставляемый Normal file
Просмотреть файл

@ -0,0 +1,22 @@
{
// Use IntelliSense to learn about possible Node.js debug attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Mocha Tests",
"program": "${workspaceRoot}/node_modules/mocha/bin/_mocha",
"args": [
"-u",
"tdd",
"--timeout",
"999999",
"--colors",
"${workspaceRoot}/out/emmetHelperTest.js"
]
}
]
}

8
README.md
Просмотреть файл

@ -3,9 +3,9 @@ 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 EmmetCompletionProvider.
Just pass the one of the emmet supported syntaxes that you would like the completion provider to use.
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.syntaxPofiles` has a mapping for your language, then the builit-in emmet extension will provide
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
emmet completions using this module

15
package.json
Просмотреть файл

@ -1,27 +1,30 @@
{
"name": "vscode-emmet-helper",
"version": "0.0.10",
"version": "1.0.0",
"description": "Helper to use emmet modules in Visual Studio Code",
"main": "./out/emmetHelper.js",
"author": "Microsoft Corporation",
"repository": {
"type": "git",
"url": "https://github.com/Microsoft/vscode-emmet-helper"
"url": "https://github.com/ramya-rao-a/vscode-emmet-helper"
},
"license": "MIT",
"bugs": {
"url": "https://github.com/Microsoft/vscode-emmet-helper"
"url": "https://github.com/ramya-rao-a/vscode-emmet-helper"
},
"devDependencies": {
"@types/node": "^6.0.46",
"typescript": "^2.1.5"
"typescript": "^2.1.5",
"mocha": "3.4.2"
},
"dependencies": {
"@emmetio/expand-abbreviation": "^0.5.8",
"@emmetio/extract-abbreviation": "^0.1.1"
"@emmetio/extract-abbreviation": "^0.1.1",
"vscode-languageserver-types": "^3.0.3"
},
"scripts": {
"prepublish": "tsc -p ./",
"compile": "tsc -watch -p ./"
"compile": "tsc -watch -p ./",
"test": "mocha out/emmetHelperTest.js"
}
}

661
src/emmetHelper.ts
Просмотреть файл

@ -4,281 +4,472 @@
*--------------------------------------------------------------------------------------------*/
import * as vscode from 'vscode';
import { TextDocument, Position, Range, CompletionItem, CompletionList, TextEdit, InsertTextFormat } from 'vscode-languageserver-types'
import { expand, createSnippetsRegistry } from '@emmetio/expand-abbreviation';
import * as extract from '@emmetio/extract-abbreviation';
import * as path from 'path';
import * as fs from 'fs';
const snippetKeyCache = new Map<string, string[]>();
const htmlAbbreviationRegex = /^[a-z,A-Z,!,(,[,#,\.]/;
let markupSnippetKeys: string[];
const htmlAbbreviationStartRegex = /^[a-z,A-Z,!,(,[,#,\.]/;
const htmlAbbreviationEndRegex = /[a-z,A-Z,!,),\],#,\.,},\d,*,$]$/;
const cssAbbreviationRegex = /^[a-z,A-Z,!,@,#]/;
const emmetModes = ['html', 'pug', 'slim', 'haml', 'xml', 'xsl', 'jsx', 'css', 'scss', 'sass', 'less', 'stylus'];
const commonlyUsedTags = ['div', 'span', 'p', 'b', 'i', 'body', 'html', 'ul', 'ol', 'li', 'head', 'script', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'section'];
const bemFilterSuffix = 'bem';
const filterDelimitor = '|';
export class EmmetCompletionItemProvider implements vscode.CompletionItemProvider {
private _syntax: string;
constructor(syntax: string) {
if (syntax) {
this._syntax = syntax;
}
}
public provideCompletionItems(document: vscode.TextDocument, position: vscode.Position, token: vscode.CancellationToken): Thenable<vscode.CompletionList> {
let emmetConfig = vscode.workspace.getConfiguration('emmet');
if (!emmetConfig['useNewEmmet'] || !emmetConfig['showExpandedAbbreviation']) {
return Promise.resolve(null);
}
let [abbreviationRange, abbreviation] = extractAbbreviation(document, position);
if (!isAbbreviationValid(this._syntax, abbreviation)) {
return;
}
let expandedText = expand(abbreviation, getExpandOptions(this._syntax));
if (!expandedText) {
return;
}
let expandedAbbr = new vscode.CompletionItem(abbreviation);
expandedAbbr.insertText = new vscode.SnippetString(expandedText);
expandedAbbr.documentation = this.makeCursorsGorgeous(expandedText);
expandedAbbr.range = abbreviationRange;
expandedAbbr.detail = 'Emmet Abbreviation';
let completionItems: vscode.CompletionItem[] = expandedAbbr ? [expandedAbbr] : [];
if (!isStyleSheet(this._syntax)) {
// Workaround for the main expanded abbr not appearing before the snippet suggestions
expandedAbbr.sortText = '0' + expandedAbbr.label;
let currentWord = this.getCurrentWord(document, position);
let abbreviationSuggestions = this.getAbbreviationSuggestions(this._syntax, currentWord, abbreviation, abbreviationRange);
completionItems = completionItems.concat(abbreviationSuggestions);
} else {
// Temporary fix for https://github.com/Microsoft/vscode/issues/28933
expandedAbbr.filterText = abbreviation;
expandedAbbr.sortText = expandedAbbr.documentation;
expandedAbbr.label = expandedAbbr.documentation;
}
return Promise.resolve(new vscode.CompletionList(completionItems, true));
}
getAbbreviationSuggestions(syntax: string, prefix: string, abbreviation: string, abbreviationRange: vscode.Range): vscode.CompletionItem[] {
if (!vscode.workspace.getConfiguration('emmet')['showAbbreviationSuggestions'] || !prefix || !abbreviation) {
return [];
}
if (!snippetKeyCache.has(syntax)) {
let registry = createSnippetsRegistry(syntax);
let snippetKeys: string[] = registry.all({ type: 'string' }).map(snippet => {
return snippet.key;
});
snippetKeyCache.set(syntax, snippetKeys);
}
let snippetKeys = snippetKeyCache.get(syntax);
let snippetCompletions: vscode.CompletionItem[] = [];
snippetKeys.forEach(snippetKey => {
if (!snippetKey.startsWith(prefix) || snippetKey === prefix) {
return;
}
let currentAbbr = abbreviation + snippetKey.substr(prefix.length);
let expandedAbbr = expand(currentAbbr, getExpandOptions(syntax));
let item = new vscode.CompletionItem(snippetKey);
item.documentation = this.makeCursorsGorgeous(expandedAbbr);
item.detail = 'Emmet Abbreviation';
item.insertText = new vscode.SnippetString(expandedAbbr);
item.range = abbreviationRange;
// Workaround for snippet suggestions items getting filtered out as the complete abbr does not start with snippetKey
item.filterText = abbreviation;
// Workaround for the main expanded abbr not appearing before the snippet suggestions
item.sortText = '9' + abbreviation;
snippetCompletions.push(item);
});
return snippetCompletions;
}
private getCurrentWord(document: vscode.TextDocument, position: vscode.Position): string {
let wordAtPosition = document.getWordRangeAtPosition(position);
let currentWord = '';
if (wordAtPosition && wordAtPosition.start.character < position.character) {
let word = document.getText(wordAtPosition);
currentWord = word.substr(0, position.character - wordAtPosition.start.character);
}
return currentWord;
}
private makeCursorsGorgeous(expandedWord: string): string {
// add one cursor automatically at the end
return expandedWord.replace(/\$\{\d+\}/g, '|').replace(/\$\{\d+:([^\}]+)\}/g, '_$1_') + '|';
}
export interface EmmetConfiguration {
useNewEmmet: boolean;
showExpandedAbbreviation: string;
showAbbreviationSuggestions: boolean;
syntaxProfiles: object;
variables: object;
}
export function doComplete(document: TextDocument, position: Position, syntax: string, emmetConfig: EmmetConfiguration): CompletionList {
if (!emmetConfig.useNewEmmet || emmetConfig.showExpandedAbbreviation === 'never' || emmetModes.indexOf(syntax) === -1) {
return;
}
if (!isStyleSheet(syntax)) {
if (!snippetKeyCache.has(syntax)) {
let registry = customSnippetRegistry[syntax] ? customSnippetRegistry[syntax] : createSnippetsRegistry(syntax);
markupSnippetKeys = registry.all({ type: 'string' }).map(snippet => {
return snippet.key;
});
snippetKeyCache.set(syntax, markupSnippetKeys);
} else {
markupSnippetKeys = snippetKeyCache.get(syntax);
}
}
let expandedAbbr: CompletionItem;
let { abbreviationRange, abbreviation, filters } = extractAbbreviation(document, position);
let expandOptions = getExpandOptions(syntax, emmetConfig.syntaxProfiles, emmetConfig.variables, filters);
if (isAbbreviationValid(syntax, abbreviation)) {
let expandedText;
// Skip non stylesheet abbreviations that are just letters/numbers unless they are valid snippets or commonly used tags
// This is to avoid noise where abc -> <abc>${1}</abc>
// Also skip abbreviations ending with `.` This will be noise when people are typing simple text and ending it with period.
if (isStyleSheet(syntax)
|| (!/^[a-z,A-Z,\d]*$/.test(abbreviation) && !abbreviation.endsWith('.'))
|| markupSnippetKeys.indexOf(abbreviation) > -1
|| commonlyUsedTags.indexOf(abbreviation) > -1) {
try {
expandedText = expand(abbreviation, expandOptions);
// Skip cases when abc -> abc: ; as this is noise
if (isStyleSheet(syntax) && expandedText === `${abbreviation}: \${1};`) {
expandedText = '';
}
} catch (e) {
}
}
if (expandedText) {
expandedAbbr = CompletionItem.create(abbreviation);
expandedAbbr.textEdit = TextEdit.replace(abbreviationRange, expandedText);
expandedAbbr.documentation = removeTabStops(expandedText);
expandedAbbr.insertTextFormat = InsertTextFormat.Snippet;
expandedAbbr.detail = 'Emmet Abbreviation';
if (filters.indexOf('bem') > -1) {
expandedAbbr.label = abbreviation + filterDelimitor + bemFilterSuffix;
}
if (isStyleSheet(syntax)) {
// See https://github.com/Microsoft/vscode/issues/28933#issuecomment-309236902
// Due to this we set filterText, sortText and label to expanded abbreviation
// - Label makes it clear to the user what their choice is
// - FilterText fixes the issue when user types in propertyname and emmet uses it to match with abbreviations
// - SortText will sort the choice in a way that is intutive to the user
expandedAbbr.filterText = expandedAbbr.documentation;
expandedAbbr.sortText = expandedAbbr.documentation;
expandedAbbr.label = expandedAbbr.documentation;
return CompletionList.create([expandedAbbr], true);
}
}
}
let completionItems: CompletionItem[] = expandedAbbr ? [expandedAbbr] : [];
if (!isStyleSheet(syntax)) {
if (expandedAbbr) {
// Workaround for the main expanded abbr not appearing before the snippet suggestions
expandedAbbr.sortText = '0' + expandedAbbr.label;
}
let currentWord = getCurrentWord(document, position);
let commonlyUsedTagSuggestions = makeSnippetSuggestion(commonlyUsedTags, currentWord, abbreviation, abbreviationRange, expandOptions);
completionItems = completionItems.concat(commonlyUsedTagSuggestions);
if (emmetConfig.showAbbreviationSuggestions) {
let abbreviationSuggestions = getAbbreviationSuggestions(syntax, currentWord, abbreviation, abbreviationRange, expandOptions);
completionItems = completionItems.concat(abbreviationSuggestions);
}
}
return CompletionList.create(completionItems, true);
}
function makeSnippetSuggestion(snippets: string[], prefix: string, abbreviation: string, abbreviationRange: Range, expandOptions: any): CompletionItem[] {
if (!prefix) {
return [];
}
let snippetCompletions = [];
snippets.forEach(snippetKey => {
if (!snippetKey.startsWith(prefix) || snippetKey === prefix) {
return;
}
let currentAbbr = abbreviation + snippetKey.substr(prefix.length);
let expandedAbbr;
try {
expandedAbbr = expand(currentAbbr, expandOptions);
} catch (e) {
}
let item = CompletionItem.create(snippetKey);
item.documentation = removeTabStops(expandedAbbr);
item.detail = 'Emmet Abbreviation';
item.textEdit = TextEdit.replace(abbreviationRange, expandedAbbr);
item.insertTextFormat = InsertTextFormat.Snippet;
// Workaround for snippet suggestions items getting filtered out as the complete abbr does not start with snippetKey
item.filterText = abbreviation;
// Workaround for the main expanded abbr not appearing before the snippet suggestions
item.sortText = '9' + abbreviation;
snippetCompletions.push(item);
});
return snippetCompletions;
}
function getAbbreviationSuggestions(syntax: string, prefix: string, abbreviation: string, abbreviationRange: Range, expandOptions: object): CompletionItem[] {
if (!prefix || isStyleSheet(syntax)) {
return [];
}
let snippetKeys = snippetKeyCache.has(syntax) ? snippetKeyCache.get(syntax) : snippetKeyCache.get('html');
let snippetCompletions = [];
return makeSnippetSuggestion(snippetKeys, prefix, abbreviation, abbreviationRange, expandOptions);;
}
function getCurrentWord(document: TextDocument, position: Position): string {
let currentLine = getCurrentLine(document, position);
if (currentLine) {
let matches = currentLine.match(/[\w,:]*$/);
if (matches) {
return matches[0];
}
}
}
function removeTabStops(expandedWord: string): string {
return expandedWord.replace(/\$\{\d+\}/g, '|').replace(/\$\{\d+:([^\}]+)\}/g, '_$1_') + '|';
}
function getCurrentLine(document: TextDocument, position: Position): string {
let offset = document.offsetAt(position);
let text = document.getText();
let start = 0;
let end = text.length;
for (let i = offset - 1; i >= 0; i--) {
if (text[i] === '\n') {
start = i + 1;
break;
}
}
for (let i = offset; i < text.length; i++) {
if (text[i] === '\n') {
end = i;
break;
}
}
return text.substring(start, end);
}
let customSnippetRegistry = {};
let variablesFromFile = {};
let profilesFromFile = {};
let emmetExtensionsPath = '';
const field = (index, placeholder) => `\${${index}${placeholder ? ':' + placeholder : ''}}`;
export const emmetSnippetField = (index, placeholder) => `\${${index}${placeholder ? ':' + placeholder : ''}}`;
export function isStyleSheet(syntax): boolean {
let stylesheetSyntaxes = ['css', 'scss', 'sass', 'less', 'stylus'];
return (stylesheetSyntaxes.indexOf(syntax) > -1);
let stylesheetSyntaxes = ['css', 'scss', 'sass', 'less', 'stylus'];
return (stylesheetSyntaxes.indexOf(syntax) > -1);
}
/**
* Extracts abbreviation from the given position in the given document
*/
export function extractAbbreviation(document: vscode.TextDocument, position: vscode.Position): [vscode.Range, string] {
let currentLine = document.lineAt(position.line).text;
let result = extract(currentLine, position.character, true);
if (!result) {
return [null, ''];
}
* Extracts abbreviation from the given position in the given document
*/
export function extractAbbreviation(document: TextDocument, position: Position) {
let filters = [];
let pos = position.character;
let currentLine = getCurrentLine(document, position);
let currentLineTillPosition = currentLine.substr(0, position.character);
let lengthOccupiedByFilter = 0;
if (currentLineTillPosition.endsWith(`${filterDelimitor}${bemFilterSuffix}`)) {
lengthOccupiedByFilter = 4;
pos -= lengthOccupiedByFilter;
filters.push(bemFilterSuffix)
}
let result;
try {
result = extract(currentLine, pos, true);
}
catch (e) {
}
if (!result) {
return null;
}
let rangeToReplace = Range.create(position.line, result.location, position.line, result.location + result.abbreviation.length + lengthOccupiedByFilter);
return {
abbreviationRange: rangeToReplace,
abbreviation: result.abbreviation,
filters
};
}
let rangeToReplace = new vscode.Range(position.line, result.location, position.line, result.location + result.abbreviation.length);
return [rangeToReplace, result.abbreviation];
export function extractAbbreviationFromText(text: string): any {
let filters = [];
let pos = text.length;
if (text.endsWith(`${filterDelimitor}${bemFilterSuffix}`)) {
pos -= 4;
filters.push(bemFilterSuffix)
}
let result;
try {
result = extract(text, pos, true);
}
catch (e) {
}
if (!result) {
return null;
}
return {
abbreviation: result.abbreviation,
filters
};
}
/**
* Returns a boolean denoting validity of given abbreviation in the context of given syntax
* Not needed once https://github.com/emmetio/atom-plugin/issues/22 is fixed
* @param syntax string
* @param abbreviation string
*/
* Returns a boolean denoting validity of given abbreviation in the context of given syntax
* Not needed once https://github.com/emmetio/atom-plugin/issues/22 is fixed
* @param syntax string
* @param abbreviation string
*/
export function isAbbreviationValid(syntax: string, abbreviation: string): boolean {
return isStyleSheet(syntax) ? htmlAbbreviationRegex.test(abbreviation) : cssAbbreviationRegex.test(abbreviation);
if (isStyleSheet(syntax)) {
return cssAbbreviationRegex.test(abbreviation);
}
if (abbreviation.startsWith('!') && /[^!]/.test(abbreviation)) {
return false;
}
// Its common for users to type (sometextinsidebrackets), this should not be treated as an abbreviation
if (abbreviation.startsWith('(') && abbreviation.endsWith(')') && !/^\(.+[>,+,*].+\)$/.test(abbreviation)) {
return false;
}
return (htmlAbbreviationStartRegex.test(abbreviation) && htmlAbbreviationEndRegex.test(abbreviation));
}
/**
* Returns options to be used by the expand module
* @param syntax
* @param textToReplace
*/
export function getExpandOptions(syntax: string, textToReplace?: string) {
return {
field: field,
syntax: syntax,
profile: getProfile(syntax),
addons: syntax === 'jsx' ? { 'jsx': true } : null,
variables: getVariables(),
text: textToReplace ? textToReplace : null
};
* Returns options to be used by the expand module
* @param syntax
* @param textToReplace
*/
export function getExpandOptions(syntax: string, syntaxProfiles?: object, variables?: object, filters?: string[], ) {
let baseSyntax = isStyleSheet(syntax) ? 'css' : 'html';
if (!customSnippetRegistry[syntax] && customSnippetRegistry[baseSyntax]) {
customSnippetRegistry[syntax] = customSnippetRegistry[baseSyntax];
}
let addons = syntax === 'jsx' ? { 'jsx': true } : {};
if (filters && filters.indexOf('bem') > -1) {
addons['bem'] = { element: '__' };
}
return {
field: emmetSnippetField,
syntax: syntax,
profile: getProfile(syntax, syntaxProfiles),
addons: addons,
variables: getVariables(variables),
snippets: customSnippetRegistry[syntax]
};
}
/**
* Maps and returns syntaxProfiles of previous format to ones compatible with new emmet modules
* @param syntax
*/
export function getProfile(syntax: string): any {
let profilesFromSettings = vscode.workspace.getConfiguration('emmet')['syntaxProfiles'] || {};
let profilesConfig = Object.assign({}, profilesFromFile, profilesFromSettings);
* Maps and returns syntaxProfiles of previous format to ones compatible with new emmet modules
* @param syntax
*/
function getProfile(syntax: string, profilesFromSettings: object): any {
if (!profilesFromSettings) {
profilesFromSettings = {};
}
let profilesConfig = Object.assign({}, profilesFromFile, profilesFromSettings);
let options = profilesConfig[syntax];
if (!options || typeof options === 'string') {
if (options === 'xhtml') {
return {
selfClosingStyle: 'xhtml'
};
}
return {};
}
let newOptions = {};
for (let key in options) {
switch (key) {
case 'tag_case':
newOptions['tagCase'] = (options[key] === 'lower' || options[key] === 'upper') ? options[key] : '';
break;
case 'attr_case':
newOptions['attributeCase'] = (options[key] === 'lower' || options[key] === 'upper') ? options[key] : '';
break;
case 'attr_quotes':
newOptions['attributeQuotes'] = options[key];
break;
case 'tag_nl':
newOptions['format'] = (options[key] === 'true' || options[key] === 'false') ? options[key] : 'true';
break;
case 'indent':
newOptions['attrCase'] = (options[key] === 'true' || options[key] === 'false') ? '\t' : options[key];
break;
case 'inline_break':
newOptions['inlineBreak'] = options[key];
break;
case 'self_closing_tag':
if (options[key] === true) {
newOptions['selfClosingStyle'] = 'xml'; break;
}
if (options[key] === false) {
newOptions['selfClosingStyle'] = 'html'; break;
}
newOptions['selfClosingStyle'] = options[key];
break;
default:
newOptions[key] = options[key];
break;
}
}
return newOptions;
let options = profilesConfig[syntax];
if (!options || typeof options === 'string') {
if (options === 'xhtml') {
return {
selfClosingStyle: 'xhtml'
};
}
return {};
}
let newOptions = {};
for (let key in options) {
switch (key) {
case 'tag_case':
newOptions['tagCase'] = (options[key] === 'lower' || options[key] === 'upper') ? options[key] : '';
break;
case 'attr_case':
newOptions['attributeCase'] = (options[key] === 'lower' || options[key] === 'upper') ? options[key] : '';
break;
case 'attr_quotes':
newOptions['attributeQuotes'] = options[key];
break;
case 'tag_nl':
newOptions['format'] = (options[key] === true || options[key] === false) ? options[key] : true;
break;
case 'inline_break':
newOptions['inlineBreak'] = options[key];
break;
case 'self_closing_tag':
if (options[key] === true) {
newOptions['selfClosingStyle'] = 'xml'; break;
}
if (options[key] === false) {
newOptions['selfClosingStyle'] = 'html'; break;
}
newOptions['selfClosingStyle'] = options[key];
break;
default:
newOptions[key] = options[key];
break;
}
}
return newOptions;
}
/**
* Returns variables to be used while expanding snippets
*/
export function getVariables(): any {
let variablesFromSettings = vscode.workspace.getConfiguration('emmet')['variables'];
return Object.assign({}, variablesFromFile, variablesFromSettings);
* Returns variables to be used while expanding snippets
*/
function getVariables(variablesFromSettings: object): any {
if (!variablesFromSettings) {
return variablesFromFile;
}
return Object.assign({}, variablesFromFile, variablesFromSettings);
}
/**
* Updates customizations from snippets.json and syntaxProfiles.json files in the directory configured in emmet.extensionsPath setting
*/
export function updateExtensionsPath() {
let currentEmmetExtensionsPath = vscode.workspace.getConfiguration('emmet')['extensionsPath'];
if (emmetExtensionsPath !== currentEmmetExtensionsPath) {
emmetExtensionsPath = currentEmmetExtensionsPath;
* Updates customizations from snippets.json and syntaxProfiles.json files in the directory configured in emmet.extensionsPath setting
*/
export function updateExtensionsPath(emmetExtensionsPath: string): Promise<void> {
if (!emmetExtensionsPath || !emmetExtensionsPath.trim() || !path.isAbsolute(emmetExtensionsPath.trim()) || !dirExists(emmetExtensionsPath.trim())) {
customSnippetRegistry = {};
snippetKeyCache.clear();
profilesFromFile = {};
variablesFromFile = {};
return Promise.resolve();
}
if (emmetExtensionsPath && emmetExtensionsPath.trim()) {
let dirPath = path.isAbsolute(emmetExtensionsPath) ? emmetExtensionsPath : path.join(vscode.workspace.rootPath, emmetExtensionsPath);
let snippetsPath = path.join(dirPath, 'snippets.json');
let profilesPath = path.join(dirPath, 'syntaxProfiles.json');
if (dirExists(dirPath)) {
fs.readFile(snippetsPath, (err, snippetsData) => {
if (err) {
return;
}
try {
let snippetsJson = JSON.parse(snippetsData.toString());
variablesFromFile = snippetsJson['variables'];
} catch (e) {
let dirPath = emmetExtensionsPath.trim();
let snippetsPath = path.join(dirPath, 'snippets.json');
let profilesPath = path.join(dirPath, 'syntaxProfiles.json');
}
});
fs.readFile(profilesPath, (err, profilesData) => {
if (err) {
return;
}
try {
profilesFromFile = JSON.parse(profilesData.toString());
} catch (e) {
let snippetsPromise = new Promise<void>((resolve, reject) => {
fs.readFile(snippetsPath, (err, snippetsData) => {
if (err) {
return resolve();
}
try {
let snippetsJson = JSON.parse(snippetsData.toString());
variablesFromFile = snippetsJson['variables'];
customSnippetRegistry = {};
snippetKeyCache.clear();
Object.keys(snippetsJson).forEach(syntax => {
if (!snippetsJson[syntax]['snippets']) {
return;
}
let baseSyntax = isStyleSheet(syntax) ? 'css' : 'html';
let customSnippets = snippetsJson[syntax]['snippets'];
if (snippetsJson[baseSyntax]['snippets'] && baseSyntax !== syntax) {
customSnippets = Object.assign({}, snippetsJson[baseSyntax]['snippets'], snippetsJson[syntax]['snippets'])
}
customSnippetRegistry[syntax] = createSnippetsRegistry(syntax, customSnippets);
let snippetKeys: string[] = customSnippetRegistry[syntax].all({ type: 'string' }).map(snippet => {
return snippet.key;
});
snippetKeyCache.set(syntax, snippetKeys);
});
} catch (e) {
}
return resolve();
});
});
let variablesPromise = new Promise<void>((resolve, reject) => {
fs.readFile(profilesPath, (err, profilesData) => {
try {
if (!err) {
profilesFromFile = JSON.parse(profilesData.toString());
}
} catch (e) {
}
return resolve();
});
});
return Promise.all([snippetsPromise, variablesFromFile]).then(() => Promise.resolve());
}
});
}
}
}
}
function dirExists(dirPath: string): boolean {
try {
return fs.statSync(dirPath).isDirectory();
} catch (e) {
return false;
}
try {
return fs.statSync(dirPath).isDirectory();
} catch (e) {
return false;
}
}
/**
* Get the corresponding emmet mode for given vscode language mode
* Eg: jsx for typescriptreact/javascriptreact or pug for jade
* If the language is not supported by emmet or has been exlcuded via `exlcudeLanguages` setting,
* then nothing is returned
*
* @param language
* @param exlcudedLanguages Array of language ids that user has chosen to exlcude for emmet
*/
export function getEmmetMode(language: string, excludedLanguages: string[]): string {
if (!language || excludedLanguages.indexOf(language) > -1) {
return;
}
if (/\b(typescriptreact|javascriptreact|jsx-tags)\b/.test(language)) { // treat tsx like jsx
return 'jsx';
}
if (language === 'sass-indented') { // map sass-indented to sass
return 'sass';
}
if (language === 'jade') {
return 'pug';
}
if (emmetModes.indexOf(language) > -1) {
return language;
}
}

286
src/emmetHelperTest.ts Normal file
Просмотреть файл

@ -0,0 +1,286 @@
import { TextDocument, Position } from 'vscode-languageserver-types'
import { isAbbreviationValid, extractAbbreviation, extractAbbreviationFromText, getExpandOptions, emmetSnippetField, updateExtensionsPath, doComplete } from './emmetHelper';
import { describe, it } from 'mocha';
import * as assert from 'assert';
import * as path from 'path';
const extensionsPath = path.join(path.normalize(path.join(__dirname, '..')), 'testData');
describe('Validate Abbreviations', () => {
it('should return true for valid abbreivations', () => {
const htmlAbbreviations = ['ul>li', 'ul', 'h1', 'ul>li*3', '(ul>li)+div', '.hello', '!', '#hello', '.item[id=ok]'];
htmlAbbreviations.forEach(abbr => {
assert(isAbbreviationValid('html', abbr));
});
htmlAbbreviations.forEach(abbr => {
assert(isAbbreviationValid('haml', abbr));
});
});
it('should return false for invalid abbreivations', () => {
const htmlAbbreviations = ['!ul!', '(hello)'];
const cssAbbreviations = ['123'];
htmlAbbreviations.forEach(abbr => {
assert(!isAbbreviationValid('html', abbr));
});
htmlAbbreviations.forEach(abbr => {
assert(!isAbbreviationValid('haml', abbr));
});
cssAbbreviations.forEach(abbr => {
assert(!isAbbreviationValid('css', abbr));
});
cssAbbreviations.forEach(abbr => {
assert(!isAbbreviationValid('scss', abbr));
});
})
});
describe('Extract Abbreviations', () => {
it('should extract abbreviations from document', () => {
const testCases: [string, number, number, string, number, number, number, number, string[]][] = [
['<div>ul>li*3</div>', 0, 7, 'ul', 0, 5, 0, 7,[]],
['<div>ul>li*3</div>', 0, 10, 'ul>li', 0, 5, 0, 10,[]],
['<div>ul>li*3</div>', 0, 12, 'ul>li*3', 0, 5, 0, 12,[]],
['ul>li', 0, 5, 'ul>li', 0, 0, 0, 5,[]],
['ul>li|bem', 0, 9, 'ul>li', 0, 0, 0, 9,['bem']]
]
testCases.forEach(([content, positionLine, positionChar, expectedAbbr, expectedRangeStartLine, expectedRangeStartChar, expectedRangeEndLine, expectedRangeEndChar, expectedFilters]) => {
const document = TextDocument.create('test://test/test.html', 'html', 0, content);
const position = Position.create(positionLine, positionChar);
const {abbreviationRange, abbreviation, filters} = extractAbbreviation(document, position);
assert.equal(expectedAbbr, abbreviation);
assert.equal(expectedRangeStartLine, abbreviationRange.start.line);
assert.equal(expectedRangeStartChar, abbreviationRange.start.character);
assert.equal(expectedRangeEndLine, abbreviationRange.end.line);
assert.equal(expectedRangeEndChar, abbreviationRange.end.character);
assert.equal(filters.length, expectedFilters.length);
for(let i = 0; i < filters.length; i++) {
assert.equal(filters[i], expectedFilters[i]);
}
});
});
it('should extract abbreviations from text', () => {
const testCases: [string, string, string[]][] = [
['ul', 'ul', []],
['ul>li', 'ul>li', []],
['ul>li*3', 'ul>li*3', []],
['ul>li|bem', 'ul>li', ['bem']]
]
testCases.forEach(([content, expectedAbbr, expectedFilters]) => {
const {abbreviation, filters} = extractAbbreviationFromText(content);
assert.equal(expectedAbbr, abbreviation);
assert.equal(filters.length, expectedFilters.length);
for(let i = 0; i < filters.length; i++) {
assert.equal(filters[i], expectedFilters[i]);
}
});
});
});
describe('Test Basic Expand Options', () => {
it('should check for basic expand options', () => {
const textToReplace = 'textToReplace';
const syntax = 'anythingreally';
let expandOptions = getExpandOptions(syntax);
assert.equal(expandOptions.field, emmetSnippetField)
assert.equal(expandOptions.syntax, syntax);
});
});
describe('Test output profile settings', () => {
it('should convert output profile from old format to new', () => {
const profile = {
tag_case: 'lower',
attr_case: 'lower',
attr_quotes: 'single',
tag_nl: true,
inline_break: 2,
self_closing_tag: 'xhtml'
}
const expandOptions = getExpandOptions('html', { html: profile });
assert.equal(profile['tag_case'], expandOptions.profile['tagCase']);
assert.equal(profile['attr_case'], expandOptions.profile['attributeCase']);
assert.equal(profile['attr_quotes'], expandOptions.profile['attributeQuotes']);
assert.equal(profile['tag_nl'], expandOptions.profile['format']);
assert.equal(profile['inline_break'], expandOptions.profile['inlineBreak']);
assert.equal(profile['self_closing_tag'], expandOptions.profile['selfClosingStyle']);
});
it('should convert self_closing_style', () => {
const testCases = [true, false, 'xhtml'];
const expectedValue = ['xml', 'html', 'xhtml'];
for (let i = 0; i < testCases.length; i++) {
const expandOptions = getExpandOptions('html', { html: { self_closing_tag: testCases[i] } });
assert.equal(expandOptions.profile['selfClosingStyle'], expectedValue[i]);
}
});
it('should convert tag_nl', () => {
const testCases = [true, false, 'decide'];
const expectedValue = [true, false, true];
for (let i = 0; i < testCases.length; i++) {
const expandOptions = getExpandOptions('html', { html: { tag_nl: testCases[i] } });
assert.equal(expandOptions.profile['format'], expectedValue[i]);
}
});
it('shoud use output profile in new format as is', () => {
const profile = {
tagCase: 'lower',
attributeCase: 'lower',
attributeQuotes: 'single',
format: true,
inlineBreak: 2,
selfClosingStyle: 'xhtml'
};
const expandOptions = getExpandOptions('html', { html: profile });
Object.keys(profile).forEach(key => {
assert.equal(expandOptions.profile[key], profile[key]);
});
});
it('should use profile from extensionsPath', () => {
updateExtensionsPath(extensionsPath).then(() => {
const profile = {
tag_case: 'lower',
attr_case: 'lower',
attr_quotes: 'single',
tag_nl: true,
inline_break: 2,
self_closing_tag: 'xhtml'
}
const expandOptions = getExpandOptions('html', { html: profile });
assert.equal(expandOptions.profile['tagCase'], 'upper');
assert.equal(profile['tag_case'], 'lower');
});
});
});
describe('Test variables settings', () => {
it('should take in variables as is', () => {
const variables = {
lang: 'de',
charset: 'UTF-8'
}
const expandOptions = getExpandOptions('html', {}, variables);
Object.keys(variables).forEach(key => {
assert.equal(expandOptions.variables[key], variables[key]);
});
});
it('should use variables from extensionsPath', () => {
updateExtensionsPath(extensionsPath).then(() => {
const variables = {
lang: 'en',
charset: 'UTF-8'
}
const expandOptions = getExpandOptions('html', {}, variables);
assert.equal(expandOptions.variables['lang'], 'fr');
assert.equal(variables['lang'], 'en');
});
});
});
describe('Test custom snippets', () => {
it('should use custom snippets from extensionsPath', () => {
const customSnippetKey = 'ch';
updateExtensionsPath(null).then(() => {
const expandOptionsWithoutCustomSnippets = getExpandOptions('css');
assert(!expandOptionsWithoutCustomSnippets.snippets);
// Use custom snippets from extensionsPath
updateExtensionsPath(extensionsPath).then(() => {
let foundCustomSnippet = false;
let foundCustomSnippetInInhertitedSyntax = false;
const expandOptionsWithCustomSnippets = getExpandOptions('css');
const expandOptionsWithCustomSnippetsInhertedSytnax = getExpandOptions('scss');
expandOptionsWithoutCustomSnippets.snippets.all({ type: 'string' }).forEach(snippet => {
if (snippet.key === customSnippetKey) {
foundCustomSnippet = true;
}
});
expandOptionsWithCustomSnippetsInhertedSytnax.snippets.all({ type: 'string' }).forEach(snippet => {
if (snippet.key === customSnippetKey) {
foundCustomSnippet = true;
}
});
assert.equal(foundCustomSnippet, true);
assert.equal(foundCustomSnippetInInhertitedSyntax, true);
});
});
});
});
describe('Test completions', () => {
it('should provide completions', () => {
updateExtensionsPath(null).then(() => {
const testCases: [string, number, number, string, string, number, number, number, number][] = [
['<div>ul>li*3</div>', 0, 7, 'ul', '<ul></ul>', 0, 5, 0, 7],
['<div>ul>li*3</div>', 0, 10, 'ul>li', '<ul>\n\t<li></li>\n</ul>', 0, 5, 0, 10]
];
testCases.forEach(([content, positionLine, positionChar, expectedAbbr, expectedExpansion, expectedRangeStartLine, expectedRangeStartChar, expectedRangeEndLine, expectedRangeEndChar]) => {
const document = TextDocument.create('test://test/test.html', 'html', 0, content);
const position = Position.create(positionLine, positionChar);
const completionList = doComplete(document, position, 'html', {
useNewEmmet: true,
showExpandedAbbreviation: 'always',
showAbbreviationSuggestions: false,
syntaxProfiles: {},
variables: {}
});
assert.equal(completionList.items[0].label, expectedAbbr);
assert.equal(completionList.items[0].documentation, expectedExpansion);
});
});
});
it('should not provide completions', () => {
updateExtensionsPath(null).then(() => {
const testCases: [string, number, number][] = [
['<div>abc</div>', 0, 8],
['<div>abc12</div>', 0, 10],
['<div>abc.</div>', 0, 9],
['<div>(div)</div>', 0, 10]
];
testCases.forEach(([content, positionLine, positionChar]) => {
const document = TextDocument.create('test://test/test.html', 'html', 0, content);
const position = Position.create(positionLine, positionChar);
const completionList = doComplete(document, position, 'html', {
useNewEmmet: true,
showExpandedAbbreviation: 'always',
showAbbreviationSuggestions: false,
syntaxProfiles: {},
variables: {}
});
assert.equal(completionList.items.length, 0);
});
});
});
})

5061
src/typings/vscode.d.ts поставляемый
Просмотреть файл

Разница между файлами не показана из-за своего большого размера Загрузить разницу

10
testData/snippets.json Normal file
Просмотреть файл

@ -0,0 +1,10 @@
{
"css": {
"snippets": {
"ch": "color:hsl(${1:0}, ${2:100}%, ${3:50}%);"
}
},
"variables": {
"lang": "fr"
}
}

5
testData/syntaxProfiles.json Normal file
Просмотреть файл

@ -0,0 +1,5 @@
{
"html": {
"tag_case": "upper"
}
}

3
tsconfig.json
Просмотреть файл

@ -10,8 +10,5 @@
},
"exclude": [
"node_modules"
],
"include": [
"src/**/*"
]
}