im korean beginner developer... help... T^T
i want to make auto complete like snippets in my custom vs code extension.
now my code,
const snippetBase = `axios.({
url: "${service.url}",
method: "${service.description}",
`
const editor = vscode.window.activeTextEditor
const selection: any = editor?.selection
editor?.edit(builder => {
builder.replace(
selection,
snippetBase + snippetHeaders(snippetRes.data.header) + snippetBody(snippetRes.data.body)
)
})
then, my extension auto complete image
I want to focus my cursor automatically inside the format after the snippet is shown.
Just like picture below.
snippets image
help me plz!!
It sounds from your comment that you want the edit to act as a snippet. Then you need to make a SnippetString and use the editor.insertSnippet() command which can take that SnippetString as an argument. This should work for you:
const editor = vscode.window.activeTextEditor
const selection = editor?.selection
const axiosSnippet = new vscode.SnippetString("axios.({\n")
axiosSnippet.appendText("\turl: \"")
axiosSnippet.appendPlaceholder(service.url)
axiosSnippet.appendText("\",\n")
axiosSnippet.appendText("\tmethod: \"")
axiosSnippet.appendPlaceholder(service.description)
axiosSnippet.appendText("\",\n")
editor.insertSnippet(axiosSnippet, selection)
axiosSnippet.appendPlaceholder(service.url); is the key to this, as it will select that placeholder first and then allow you to tab to the next placeholder axiosSnippet.appendPlaceholder(service.description).
[I don't know the structure of the rest of your snippet,e.g., snippetHeaders(snippetRes.data.header). If it is just text than you can use the appendText method with \n for newlines.
I'm trying to build an add-in with similar behaviour like the comment system.
I select a part of text.
Press a button in my add-in. A card is created that links to that text.
I do something else, like write text on a different position.
When I press the card in my add-in, I'd like to jump back to the selected text (in point 1).
I studied the API, documentation. And learned that I could do something like that with Bindings. A contentcontrol might also be an option, although I noticed that you can't connect and eventhandler (it's in beta). I might need an eventhandler to track changes later.
Create binding (step 2)
Office.context.document.bindings.addFromSelectionAsync(Office.BindingType.Text, { id: 'MyBinding' }, (asyncResult) => {
if (asyncResult.status == Office.AsyncResultStatus.Failed) {
console.log('Action failed. Error: ' + asyncResult.error.message);
} else {
console.log('Added new binding with id: ' + asyncResult.value.id);
}
});
Works. Then I click somewhere else in my document, to continue with step 4.
View binding (step 4).
So I click the card and what to jump back to that text binding, with the binding selected.
I figured there are multiple ways.
Method #1
Use the Office.select function below logs the text contents of the binding. However, it doesn't select that text in the document.
Office.select("bindings#MyBinding").getDataAsync(function (asyncResult) {
if (asyncResult.status == Office.AsyncResultStatus.Failed) {
}
else {
console.log(asyncResult.value);
}
});
Method #2
Use the GoToById function to jump to the binding.
Office.context.document.goToByIdAsync("MyBinding", Office.GoToType.Binding, function (asyncResult) {
let val = asyncResult.value;
console.log(val);
});
This shows like a blue like frame around the text that was previously selected and puts the cursor at the start.
I'd prefer that I don't see that frame (no idea if that's possible) and I would like to the text selected.
There is the Office.GoToByIdOptions interface that mentions:
In Word: Office.SelectionMode.Selected selects all content in the binding.
I don't understand how pass that option in the function call though and I can't find an example. Can I use this interface to get the selection?
https://learn.microsoft.com/en-us/javascript/api/office/office.document?view=common-js-preview#office-office-document-gotobyidasync-member(1)
goToByIdAsync(id, goToType, options, callback)
If there are other ways to do this, I'd like to know that as well.
With some help I could figure it out. I learned that an Interface is just an object.
So in this case:
const options = {
selectionMode: Office.SelectionMode.Selected
};
Office.context.document.goToByIdAsync("MyBinding", Office.GoToType.Binding, options, function (asyncResult) {
console.log(asyncResult);
});
This gives the selected result.
Sure someone can provide a better answer than this, as it's unfamiliar territory for me, but...
When you create a Binding from the Selection in Word, you're going to get a Content Control anyway. So to avoid having something that looks like a content control with the blue box, you either have to modify the control's display or you have to find some other way to reference a region of your document. In the traditional Word Object model, you could use a bookmark, for example. But the office-js APIs do not seem very interested in them.
However, when you create a Binding, which is an Office object, you don't get immediate access to the Content Control's properties (since that's a Word object). So instead of creating the Binding then trying to modify the Content Control, you may be better off creating the Content Control then Binding to it.
Something like this:
async function markTarget() {
Word.run(async (context) => {
const cc = context.document.getSelection().insertContentControl();
// "Hidden" means you don't get the "Bounding Box"
// (blue box with Title), or the Start/End tag view
cc.appearance = "Hidden";
// Provide a Title so we have a Name to bind to
cc.title = "myCC";
// If you don't want users changing the content, you
// could uncomment the following line
//cc.cannotDelete = true;
return context.sync()
.then(
() => {
console.log("Content control inserted");
// Now create a binding using the named item
Office.context.document.bindings.addFromNamedItemAsync("myCC",
Office.BindingType.Text,
{ id: 'MyBinding' });
},
() => console.log("Content control insertion failed")
).then(
() => console.log("Added new binding"),
() => console.log("Binding creation failed")
)
});
}
So why not just create the ContentControl, name it, and then you should be able to select it later using its Title, right? Well, getting the "data" from a control is one thing. Actually selecting it doesn't seem straightforward in the API, whereas Selecting a Binding seems to be.
So this code is pretty similar to your approach, but adds the parameter to select the whole text. The syntax for that is really the same syntax as { id: 'MyBinding' } in the code you already have.
function selectTarget() {
Office.context.document.goToByIdAsync(
"MyBinding",
Office.GoToType.Binding,
{ selectionMode: Office.SelectionMode.Selected },
function(asyncResult) {
let val = asyncResult.value;
console.log(val);
}
);
}
Both the Binding and the ContentControl (and its Title) are persisted when you save/reopen the document. In this case, the Binding is persisted as a piece of XML that stores the type ("text"), name ("MyBinding") and a reference to the internal ID of the content control, which is a 32-bit number, although that is not immediately obvious when you look at the XML - in an example here, the Id Word stores for the ContentControl is -122165626, but "Office" stores the ID for the Binding as 4172801670, but that's because they are using the two different two's complement representations of the same number.
I am trying to have language support in VSCode for an assembler targeting a programmable ASIC.
So far I have only the TextMate grammar and I am now trying to understand how to implement a language server.
I am learning from
https://github.com/Microsoft/vscode-extension-samples/tree/master/lsp-sample
and have come so far as to have my environment up for debugging.
Where I am struggling is that I do not understand how the completion mechanism is done in the example.
What I see when debugging is that as soon the first letter (word boundary) is an:
j or J a small text popup with a string JavaScript(J highlighted) and details shows so I can select without typing
t or T the same but for TypeScript(T highlighted)
s or S gives a list of the both previous popups(S highlighted on both) and arrow up/down for selection
The only code covering this, as I understand it, is this section in the server.ts file
// This handler provides the initial list of the completion items.
connection.onCompletion(
(_textDocumentPosition: TextDocumentPositionParams): CompletionItem[] => {
// The pass parameter contains the position of the text document in
// which code complete got requested. For the example we ignore this
// info and always provide the same completion items.
return [
{
label: 'TypeScript',
kind: CompletionItemKind.Text,
data: 1
},
{
label: 'JavaScript',
kind: CompletionItemKind.Text,
data: 2
}
];
}
);
// This handler resolves additional information for the item selected in
// the completion list.
connection.onCompletionResolve(
(item: CompletionItem): CompletionItem => {
if (item.data === 1) {
item.detail = 'TypeScript details';
item.documentation = 'TypeScript documentation';
} else if (item.data === 2) {
item.detail = 'JavaScript details';
item.documentation = 'JavaScript documentation';
}
return item;
}
);
I have tested with more labels and it appears as the Completionparser checks for capital letters in the labels.
Added 2 more labels, 'TwoMore' and 'JetBrain' and they behaved in the same way, e.g. m/M or b/B also gave a popup.
What is not obvious is why this is so?
So I wanted to customize VS Code for some custom language. I made a .json with snippets that I parsed out of all .inc files that I've got with this language but I'd rather want to have it implemented into IntelliSense. So my question is, how to create a custom language IntelliSense support when I have .inc files with all the global variables, functions and so on? I've researched this for a couple of hours now and couldn't find anything that helped me even start.
you need to create a language server and Add code completion feature to it.
The example code below adds code completion to the server. It proposes the two words 'TypeScript' and 'JavaScript'
// This handler provides the initial list of the completion items.
connection.onCompletion(
(_textDocumentPosition: TextDocumentPositionParams): CompletionItem[] => {
// The pass parameter contains the position of the text document in
// which code complete got requested. For the example we ignore this
// info and always provide the same completion items.
return [
{
label: 'TypeScript',
kind: CompletionItemKind.Text,
data: 1
},
{
label: 'JavaScript',
kind: CompletionItemKind.Text,
data: 2
}
];
}
);
// This handler resolve additional information for the item selected in
// the completion list.
connection.onCompletionResolve(
(item: CompletionItem): CompletionItem => {
if (item.data === 1) {
(item.detail = 'TypeScript details'),
(item.documentation = 'TypeScript documentation');
} else if (item.data === 2) {
(item.detail = 'JavaScript details'),
(item.documentation = 'JavaScript documentation');
}
return item;
}
);
I am trying to understand Code Mirror which I am using with FirePad - I get it all working, but now I want to do something a bit more 'exciting'.
I am looking to markText to make it readOnly but I cannot find out anywhere how to actually do it. My need is to load the editor, and preset with a template (best way to describe it) so that the template has some preset readOnly text and users then update the textarea after the read only text i.e. it can't be deleted/over written
Example (template being inserted into the FirePad):
<div><strong>Note</strong></div><br/>
<div>Type text in here</div><br/>
<div><strong>What has been achieved since last session</strong></div><br/>
<div>Type text in here</div><br/>
in this example people should be able to type in the area/s marked 'type text here'.
To call the text editor I use this:
var firepadRef = new Firebase('https://XXXXXXXXX.firebaseio.com/test');
var codeMirror = CodeMirror(document.getElementById('someID'), { lineWrapping: true });
var firepad = Firepad.fromCodeMirror(firepadRef, codeMirror, { richTextToolbar: true, richTextShortcuts: true });
any ideas?