【vscode】vscode插件学习（五）

时间：2025-01-25 20:24:21

前言

  • 本篇主要写一下github登录，环境变量，codelens这几个功能。

github登录

  • vscode本身是可以进行github登录的，所以一般只要借助它已经拿到的账户信息去做就行了。
  • 翻阅文档，可以发现其本身自带2个账号登录，一个是github，一个是microsoft:
    Currently, there are only two authentication providers that are contributed from built in extensions to VS Code that implement GitHub and Microsoft authentication: their providerId's are 'github' and 'microsoft'.
  • /api/references/vscode-api
  • 所以这里传值传github，第三个参数里createIfNone还可以让用户没登录跳出个窗口让其登录。
  • scope需要传权限，这个得看github文档：/en/free-pro-team@latest/developers/apps/scopes-for-oauth-apps
  • 如果是登录状态，那么我们就可以拿到account和token:
	const { account, accessToken } = await vscode.authentication.getSession(
		"github",
		["user:email"],
		{
			createIfNone: true,
		}
	);
  • 比如我的account里是有2个一个是label，一个是id。
  • 需要更详细公开信息可以用token去获取：
const { data } = await axios({
		method: "get",
		url: `/user`,
		headers: {
			accept: "application/json",
			Authorization: `token ${accessToken}`,
		},
	});
  • 这时返回的个人公开信息基本都有了。主要就是头像姓名邮箱，邮箱如果用户没展示就是null。

环境变量

  • 这玩意我找了半天，实际vscode有很多种环境变量，需要区分下。
  • 这里所说的环境变量并不是workspace的设置。
  • 一般情况，插件激活后，其中一个参数是context，它的类型是ExtensionContext，这个里面就包含了我们要的环境变量ExtensionMode
  • 但是这样取环境变量有限制，因为这个context无法不通过激活获取。如果是静态编译成js，那么压根取不到。
  • 我还尝试了些cross-env或者export都无效（未使用webpack模板）
  • 在.vscode文件夹里，有个文件，里面可以设置环境变量：
	"configurations": [
		{
			"name": "Run Extension",
			"type": "extensionHost",
			"request": "launch",
			"args": ["--extensionDevelopmentPath=${workspaceFolder}"],
			"env": {
				"NODE_ENV": "development"
			},
			"outFiles": ["${workspaceFolder}/out/**/*.js"],
			"preLaunchTask": "${defaultBuildTask}"
		},
  • 此时在编译时，就可以拿到环境变量了。
  • 由于打包时并没有运行调试器，所以打包后的NODE_ENV就是undefined。

Codelens

  • codelens是一个超酷的功能，它可以在指定的文件行上增加按钮触发命令。
  export class CodeLens {
        /**
         * The range in which this code lens is valid. Should only span a single line.
         */
        range: Range;

        /**
         * The command this code lens represents.
         */
        command?: Command;

        /**
         * `true` when there is a command associated.
         */
        readonly isResolved: boolean;

        /**
         * Creates a new code lens object.
         *
         * @param range The range to which this code lens applies.
         * @param command The command associated to this code lens.
         */
        constructor(range: Range, command?: Command);
    }
  • 其中，range就是vscode的range，command就是commad类，包含：
    export interface Command {
        /**
         * Title of the command, like `save`.
         */
        title: string;

        /**
         * The identifier of the actual command handler.
         * @see [](#).
         */
        command: string;

        /**
         * A tooltip for the command, when represented in the UI.
         */
        tooltip?: string;

        /**
         * Arguments that the command handler should be
         * invoked with.
         */
        arguments?: any[];
    }
  • codelensProvider用来容纳codelens，需要实现其provideCodeLenses方法
  • 而provider按照vscode的套路是要注册的，就像前面treeprovider需要注册到treedataprovider上。
  • codelensprovider需要注册到language的某种文件上。
  • 我们以在文件中最后一行插入infobox为例：
  • 首先需要制作provider与codelen，我们在provider里插入2个codelen并且植入文件的最后一行。
export class CustomCodeLensProvider implements vscode.CodeLensProvider {
	public provideCodeLenses(
		document: vscode.TextDocument
	): vscode.ProviderResult<vscode.CodeLens[]> {
		let codeLensLine: number = document.lineCount - 1;

		const range: vscode.Range = new vscode.Range(
			codeLensLine,
			0,
			codeLensLine,
			0
		);
		const codeLens: vscode.CodeLens[] = [];

		codeLens.push(
			new vscode.CodeLens(range, {
				title: "hello1",
				command: "showmessage",
				arguments: [document],
			})
		);

		codeLens.push(
			new vscode.CodeLens(range, {
				title: "hello2",
				command: "showmessage",
				arguments: [document],
			})
		);
		return codeLens;
	}
}
  • 接着，进行注册provider，使其能在文件中显示：
const codelenprovider = new CustomCodeLensProvider();
	vscode.languages.registerCodeLensProvider(
		{ scheme: "file" },
		codelenprovider
	);
  • 触发的showmessage就很简单弹个hello就行了：
	const showmessage = vscode.commands.registerCommand("showmessage", () => {
		vscode.window.showInformationMessage("hello");
	});
  • 这样，所有文件就会有codelens，如果有需要可以自行在创建codelens进行判断，如果不满足要求则不生成codelens即可。

相关文章