package.json of the VS Code extension defines custom view to show structure of the project:
"contributes": {
"views": {
"explorer": [{
"id": "myProjectView",
"name": "<<PROJECT NAME PLACEHOLDER>>",
"when": "myProjectView:inProjectFolder"
}]
}
},
activate() method of the extension reads project file.
One of the file attributes is the project name.
QUESTION: Is there a way to set this name as the view name replacing the one, defined in package.json?
Yes, you can dynamically change it via TreeView.title. To do this you first have to obtain a TreeView instance using window.createTreeView():
let view = vscode.window.createTreeView("myProjectView", {treeDataProvider: provider});
view.title = "New Name";
Related
I'm using a VScode extension called "Surround"
In the docs for this extension it shows how to define a custom snippet. What I want is really simple. I would like to add the ability to surround selected text with tags, ie <> </> while placing the cursors in the middle where I define what type of tag that is (html, img, button, etc)
The docs show this example:
{
"surround.custom": {
// command name must be unique
"yourCommandName": {
// label must be unique
"label": "Your Snippet Label",
"description": "Your Snippet Description",
"snippet": "burrito { $TM_SELECTED_TEXT }$0", // <-- snippet goes here.
"languageIds": ["html", "javascript", "typescript", "markdown"]
},
// You can add more ...
}
}
I can almost parse it, except I don't know what the placeholders are representing. I assume { $TM_SELECTED_TEXT } is the text I've selected but what is the trailing $0 used for? Also, how can I place 2 cursors in between the opening and closing tags?
Thanks in advance.
I have an extension that provides some snippets. I want to add a command that creates a new file with the snippet automatically triggered for the user. The idea is to get the user to edit the tabstops immediately without any further action. Something like:
Run the command (from the command palette, or a keybinding)
VSCode opens a new file with the snippet already evaluated and waiting on the first tabstop for user input
I have scouted the APIs but I haven't found anything to trigger a snippet. The most relevant APIs are those about the CompletionItemProvider, which can be used to provide a snippet.
Does anybody know how to trigger/expand a snippet automatically?
There is also an insertSnippet method on the TextEditor, see https://code.visualstudio.com/api/references/vscode-api#TextEditor.
So you could do this:
const editor = vscode.window.activeTextEditor;
// build your snippet with the SnippetString methods
const snippet = new vscode.SnippetString("option1 attr1=${2:Option 1 Placeholder 1} attr2=${3:Option 1 Placeholder 2}");
await editor.insertSnippet(snippet);
You can also run the command insertSnippet like this:
// body of snippet here is exactly as you would write it in a keybinding
await vscode.commands.executeCommand("editor.action.insertSnippet", { "snippet": "${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}T${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}Z" });
// the below uses a pre-existing snippet with a name 'Custom Header'
await vscode.commands.executeCommand("editor.action.insertSnippet", { "name": "Custom Header"});
This last executeCommand can have a reference to a pre-existing snippet that you contributed in your extension. For more see below.
All these commands will insert at the cursor with the snippets in the first tabstop position as you wanted.
Contributing snippets in your extension:
In your package.json:
"contributes": {
"snippets": [
{
"language": "javascript",
"path": "./snippets/javascript.json"
}
]
}
You create a folder named snippets in your extension and a file named javascript.json for javascript snippets. And then use the usual snippet format in that file, like:
{
"Custom Header2": { // use this 'name'
"prefix": "reactpure",
"body": [
"import React from 'react';",
"import PropTypes from 'prop-types';",
"import './${1:ComponentName}.module.css';",
"const ${1:ComponentName} = ({ ${2:propValue=[] } }) => (",
"<${3:rootelement}>${4:content}</${3:rootelement}>",
")",
"${1:ComponentName}.propTypes = {",
"${5:propValue}: PropTypes.string",
"};",
"export default ${1:ComponentName};",
"$0"
],
"description": "Create a react pure component"
}
}
Then you can use that name in your extension
// using an extension-contributed snippet
await vscode.commands.executeCommand("editor.action.insertSnippet", { "name": "Custom Header2"});
``
In an extension I want to add a button to display in the VS code editor title menu bar when it opens a synapse XML document.In order to that, I added the following command in commands of package.json file,
{
"command": "webview.show",
"title": "Show Diagram",
"category": "Webview",
"icon": {
"light": "./resources/images/icons/design-view.svg",
"dark": "./resources/images/icons/design-view-inverse.svg"
}
}
and in the package.json file I added the following editor/title,
"menus": {
"editor/title": [
{
"when": "resourceLangId == SynapseXml",
"command": "webview.show",
"group": "navigation"
}
],
}
But when I run the extension and opens a synapse XML document, it will not showing the button in the editor title menu bar.
Further I followed following documentation also,
https://code.visualstudio.com/api/references/contribution-points#contributes.menus
How can I display the button in VS code editor title menu bar?
I added your command and menu entry to an extension I'm making and the button appears where it should (all be it without an image in my screenshot as I don't have the icon). In my screenshot it is the empty space on the left of the ying-yang button - the tooltip is visible though on mouse over. I just removed the "where" test so I would guess that resourceLangId is not what you think it is or maybe the icons path is wrong so it looks like it isn't there as in my screenshot
For anyone still having the same issue:
In my case, using the correct context name field (editorLangId) to match the language ID in the when clause of the command fixed the issue.
https://code.visualstudio.com/api/references/when-clause-contexts#available-contexts
"menus": {
"editor/title": [
{
"when": "editorLangId == SynapseXml",
"command": "webview.show",
"group": "navigation"
}
]
}
We can use the "split editor" option to make two views into one file.
I'm looking for an option to open the same file in separated tabs like I can do in Sublime Text (open new view of file). Is that possible?
Note: I want to do this without splitting the view, so there should be two tabs for the same file within the same view container.
I couldn't find anything built-in that lets you do this, nor an existing extension in the marketplace. I thought it should be quite trivial to implement a "Duplicate Tab" command yourself in a custom extension, but it turns out VSCode only allows the same resource to be opened once within the same view column.
It's still possible to do this on Windows or macOS, but only by abusing this bug:
Issues with not case/fragment-normalizing file paths (macOS, Windows) #12448
Here's what the code for the extension looks like:
'use strict';
import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
vscode.commands.registerCommand("duplicateTab", () => {
var activeEditor = vscode.window.activeTextEditor;
if (activeEditor == null) {
return;
}
// HACK!
const sameFileNameButDifferent = activeEditor.document.fileName.toUpperCase();
vscode.workspace.openTextDocument(sameFileNameButDifferent).then(document => {
vscode.window.showTextDocument(document, {preview: false});
});
});
}
In package.json:
"contributes": {
"commands": [
{
"title": "Duplicate Tab",
"command": "duplicateTab"
}
]
},
I am currently writing a vs-code FTP type extension, which requires me to use the "TreeView". I have found this link:
https://code.visualstudio.com/api/extension-guides/tree-view
Which guides you through adding a tree view to the sidebar. However I am having trouble getting this off the ground, Step one on the above mentioned guide already does not seem to add the icon to my vscode sidebar? Thus holding from making any progress...
Obviously I am misunderstanding something! I am rather new to TypeScript and have trouble following others code on this subject. Please could anyone just help me getting the first step working?
This is my package.json contributes:
"contributes": {
"commands": [
{
"command": "extension.helloWorld",
"title": "Hello World"
}
],
"viewsContainers": {
"activitybar": [
{
"id": "live-workspace",
"title": "Live-Workspace",
"icon": "./src/Treeview/laptop.svg"
}
]
}
}
From what I understand this should place a "functionless" icon on the sidebar? Am I understanding this wrong? Is there more to be done to achieve this? Thanks!
A view container will only show up if it contains at least one view. It works for me once I also add the following to the contributes section:
"views": {
"live-workspace": [
{
"id": "exampleView",
"name": "Example View"
}
]
}