VSCodeExtension开发的踩坑记录

VSCodeExtension环境搭建

最近在捣鼓VSCode插件，作为一名后端工程师写这个工具有些不习惯，踩了几个坑记录一下。在开发之前需要看官方文档：

1. https://code.visualstudio.com/api/get-started/your-first-extension

2. https://github.com/microsoft/vscode-extension-samples/tree/main/helloworld-sample

就在Windows下安装相关依赖并开发组件就好，比较方便，插件也是跨平台的。

主要是两个命令：

1. npm install -g yo generator-code // 如果没有安装node.js则需要装一下

2. yo code //脚手架新建一个插件工程

坑1. Command xxx not found

按照脚手架的提示完成后，应该能创建好第一个最最简单的vscode插件，按下F5弹出一个新界面再按ctrl+shift+P 输入你的插件名称，找到运行即可。但是，这时可能会报错Command xxx not found.

那么很可能是依赖没有安装，在工程的terminal里执行 npm install 安装依赖，如下图所示：

如果npm install 命令执行不了则运行命令修改执行策略：Set-ExecutionPolicy RemoteSigned -Scope CurrentUser 然后再执行npm install.

坑2. 在extension.ts页面下按F5运行

这个在修改代码后经常会忘记。刚开始我不在extension.ts页面下按F5就会报错，或者同时打开多个文件时也会报错。后来发现是因为打开的文件有错误。

按F5运行扩展时，除了打开extension.ts文件外也可以同时打开多个文件，如果必须把其他文件关掉才能运行则说明其他文件有问题(红线标识)需要优化。

坑3. ContributesPoints Configuration

这个的作用就是可以在vscode的 Preference-->setings.json里面配置插件，不用写死在代码里。贡献点是您在软件包的贡献领域中发表的一组JSON声明。贡献点要扩展代码中的多种功能，例如认证、菜单、语言、配置、颜色等等。这里记录一下配置的用法。

在扩展的核心配置文件package.json中定义configuration,如下所示：

"configuration": {
	"title": "MyExtension",
	"properties": {
		"MyExtension.gitUrl": {
			"type": "string",
			"default": "git@11.2.3.4:Cloud/demo.git",
			"description": "The Git URL used by the extension."
		},
		"MyExtension.gitBranch": {
			"type": "string",
			"default": "main",
			"description": "The Git branch used by the extension."				
		}		
	}
}

那么对应的在settings.json中要像如下定义：

"MyExtension.gitUrl": "git_url": "git@172.18.8.210:leaf/tree.git",
"MyExtension.gitBranch": "master",
  

这种格式看起来有点散，可以这样定义(注意object类型！)：

"configuration": {
            "title": "MyExtension",
            "properties": {
                "MyExtension": {
                    "type": "object",                    
                    "description": "The extension configuration used by the extension.",
                    "properties": {
                        "git_url": {
                            "type": "string",
                            "default": "git@172.18.8.210:CloudExplorer/java-demo.git",
                            "description": "Git repository URL used by the extension."
                        },
                        "git_tag": {
                            "type": "string",
                            "default": "v1.0.0",
                            "description": "Git tag used by the extension."
                        }
                    }
                }
            }
        }

那么对应在settings.json中的定义格式就如下所示：

"MyExtension": {
        "git_url": "git@172.18.8.210:leaf/tree.git",
        "git_tag": "v1.0.0",        
    }

可以更加需求选择定义格式。

另外，查看settings.json文件时，如果关于你的插件的部分代码是灰色的，说明插件没有激活，可以按下F5后在弹出的窗口查看它的settings.json，就会看到这部分代码是高亮的，这个弹出的窗口加载了你正在开发的插件。

最后，settings.json的右上角有个转换图标，点击可以转换成settings UI格式 。