Giters

fharper / vscode-favorites-panel

VSCODE Extension favorites panel

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Version Installs Rating OpenVSX Downloads Stars Forks

Favorites Panel

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

Favorites Panel

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 "favoritesPanel.commands": [] in the Settings(settings.json) You can also place settings in custom files favoritesPanel.configPath

If you want to make specific settings for each workspace, then use favoritesPanel.commandsForWorkspace or favoritesPanel.configPathForWorkspace. in the workspace settings.

The order of loading and displaying the settings:

  • Settings: favoritesPanel.commands
  • Settings: favoritesPanel.commandsForWorkspace
  • Settings: favoritesPanel.configPath: "full_path_to_custom_configuration_file"
  • Settings: favoritesPanel.configPathForWorkspace: "full_path_to_custom_configuration_file"
  • .vscode/favoritesPanel.json in project folder
  • .favoritesPanel.json in project folder
  • favoritesPanel.json in project folder

favoritesPanel.commands

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

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

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

favoritesPanel.configPath

Example for OS Windows

"favoritesPanel.configPath": "C:\\Projects\\favoritesPanel.json"

Early versions of the extension prior to 1.3.0 only supported:

{
    "favoritesPanel.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"
    }
]

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

"favoritesPanel.configPathForWorkspace": "C:\\Projects\\Project1\\favoritesPanelForMyProject1.json"

Early versions of the extension prior to 1.3.0 only supported:

{
    "favoritesPanel.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"
    }
]

favoritesPanel.explorerView

moves the "Favorites Panel" in the explorer view. This allows you to drag the panel to a different location. Examples are shown in the screenshots.

"favoritesPanel.explorerView": true
Secondary Side Bar Bottom Panel
Favorites Panel Favorites 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": {
    "favoritesPanel.myColorGreen": "#006700",
    "favoritesPanel.myColorBlue": "#000067"
},

And in the extension settings specify:

{
    "command": "openFile",
    "icon": "file",
    "iconColor": "favoritesPanel.myColorGreen",
},
{
    "command": "openFile",
    "icon": "file",
    "iconColor": "favoritesPanel.myColorBlue",
},

Examples of using the plugin

Editing code

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

Favorites Panel

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.

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

Release Notes

1.4.1 | 2023/03/30

  • Fixed Error.

More information in the changelog

About

VSCODE Extension favorites panel

License:GNU General Public License v3.0

Languages

Language:TypeScript 100.0%