Расширения VSCode
Мы постоянно используем наш любимый VSCode, но никогда не задумываемся о том, из чего он сделан, как он работает. Приложение использует
JS/TS, в своем движке для запуска и создания этого браузера, который по своей цели имеет основной акцент на то, чтобы быть легким и практичным
текстовый редактор, легкий и практичный, одной из его прелестей является создание своих расширений/плагинов.
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
Здесь я расскажу о скрипте, который генерирует сумасшедшие расстояния
-> Код на github
Я разложу его почти построчно, чтобы вы могли понять и при необходимости создать свои собственные плагины
чтобы улучшить ваши дни разработки
Начало
//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!');
Когда мы открываем скрипт, мы должны сделать эту привязку, через API vscode.commands.registerCommand ->, выполнив эту строку,
мы регистрируем эту команду для использования в командной палитре, стоит отметить, что vscode API чрезвычайно полезен и прост для понимания.
vscode.window.showInformationMessage('mensagem'); // é o equivalente de um console.log
Выбор текста
Функция выделения текста осуществляется через API vscode.window.activeTextEditor.document. С помощью этой переменной создается массив, который заполняется значением каждой строки, где анализ может быть выполнен через Regex, на основе возврата каждой строки мы имеем массив, который представляет документ пользователя.
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;
};
События и обратные вызовы
Событие, чтобы изменить текст, выполняется вызовом api onDidChangeTextDocument, передавая событие в качестве параметра и
в начале нашей функции обратного вызова мы видим, что мы получили из текста, анализируем его в целом и на основе ваших тестов что-то можно сделать в следующей функции
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
edit api действительно интересный, но немного сложный, он использует activeEditor.edit API, передавая билдер в качестве параметра и используется для создания новых данных/редактирования существующих, которые используются в самом редакторе.
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);
}
});
});
}
}
});
});
Заключение
Посмотрев этот пост, мы видим, что создание таких apis немного сложно, но чрезвычайно полезно.