如何在编辑器操作工具栏中添加自定义图标

Question

我想在编辑器操作工具栏上添加一个自定义图标，这将是指命令的链接。当在VSCODE上打开任何文件时，应与文件旁边可见图标。如何添加自定义图标？任何线索都会有用

Answer 1

在package.json中添加您的自定义命令。有关更多详细信息，请查看以下链接：

1. href =“ https://code.visualstudio.com/api/references/extension-guidelines#editor-actions-
2. < a href =“ https://code.visualstudio.com/api/references/contribution-points#contributes.commands” rel =“ nofollow noreferrer”>贡献点

Answer 2

要在此处添加图标，您需要编辑 package.json 文件。只需添加一个命令和菜单贡献点，该点可以说明VSCODE在哪里放置菜单项，

这里有一个答案，该答案具有链接到VS Code API文档，但是该文档已被抽出很大您将放入 package.json 文件中。因此，我将举一个简单的现实世界代码

软件包。JSON

{
    ...
    "contributes": {
        "commands": [
            {
                "command": "My.Custom.Command",
                "title": "Do Something",
                "icon": "$(run)"
            }
        ],
        "menus": {
            "editor/title": [
                {
                    "command": "My.Custom.Command",
                    "group": "navigation",
                    "when": "editorLangId == javascript"
                }
            ]
        }
    }
}

需要两个项目。

• 下的命令贡献.commands 。该命令应具有图标（请参阅产品图标参考）
• 以及何时何地显示命令。要将命令添加到编辑器操作工具栏中，请在 convortes.menus.editor/title 菜单下添加命令。如果您希望它显示为顶级项目，请将组设置为 navigation 。您还可以（并且可能应该）设置子句时设置，以便图标仅在满足某些条件时显示。 （请参阅wher strage reference ）
在示例中，图标将仅在JavaScript文件上显示。如果您在子句时省略，它将始终显示

，当用户单击图标上时，除非您在扩展激活功能中为命令设置处理程序功能，否则它将无能为力。这也意味着您还必须在 package.json.json 文件中设置正确的 activationEvents ，否则将无法设置处理程序。

这是一个简单的扩展程序的完整示例，它可以执行您的要求：

package.json（完整示例），

{
    "name": "my-extension",
    "displayName": "My Custom Extension",
    "description": "Adds a run icon to the top of JavaScript files",
    "version": "1.0.0",
    "main": "extension.js",
    "license": "ISC",
    "engines": {
        "vscode": "^1.82.0"
    },
    "activationEvents": [
        "onLanguage:javascript"
    ],
    "contributes": {
        "commands": [
            {
                "command": "Run.JavaScript.File",
                "title": "Run this file",
                "icon": "$(run)"
            }
        ],
        "menus": {
            "editor/title": [
                {
                    "command": "Run.JavaScript.File",
                    "when": "resourceLangId == javascript",
                    "group": "navigation"
                }
            ]
        }
    }
}

并且由于我在我的 main 设置为 extension.js > package.json 文件，您还需要一个名为 extension.js 的文件。这是一个简单的示例，可以让您启动

Extension.js

// The main extension file
let vscode = require("vscode")
let childProcess = require("child_process")

module.exports = {
    activate: (context) => {

        // Register the command
        context.subscriptions.push(
            vscode.commands.registerCommand(
                // Name of the command as in the package.json file
                "Run.JavaScript.File",

                // A handler function that gets executed when the command is run
                () => {

                    // You can put anything you want in here.
                    // What do you want to happen when the user clicks the button?

                    // Here, I simply run the javascript file in node and
                    // show an information message when it's complete
                    let runner = childProcess.spawn(
                        "node",

                        // This is the path of the current active file
                        // I'm just passing that directly to node
                        [vscode.window.activeTextEditor.document.uri.path]
                    )

                    let out = ""
                    runner.stdout.on("data", (data) => {
                        out += data.toString("utf-8")
                    })
                    runner.on("close", () => {
                        vscode.window.showInformationMessage("Run completed: " + out)
                    })
                }
            )
        )
    }
}