Criando uma extensão para o VSCode
16797 단어 tutorialtypescriptvscodejavascript
VSCode 확장
Estamos semper usando nosso queridinho VSCode mas nunca pensamos do que ele é feito, como ele roda. Aplicação 미국 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 플러그인
para melhorar seus dias como dev
오 이니시오
//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
텍스트 선택
선택 텍스트의 재미, vscode.window.activeTextEditor.document API의 feita através, Tendo essa variavel, e criado um array, que e preenchido com o valor de cada linha, onde poderá ser feito através de Regex, an analise dessa linha, baseado no retorno de cada linha temos o array que expressa o documento do user do seu 플러그인.
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;
};
이벤트 및 콜백
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 편집기
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);
}
});
});
}
}
});
});
결론
Visto esse post, podemos ver como que é um pouco complicado, mas extremamente recompensador criar essas apis
Reference
이 문제에 관하여(Criando uma extensão para o VSCode), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/grubba/criando-uma-extensao-para-o-vscode-5h1i
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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
//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!');
vscode.window.showInformationMessage('mensagem'); // é o equivalente de um console.log
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;
};
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) {
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);
}
});
});
}
}
});
});
Reference
이 문제에 관하여(Criando uma extensão para o VSCode), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/grubba/criando-uma-extensao-para-o-vscode-5h1i텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)