VSCode Extensions

Estamos sempre usando nosso queridinho VSCode mas nunca pensamos do que ele é feito, como ele roda. A aplicação usa o
JS/TS, em sua engine para que rode e crie esse Navegador que por objetivo tem seu maior foco em ser um editor de
texto, leve e prático, uma dessas belezas dele é a criação de suas extenções/plugins.

    Quando falo de navegador, é sobre como ele roda e como suas API's são acessadas. 
    Vale também sempre ressaltar a importante sobre entender como as engines JS funcionam e iterpretam o código

Vou falar desse script aqui que gera o 'Crazy Spacings'
-> Código no github
vou quebrar ele por quase que linha por linha, de forma que você entenda e possa criar caso necessario os seus plugins
para melhorar seus dias como dev

O Início


//Quando você abre a paleta de comandos do VSCode e escreve o comando que é descrito no market


// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
import { eventNames } from 'process';
import * as vscode from 'vscode';

// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
export function activate(context: vscode.ExtensionContext) {

    // Use the console to output diagnostic information (console.log) and errors (console.error)
    // This line of code will only be executed once when your extension is activated
    console.log('Congratulations, your extension "crazy-spacings" is now active!');
    // The command has been defined in the package.json file
    // Now provide the implementation of the command with registerCommand
    // The commandId parameter must match the command field in package.json
    let disposable = vscode.commands.registerCommand('crazy.start', () => {
        // The code you place here will be executed every time your command is executed
        // Display a message box to the user

        vscode.window.showInformationMessage('Crazy time!');

Quando abrimos o script temos que fazer esse bind, via API vscode.commands.registerCommand -> ao fazer essa linha,
registramos esse comando a ser usado na paleta de comandos, vale ressaltar que a API do vscode é extremamente util e facil de ser entendida.

 vscode.window.showInformationMessage('mensagem'); // é o equivalente de um console.log

Selecionando texto

A função de selecionar texto, é feita através da API de vscode.window.activeTextEditor.document, tendo essa variavel, é criado um array, que é preenchido com o valor de cada linha, onde poderá ser feito através de Regex, a analise dessa linha, baseado no retorno de cada linha temos o array que representa o documento do user do seu plugin.

const textRange = () => {
            const textEditor = vscode.window.activeTextEditor?.document;
            if (!textEditor) {
                return;
            }
            let linesArray: vscode.TextLine[] = [];
            new Array(textEditor.lineCount).fill(0).forEach((el, index) => {
                el = textEditor.lineAt(index);
                linesArray.push(textEditor.lineAt(index));
            });
            const rangeArray = linesArray.map((item, index) => {
                if (item.isEmptyOrWhitespace) {
                    return;
                }
                if (/\S/.test(item.text[1])) {
                    return;
                } else {
                    return new vscode.Range(item.lineNumber, 0, item.lineNumber, item.firstNonWhitespaceCharacterIndex);
                }

            });
            return rangeArray;
        };

Evento e Callbacks

O evento, de alterar texto é feito a chamada da api onDidChangeTextDocument passando o evento como parametro e
no inicio da nossa função de callback, vemos o que recebemos do texto e analisamos ele como um todo e baseado no seus testes poderá ser feito alguma coisa na proxima função

    vscode.workspace.onDidChangeTextDocument(function event(e) {
            const changedText = e.contentChanges[0].text;
            const range = textRange();
            if (!range) {
                return;
            }

        if (/\S/.test(changedText) || e.contentChanges[0].rangeLength !== 0) {

            } else {
                const random = randomSpaceNumber(8);
                const randomAddOrSubstr = randomSpaceNumber(10);
                if (randomAddOrSubstr <= 5) {

API de editar

a api de editar é realmente divertida, mas um pouco complicada, é usado a API de activeEditor.edit, passando o builder como parametro e sendo usado para criar novos dados/ editar os dados que já existem e são usados no proprio editor

vscode.window.activeTextEditor?.edit((editBuilder) => {
                        range.forEach((r) => {
                            if (r !== undefined) {
                                const spacesValue = r.end.character + random;
                                let crazySpaces = ' '.repeat(spacesValue);
                                editBuilder.replace(r, crazySpaces);
                            }
                        });
                    });
                } else {
                    vscode.window.activeTextEditor?.edit((editBuilder) => {
                        range.forEach((r) => {
                            if (r !== undefined) {
                                const spacesValue = r.end.character - random;
                                let crazySpaces = ' '.repeat(spacesValue);
                                editBuilder.replace(r, crazySpaces);
                            }
                        });
                    });
                }
            }
        });

    });

Conclusão

Visto esse post, podemos ver como que é um pouco complicado, mas extremamente recompensador criar essas apis

Blog

Criando uma extensão para o VSCode

Gabriel Grubba