ThemeIcon ids

Pings

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).

Features

• 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

Extension Settings

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

"pings.commands": [
    {
        "label": "README",
        "description": "- read me",
        "icon": "zap",
        "iconColor": "editorBracketHighlight.foreground5",
        "command": "openFile",
        "arguments": ["README.MD"]
    }
]

pings.commandsForWorkspace

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"]
    }
]

pings.configPath

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"
    }
]

pings.configPathForWorkspace

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"
    }
]

pings.explorerView

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

Displayed command settings

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",
},

Examples of using the plugin

Editing code

{
    "label": "lowercase ➜ UPPER CASE",
    "description": "",
    "icon": "debug-step-out",
    "command": "runCommand",
    "arguments": [
        "editor.action.transformToUppercase"
    ]
}

Opening file

File in project

Settings for opening file in project

{
    "label": "README",
    "description": "- read me",
    "command": "openFile",
    "arguments": ["README.MD"]
}

File is out project

Settings for opening file in project

    {
      "label": "Hosts",
      "description": "Windows hosts file",
      "command": "openFile",
      "arguments": ["C:\\Windows\\System32\\drivers\\etc\\hosts", "external"]
    }

Run program

Settings for run program

Run Chrome in OS Windows

    {
      "label": "Chrome",
      "description": "Run Chrome",
      "command": "run",
      "arguments": ["start chrome"]
    }

Open folder in OS Windows

    {
      "label": "Windows",
      "description": "",
      "command": "run",
      "arguments": ["start explorer /n, C:\\Windows"]
    }

Open URL

Settings for open URL

    {
      "label": "github.com",
      "description": "",
      "command": "runCommand",
      "arguments": ["vscode.open", "https://github.com"],
    }

Run Command

Settings for running arbitrary commands

{
  "label": "Zoom In",
  "description": "",
  "command": "runCommand",
  "arguments": ["editor.action.fontZoomIn"],
}

Open Search panel

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}],
},

Insert text

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"],
}

Replace text

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"]
}

Replace All text

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"]
}

Sequence

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"
                }
            ]
        }
    ]
}

Settings for example:

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);"
            }
        ]
    }
]

References

https://code.visualstudio.com/api/references/when-clause-contexts https://code.visualstudio.com/api/references/icons-in-labels#icon-listing