【vscode】vscode插件学习（五）

前言

• 本篇主要写一下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'.
• https://code.visualstudio.com/api/references/vscode-api
• 所以这里传值传github，第三个参数里createIfNone还可以让用户没登录跳出个窗口让其登录。
• scope需要传权限，这个得看github文档：https://docs.github.com/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: `https://api.github.com/user`,
		headers: {
			accept: "application/json",
			Authorization: `token ${accessToken}`,
		},
	});

• 这时返回的个人公开信息基本都有了。主要就是头像姓名邮箱，邮箱如果用户没展示就是null。

环境变量

• 这玩意我找了半天，实际vscode有很多种环境变量，需要区分下。
• 这里所说的环境变量并不是workspace的设置。
• 一般情况，插件激活后，其中一个参数是context，它的类型是ExtensionContext，这个里面就包含了我们要的环境变量ExtensionMode
• 但是这样取环境变量有限制，因为这个context无法不通过激活获取。如果是静态编译成js，那么压根取不到。
• 我还尝试了些cross-env或者export都无效（未使用webpack模板）
• 在.vscode文件夹里，有个文件launch.json，里面可以设置环境变量：

	"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 [commands.registerCommand](#commands.registerCommand).
         */
        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即可。