Hi guys suppose i want to comment the below code in vscode
files_converted.forEach( ( item , idx ) => {
zip_Directory( `${req.body.outputPath}/${item}` , `${req.body.outputPath}/${item}.zip` );
})
.then( () => {
console.log('FILES CONVERTED AND ZIPPED !')
}).catch( (err) =>
{ console.error(err)
});
Is there anyway of quickly selecting and commenting out the above code without using the mouse ? The comment style i prefer is ( /* some comment here */ ).
To select something inside curly brackets, you can use smart select. The idea is that you can select the text inside curly brackets and "expand" the selection or "shrink" it. The default keyboard shortcut on Mac is Ctrl+Shift+Cmd+Right Arrow to grow and the left arrow to shrink.
To use block comments instead of line comments you can use ... well, the "block comment" function :-P Which by default is Command+Option+/ on Mac.
for bracket selection, use this...
https://marketplace.visualstudio.com/items?itemName=dbankier.vscode-quick-select
for block comment,
use Shift+Alt+A
Related
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.
Is it possible to get a text typing effect in a vscode extension? I'm imagining something like a intellisense autocompletion, but once you make the selection you get the characters typed out one by one rather than just having them added all in one go ...?
I know there have been some attempts to do this with jQuery:
jquery function to display text one character at a time
https://www.jqueryscript.net/text/Terminal-like-Text-Typing-Effect-with-jQuery-Teletype.html
I was wondering if I can do it with one of these:
https://github.com/tameemsafi/typewriterjs
https://github.com/mattboldt/typed.js/
https://github.com/EOussama/typewriterjs
hmm, but they rely on having a DOM, so maybe it has to be a custom vscode thing ... which I'm asking about https://github.com/microsoft/vscode/issues/87871 but still haven't got a definitive answer
Many thanks in advance
I got it working like this
let line = 0
let typing = array.reduce((promise: Promise<any>, character: string, index: number) =>
promise.then((_: any) =>
editor.edit(editBuilder => { return editBuilder.insert(new vscode.Position(line, index), character) })
.then(_ => { return wait(100) })
.then(_ => { if(character === '\n') { line++ }})
)
, Promise.resolve())
typing().catch((err: any) => console.log(err))
see https://github.com/microsoft/vscode/issues/87871#issuecomment-569837719 for more
I'm trying to write an extension for VSCode where the editor screen is always centered on the cursor. There are other extensions that add a command to center the screen onto the cursor, but you have to press the command to activate it.
Currently the only way I've found to implement this is to rewrite the cursorUp, cursorDown, enter, pageUp, pageDown -- any command that moves the cursor up and down basically, and then use the "revealLine" command with the cursor line position and with the "at" attribute as "center".
Is there a better way? Reimplementing the default editor commands seems very inefficient.
Here's what I've got currently:
"use strict";
import * as vscode from "vscode";
export function activate(context: vscode.ExtensionContext) {
let disposable1 = vscode.commands.registerCommand("cursorUp",() => {
centralizar();
vscode.commands.executeCommand("cursorMove", {
to: "up",
});
}
);
let disposable2 = vscode.commands.registerCommand("cursorDown",() => {
centralizar();
vscode.commands.executeCommand("cursorMove", {
to: "down",
});
}
);
context.subscriptions.push(disposable1);
context.subscriptions.push(disposable2);
}
function centralizar() {
let currentLineNumber = vscode.window.activeTextEditor.selection.start.line;
vscode.commands.executeCommand("revealLine", {
lineNumber: currentLineNumber,
at: "center"
});
}
export function deactivate() {}
Perhaps you can utilize the new (v1.38) command editor.cursorSurroundingLines. See scrollOff release notes.
It takes a number, but if you can get the number of visible lines in an editor window, then set editor.cursorSurroundingLines to the appropriate midpoint that may work. It seems you would not have to listen for scroll events. But would have to update the value if the editor window was resized.
The Scrolloff extension implements this functionality when its "alwaysCenter" option is enabled. It works by listening to window.onDidChangeTextEditorSelection, which fires when the cursor moves.
I am using aloglia autocomplete.js and followed the tutorial.
I want to use autocomplete text box with others select2 selectbox.
var client = algoliasearch('YourApplicationID','YourSearchOnlyAPIKey')
var index = client.initIndex('YourIndex');
autocomplete('#search-input', { hint: false }, [
{
source: autocomplete.sources.hits(index, { hitsPerPage: 5 }),
displayKey: 'my_attribute',
templates: {
suggestion: function(suggestion) {
return suggestion._highlightResult.my_attribute.value;
}
}
}
]).on('autocomplete:selected', function(event, suggestion, dataset) {
console.log(suggestion, dataset);
$("#search-input").val(suggestion.full_name.name)
});
Problem is when I clicked anywhere beside that autocomplete box autocomplete disappear and it showed only what I typed before.
I don't want it to disappear. How can I implement it? Thanks for helping.
Please see the example below for detail problem.
Assume you have a simple form with one auto complete input field,two select2 boxes and one submit button. After you choose auto complete filed, when you click anywhere, it changed to default text. I mean, you put "piz" and it shows "pizza". Therefore you select pizza and it display "pizza".Then, you try to choose one select2 box or click anywhere. The autocomplete input field changed back to "piz".
I tried autocomplete:closed , $("#search-input").focusout to set the input field but it just changed back to my query.
To prevent it from disappearing, you can use autocomplete.js's debug option:
autocomplete('#search-input', { hint: false, debug: true }, [ /* ... */ ]);
The complete options list is available on GitHub.
Now I have it. When you need to only select and not to do any action, you can safety remove autocomplete:selected. And make sure your display key is value not object.
It saves me for trouble.