jrieken
commented
7 years ago We have experimented with that, indeed @aeschli implemented the first version for JS/CSS in html using that approach but we discarded it for various reasons, esp around diagnostics for those fake documents, because keeping line/character-mappings up-to-date isn't for free, and because language services often need to know more about those contained documents, think of project associations et al.
There are many issues asking for language support in embedded strings, such as using HTML in ES6 template literals. It seems that it will take considerable effort to get done,
Yes but we won't be able to just synthesise documents from such constructs because they come in any flavour, esp template strings. Apart from documents being the wrong abstraction for this, extensions (e.g IntelliSense for template-strings) must contribute to other extensions (TypeScript) when a string is interesting for it and when not.
Our recommendation and that's what we did for JS/CSS in HTML et al is to understand the containing structure and to operate on that portion that is of interest, e.g. that one template string in a JS/TS file. The sample below that by using the TypeScript syntax tree to check if completions are request inside a template string and if the tagging function is foo. Iff so it returns some completions.
'use strict';
import * as vscode from 'vscode';
import * as ts from 'typescript';
export function activate(context: vscode.ExtensionContext) {
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;
}
if (!template
|| template.tag.getText() !== 'foo'
|| (offset < template.template.pos && offset > template.template.end)
) {
return;
}
return [
new vscode.CompletionItem('bar', vscode.CompletionItemKind.Value),
new vscode.CompletionItem('baz', vscode.CompletionItemKind.Value),
new vscode.CompletionItem('far', vscode.CompletionItemKind.Value)
];
}
});
}Obviously this is just some proof of concept and something real should cache the syntax trees and ideally update them incrementally and also something real needs to compute completions properly but the filter logic is that complex
plievone
There are many issues asking for language support in embedded strings, such as using HTML in ES6 template literals. It seems that it will take considerable effort to get done, and are not yet on the roadmap as far as I know.
As an intermediate solution, could VS Code facilitate opening embedded strings (when in TypeScript, for example) on the side buffer and syncing it with the original string, so that one could use any language infrastructure that is already automatically in place today for that buffer (highlighting HTML, SQL, etc)? Copying strings across buffers is of course possible already (and works great!) but it is not really usable until selecting the string and keeping it in sync is mostly automatic. Maybe they could be "portals" or something. Alternatively one could use some kind of narrowing to the part in question, but it is imperative that language services would work properly for the narrowed part as they do now for a separate buffer.
Later edit: Published an extension that implements this, works great: Template Literal Editor for VS Code. Will try to remember to keep it updated when Extension API offers new possibilities (scroll and cursor sync, document tiles, etc).