The extension adds a panel for accessing frequently used commands, files, directories, URLs, programs, snippets. The panel can be standalone or as part of the Explorer (In this case, you can drag the panel like any other to the desired location).
- Quick access to favorite commands
- Running multiple commands in sequence
- Quick access to your favorite files and folders
- Quick access to favorite URLs
- Fast launch of applications
- Setting icons for commands
- Separation setting for different workspaces
The extension requires initial configuration. Edit the settings file VSCODE. If extension settings are not specified, demo settings will be used.
The extension settings are in section "pings.commands": [] in the Settings(settings.json) You can also place settings in custom files pings.configPath
If you want to make specific settings for each workspace, then use pings.commandsForWorkspace or pings.configPathForWorkspace. in the workspace settings.
The order of loading and displaying the settings:
- Settings: pings.commands
- Settings: pings.commandsForWorkspace
- Settings: pings.configPath: "full_path_to_custom_configuration_file"
- Settings: pings.configPathForWorkspace: "full_path_to_custom_configuration_file"
- .vscode/pings.json in project folder
- .pings.json in project folder
- pings.json in project folder
"pings.commands": [
{
"label": "README",
"description": "- read me",
"icon": "zap",
"iconColor": "editorBracketHighlight.foreground5",
"command": "openFile",
"arguments": ["README.MD"]
}
]
Use this setting if you wish to set specific settings for the workspace.
Please note that you need to specify this setting in the workspace setting, not the User settings
"pings.commandsForWorkspace": [
{
"label": "README",
"description": "- read me",
"icon": "zap",
"iconColor": "editorBracketHighlight.foreground5",
"command": "openFile",
"arguments": ["README.MD"]
}
]
Example for OS Windows
"pings.configPath": "C:\\Projects\\pings.json"
Early versions of the extension prior to 1.3.0 only supported:
{
"pings.commands": [
{
"label": "README",
"description": " - Important!",
"command": "openFile",
"iconColor": "editorBracketHighlight.foreground6",
"arguments": ["README.MD"]
},
{
"label": "Hosts",
"description": "Windows hosts file",
"command": "openFile",
"arguments": ["C:\\Windows\\System32\\drivers\\etc\\hosts", "external"],
"iconColor": "editorBracketHighlight.foreground5"
}
]
}
Since version 1.4.0 you can also use a simplified version:
[
{
"label": "README",
"description": " - Important!",
"command": "openFile",
"iconColor": "editorBracketHighlight.foreground6",
"arguments": ["README.MD"]
},
{
"label": "Hosts",
"description": "Windows hosts file",
"command": "openFile",
"arguments": ["C:\\Windows\\System32\\drivers\\etc\\hosts", "external"],
"iconColor": "editorBracketHighlight.foreground5"
}
]
Use this setting if you wish to set specific settings for the workspace.
Please note that you need to specify this setting in the workspace setting, not the User settings
Example for OS Windows
"pings.configPathForWorkspace": "C:\\Projects\\Project1\\pingsForMyProject1.json"
Early versions of the extension prior to 1.3.0 only supported:
{
"pings.commands": [
{
"label": "README",
"description": " - Important!",
"command": "openFile",
"iconColor": "editorBracketHighlight.foreground6",
"arguments": ["README.MD"]
},
{
"label": "Hosts",
"description": "Windows hosts file",
"command": "openFile",
"arguments": ["C:\\Windows\\System32\\drivers\\etc\\hosts", "external"],
"iconColor": "editorBracketHighlight.foreground5"
}
]
}
Since version 1.4.0 you can also use a simplified version:
[
{
"label": "README",
"description": " - Important!",
"command": "openFile",
"iconColor": "editorBracketHighlight.foreground6",
"arguments": ["README.MD"]
},
{
"label": "Hosts",
"description": "Windows hosts file",
"command": "openFile",
"arguments": ["C:\\Windows\\System32\\drivers\\etc\\hosts", "external"],
"iconColor": "editorBracketHighlight.foreground5"
}
]
moves the "pings" in the explorer view. This allows you to drag the panel to a different location. Examples are shown in the screenshots.
"pings.explorerView": true
Secondary Side Bar | Bottom Panel |
---|---|
You must set the required parameter label. You can specify description, icon, iconColor.
Find the icon you need here.
The available colors of icon are listed in here.
Examples of colors:
- editorBracketHighlight.foreground1
- editorBracketHighlight.foreground2
- editorBracketHighlight.foreground3
- editorBracketHighlight.foreground4
- editorBracketHighlight.foreground5
- editorBracketHighlight.foreground6
- terminal.ansiBlack: 'Black' ANSI color in the terminal.
- terminal.ansiBlue: 'Blue' ANSI color in the terminal.
- terminal.ansiBrightBlack: 'BrightBlack' ANSI color in the terminal.
- terminal.ansiBrightBlue: 'BrightBlue' ANSI color in the terminal.
- terminal.ansiBrightCyan: 'BrightCyan' ANSI color in the terminal.
- terminal.ansiBrightGreen: 'BrightGreen' ANSI color in the terminal.
- terminal.ansiBrightMagenta: 'BrightMagenta' ANSI color in the terminal.
- terminal.ansiBrightRed: 'BrightRed' ANSI color in the terminal.
- terminal.ansiBrightWhite: 'BrightWhite' ANSI color in the terminal.
- terminal.ansiBrightYellow: 'BrightYellow' ANSI color in the terminal.
- terminal.ansiCyan: 'Cyan' ANSI color in the terminal.
- terminal.ansiGreen: 'Green' ANSI color in the terminal.
- terminal.ansiMagenta: 'Magenta' ANSI color in the terminal.
- terminal.ansiRed: 'Red' ANSI color in the terminal.
- terminal.ansiWhite: 'White' ANSI color in the terminal.
- terminal.ansiYellow: 'Yellow' ANSI color in the terminal.
You can also define your own colors for use in the extension. You need to add to the Visual Studio Code settings:
"workbench.colorCustomizations": {
"pings.myColorGreen": "#006700",
"pings.myColorBlue": "#000067"
},
And in the extension settings specify:
{
"command": "openFile",
"icon": "file",
"iconColor": "pings.myColorGreen",
},
{
"command": "openFile",
"icon": "file",
"iconColor": "pings.myColorBlue",
},
{
"label": "lowercase ➜ UPPER CASE",
"description": "",
"icon": "debug-step-out",
"command": "runCommand",
"arguments": [
"editor.action.transformToUppercase"
]
}
Settings for opening file in project
{
"label": "README",
"description": "- read me",
"command": "openFile",
"arguments": ["README.MD"]
}
Settings for opening file in project
{
"label": "Hosts",
"description": "Windows hosts file",
"command": "openFile",
"arguments": ["C:\\Windows\\System32\\drivers\\etc\\hosts", "external"]
}
Settings for run program
{
"label": "Chrome",
"description": "Run Chrome",
"command": "run",
"arguments": ["start chrome"]
}
{
"label": "Windows",
"description": "",
"command": "run",
"arguments": ["start explorer /n, C:\\Windows"]
}
Settings for open URL
{
"label": "github.com",
"description": "",
"command": "runCommand",
"arguments": ["vscode.open", "https://github.com"],
}
Settings for running arbitrary commands
{
"label": "Zoom In",
"description": "",
"command": "runCommand",
"arguments": ["editor.action.fontZoomIn"],
}
command: workbench.action.findInFiles arguments:
- query?: string;
- isRegex?: boolean;
- triggerSearch?: boolean;
- filesToInclude?: string;
- filesToExclude?: string;
- isCaseSensitive?: boolean;
{
"label": "Find in files",
"description": "",
"command": "runCommand",
"arguments": ["workbench.action.findInFiles", {"query": "SearchPattern", "triggerSearch": true}],
},
Search and insert text by regexp pattern. Searches until the first match.
{
"label": "Replace",
"description": "",
"icon": "find-replace",
"command": "insertNewCode",
"arguments": ["ui/components/tableItem.ts", "<td className=\"col-date-time\">", "<div className=\"new\">NewText</div>", "before"],
}
Search and replace text by regexp pattern. Searches until the first match.
{
"label": "Replace",
"description": "",
"icon": "find-replace",
"command": "insertNewCode",
"arguments": ["ui/components/tableItem.ts", "<td className=\"col-date-time\">", "<div className=\"WOW\"></div>", "replace"]
}
Search and replace text by regexp pattern. Searches all match.
{
"label": "ReplaceAll",
"description": "",
"icon": "find-replace",
"command": "insertNewCode",
"arguments": ["ui/components/tableItem.ts", "<td className=\"col-date-time\">", "<div className=\"WOW\"></div>", "replaceALL"]
}
running multiple commands
{
"label": "Sequence",
"description": " - Running multiple commands",
"icon": "console",
"sequence": [
{
"command": "runCommand",
"arguments": ["workbench.action.terminal.new"]
},
{
"command": "runCommand",
"arguments": ["workbench.action.terminal.focus"]
},
{
"command": "runCommand",
"arguments": [
"workbench.action.terminal.renameWithArg",
{
"name": "New Terminal"
}
]
},
{
"command": "runCommand",
"arguments": [
"workbench.action.terminal.sendSequence",
{
"text": "node -v\nnpm -v\ngit --version\n"
}
]
}
]
}
Copy this snippet of settings into settings.json file (VS Code settings file) to see the extension in action.
"pings.commands": [
{
"label": "README",
"description": " - Important!",
"command": "openFile",
"arguments": ["README.MD"]
},
{
"label": "Hosts",
"description": "Windows hosts file",
"command": "openFile",
"arguments": ["C:\\Windows\\System32\\drivers\\etc\\hosts", "external"]
},
{
"label": "EDIT",
"commands": [
{
"label": "lowercase ➜ UPPER CASE",
"description": "",
"icon": "debug-step-out",
"command": "runCommand",
"arguments": ["editor.action.transformToUppercase"]
},
{
"label": "UPPER CASE ➜ lowercase",
"description": "",
"icon": "debug-step-into",
"command": "runCommand",
"arguments": ["editor.action.transformToLowercase"]
},
{
"label": "var ➜ prop={prop}",
"description": "",
"icon": "symbol-namespace",
"command": "runCommand",
"arguments": [
"editor.action.insertSnippet",
{
"snippet": "$TM_SELECTED_TEXT={$TM_SELECTED_TEXT}"
}
]
}
]
},
{
"label": "Chrome",
"description": "Run Chrome",
"icon": "browser",
"command": "run",
"arguments": ["start chrome"]
},
{
"label": "github.com",
"description": "",
"icon": "link-external",
"command": "runCommand",
"arguments": ["vscode.open", "https://github.com"]
},
{
"label": "Windows folder",
"description": "Open Windows folder",
"icon": "symbol-folder",
"command": "run",
"arguments": ["start explorer /n, C:\\Windows"]
},
{
"label": "Find in files",
"description": "",
"icon": "search",
"command": "runCommand",
"arguments": ["workbench.action.findInFiles", {"query": "SearchPannern", "triggerSearch": true}]
},
{
"label": "Sequence",
"description": " - Running multiple commands",
"icon": "console",
"sequence": [
{
"command": "runCommand",
"arguments": ["workbench.action.terminal.new"]
},
{
"command": "runCommand",
"arguments": ["workbench.action.terminal.focus"]
},
{
"command": "runCommand",
"arguments": [
"workbench.action.terminal.renameWithArg",
{
"name": "New Terminal"
}
]
},
{
"command": "runCommand",
"arguments": [
"workbench.action.terminal.sendSequence",
{
"text": "node -v\nnpm -v\ngit --version\n"
}
]
}
]
},
{
"label": "ZOOM",
"commands": [
{
"label": "Zoom In",
"description": "",
"icon": "zoom-in",
"command": "runCommand",
"arguments": ["editor.action.fontZoomIn"]
},
{
"label": "Zoom Out",
"description": "",
"icon": "zoom-out",
"command": "runCommand",
"arguments": ["editor.action.fontZoomOut"]
}
]
},
{
"label": "Insert",
"description": "",
"icon": "find-replace",
"command": "insertNewCode",
"arguments": ["ui/components/tableItem.ts", "<td className=\"col-date-time\">", "<div className=\"WOW\"></div>", "before"]
},
{
"label": "Replace",
"description": "",
"icon": "find-replace",
"command": "insertNewCode",
"arguments": [
"package.json",
"\"webpack\": \"node --max-old-space-size=4096",
"\"webpack\": \"node --max-old-space-size=8192",
"replace"
]
},
{
"label": "Snippet ➜ console.log(*!!!* ➜)",
"description": "",
"icon": "code",
"command": "runCommand",
"arguments": [
"editor.action.insertSnippet",
{
"snippet": "console.log('***** !!! ***** ${1| ,this.props,this.state,props|} ----->', $1);"
}
]
}
]
https://code.visualstudio.com/api/references/when-clause-contexts https://code.visualstudio.com/api/references/icons-in-labels#icon-listing