Creación Extensión para Vs Code

Asignatura Datos del alumno Fecha
Computación en el Apellidos: Marquina LLivisaca

24/03/19
Cliente Web Nombre: Edgar Marquina
Trabajo: Creación de una extensión para Visual Studio Code
Objetivos y descripción
 Es crear una extensión para el conocidísimo editor de texto de

Microsoft: Visual Studio Code, donde está extensión va a insertar una
línea en blanco cada N líneas.
Desarrollo de la creación de una extensión para Visual Studio Code
1. Instalamos Visual Studio Code (VS Code), como editor desde su página
oficial 1, como se observa en la imagen 1.
Imagen 1: Página Oficial
2. Instalamos Node (o NodeJS), desde su página oficial 2, Node es un motor

JavaScript para el servidor, a través de su repositorio centralizado de
software: NPM, como se observa en la imagen 2.
© Universidad Internacional de La Rioja (UNIR)
1
Url:https://code.visualstudio.com/#alt-downloads.
2
Url:https://nodejs.org/en/download/current/
Tema 3. Actividades 1
24/03/19
3. Ve a la página de descarga de Node e instala la versión pertinente para tu

sistema operativo, como se observa en la imagen 3.
4. Una vez instalado Node, accedemos a su ubicación donde se aloja NPM,

desde una terminal de comandos “Command Prompt”, como se observa
en la imagen 4.
Imagen 4: Acceso a NPM
24/03/19
5. Para instalar ambos paquetes: “Yeoaman” y “TypeScript”, ejecuta la

siguiente instrucción en un terminal: npm install -g o generator-code
typescript, como se observa en la imagen 5.
Imagen 5: Instalación de Yeoaman y TypeScript
6. Una vez instalado Yeoaman, que no es más que un generador del

esqueleto inicial de extensiones para VS Code, en el cual con la instrucción
“yo code”, le indicando a Yeoman que queremos usar el generador de
extensiones para VS Code (que hemos instalado previamente y el paquete
generator-code). Al ejecutar este comando, Yeoman nos hará varias
preguntas para configurar nuestro proyecto, como se visualiza en la
siguiente imagen 6.
Imagen 6: Instalación de esqueleto del proyecto con Yeoman
24/03/19
7. Todas estas opciones quedan registradas en el fichero package.json,

como se visualiza a continuación, como se visualiza en la imagen 7.
Imagen 7: Fichero package.json.
8. Además, Yeoman, genera una carpeta de trabajo con otros archivos y

subcarpetas, como se visualiza en la imagen 8.
Imagen 8: Carpeta de trabajo
24/03/19
9. A continuación, se ejecuta el VS Code, y se abre la carpeta que contiene

el proyecto “gapLine”, como se visualiza en la imagen 9.
Imagen 9: Carpeta del proyecto.
10. Una vez abierto el proyecto se realizará la modificación del fichero

extension.ts, el de defecto que nos instala Yeoman, por el siguiente código,
teniendo que modificar en la línea 15 que toca cerrar los paréntesis, como
también en la línea 26 poner punto y coma, como se visualiza en la imagen
10.
Imagen 10: Archivo extensión.ts.
24/03/19
11. A continuación, se describe el concepto de las Funciones: “activa”, que

su objetivo es proporcionar a la API a otras extensiones, devolviendo su
contenido público de API desde su llamada de activación, como también
se puede definir que una función “deactivate”, cuyo objetivo es desactivar
a la o todas las extensiones, otras funciones a mencionar son las
siguientes:
 addBreakpoints(breakpoints: Breakpoint[]): void
 registerDebugAdapterDescriptorFDisposable
 registerDebugAdapterTrackerFactory(debugType: string,
factory: DebugAdapterTrackerFactory): Disposable
 actory(debugType: string, factory: DebugAdapterDescrip
torFactory):
 registerDebugConfigurationProvider(debugType: string,
provider: DebugConfigurationProvider): Disposable
 removeBreakpoints(breakpoints: Breakpoint[]): void
 startDebugging(folder: WorkspaceFolder | undefined, na
meOrConfiguration: string | DebugConfiguration): Thena
ble<boolean>
 Event - Eventos. - Los eventos en la API de VS Code, exponen como
funciones a las que llama con una función de escucha para
suscribirse. Las llamadas para suscribirse devuelven un comando
“Disposable”, que elimina el detector de eventos al desechar.
o Por ejemplo: “window.onDidChangeActiveTextEditor”, que es un

evento que se activa cuando el editor de texto está
activo (sustantivo), ha sido cambiado ( onDid ) ( verbo ), otros
eventos son los siguientes:
 onDidChangeActiveDebugSession: Event<DebugSessio
n | undefined>
 onDidChangeBreakpoints: Event<BreakpointsChangeEv
ent>
 onDidReceiveDebugSessionCustomEvent: Event<Debu
gSessionCustomEvent>
 onDidStartDebugSession: Event<DebugSession>
24/03/19
 onDidTerminateDebugSession: Event<DebugSession>
 Disposable - Desechables.- La API de VS Code utiliza el patrón de

disposición3, que es patrón diseñado para la gestión de recursos de VS
Code, aplicando a la escucha de eventos, a los comandos, a la
interacción con la interfaz de usuario y a varias contribuciones de
idiomas.
o Por ejemplo: “setStatusBarMessage(value: string)”, función que

devuelve un “Disposable”, que al llamarlo elimina el mensaje
nuevamente.
 Strict null - Estricta nula. - La API de VS Code, implementa

“strictNullChecks”, para la comprobación de tipos de datos indefinidos
o nulos.
 Debug – Depurar. - Es una funcionalidad de depuración, como los

observa en a continuación:
 activeDebugConsole : DebugConsole
 activeDebugSession : DebugSession | indefinido
 puntos de interrupción : punto de interrupción []
Código interpretado
//Usa el modo estricto de javascript

'use strict';
// Se importa todo desde la librería vscode, y se pone como alias el // nombre [vscode].
import * as vscode from 'vscode';
3
Url: https://en.wikipedia.org/wiki/Dispose_pattern
24/03/19
// Este método se llama cuando su extensión está activa, y se activa --// la primera vez que se ejecuta
el comando.
export function activate(context: vscode.ExtensionContext) {
// Se reasigna la variable "disposable" y se inicializa, como también implementa
// la funcionalidad del comando definido en package.json
let disposable = vscode.commands.registerCommand('extension.gapline', () => {
// Se define una variable "editor", para obtener la instancia de VS Code
// que se está ejecutando actualmente
var editor = vscode.window.activeTextEditor;
// Un condicionante que si editor es false retorna sin hacer nada
if (!editor) { return; }
// Cuando se selecciona el Texto del archivo a ser modificado
var selection = editor.selection;
// Se define la variable para obtener el texto de lo que se seleccionó.
var text = editor.document.getText(selection);
//Se muestra un dialogo, para ingresar el número de líneas,
//para inserta n línea en blanco
vscode.window.showInputBox({ prompt: 'Lineas?' }).then(value => {
// Se reasigna el valor incremental de las líneas a la variable "numberOfLines"
let numberOfLines = +value;
// Se crea una variable y se le asigna un Arreglo de cadenas de texto
var textInChunks: Array<string> = [];
//Se utiliza la función "split", para obtener dentro de un bucle
//cada una de las lineas, separadas por un salto de líneas '\n'
text.split('\n').forEach((currentLine: string, lineIndex) => {
//Agrega la línea actual al arreglo textInChunks
textInChunks.push(currentLine);
//Verifica si la posición actual corresponde al número de lineas,
//si cumple ingresa un texto vacío al arreglo
if ((lineIndex+1) % numberOfLines === 0) { textInChunks.push(''); }
});
//Junta cada registro del arreglo en un solo texto con un salto de línea
text = textInChunks.join('\n');
//Se edita o modifica el texto seleccionado
editor.edit((editBuilder) => {
// Se crea un rango y se asigna a una variable

var range = new vscode.Range(
// Número inicial de línea y columna
selection.start.line, 0,
// Número final de línea
selection.end.line,
24/03/19
// Número final de columna del texto seleccionado con su tamaño

editor.document.lineAt(selection.end.line).text.length
);
// Remplazo todo el texto que está en el rango, con el nuevo texto
editBuilder.replace(range, text);
});
});
});
//Agrega a una lista de desechables que se eliminan cuando la extensión está desactivada.
context.subscriptions.push(disposable);
}
// Este método se llama cuando su extensión está desactivada
export function deactivate() { }
12. Como también toca agregar a la configuración del archivo tsconfig.json, la

opción “strict” marcar como “false”. Si no estuviera hay que añadirla, con
el objetivo de deshabilitar todas las opciones estrictas de comprobación de
tipo, también se debe agregar la parametrización del chequeo estricto de
valores nulos en "compilerOptions": { "strictNullChecks": false } , como se
visualiza en la imagen 11.
Imagen 11: Archivo tsconfig.json.
13. A continuación, se procede con la configuración del archivo

“package.json”, en el cual el campo contributes -> commands -> title, los
24/03/19
cuales se crearon con el generador de Yeoman, considerando que cuando

se ejecute el programa o la extensión desde “Paletas de comando”, o
Ctrl+Shift+P, se deberá llamar por el “Title”, que en este caso es “Trabajo
3”, como se visualiza en la imagen 12.
Imagen 12: Archivo package.json modificación.
14. Para ejecutar el programa, se dirige al menú en la opción Debug->Star

Debugging o F5, como se visualiza en la imagen 13.
Imagen 13: Ejecutar programa.
24/03/19
15. A continuación, se nos presenta la siguiente pantalla donde vamos a abrir

un archivo cualquier de testo, desde algún lugar de nuestra computadora,
dicho archivo contiene cuatro líneas las cuales, van a ser afectadas e
insertadas unas líneas en blanco cada N líneas, según el número que se
ingrese en el dialogo del presente programa, como se visualiza en las
imágenes 14 y 15.
Imagen 14: Archivo a modificar.
Imagen 15: Abrir el archivo a modificar.
16. Una vez abierto el archivo, se nos visualiza en pantalla, las líneas que
contiene el archivo, a continuación, se presiona Ctrl+Shift+P, para

seleccionar el nombre “Trabajo 3, de la extensión que previamente
habíamos configurado en: contributes -> commands -> title en el fichero
package.json, como se visualiza en la imagen 16.
24/03/19
Imagen 16: Seleccionar la extensión a ejecutar.
17. Una vez que seleccionamos el nombre de la extensión, se nos presenta

un nuevo cuadro de diálogo preguntándote cada cuántas líneas quieres
insertar: una línea en blanco (o el texto que hayas puesto en la propiedad
prompt del código anterior). Selecciona un número apropiado y pulsa intro.
Verás cómo el texto seleccionado es sustituido por uno nuevo, pero que
contiene líneas en blanco, como se visualiza en la imagen 17 y 18.
Imagen 17: Ingreso de número de líneas.

Imagen 17: Archivo modificado/Resultado Esperado

Creación Extensión para Vs Code

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Creación Extensión para Vs Code

Caricato da

Copyright:

Formati disponibili

Asignatura Datos del alumno Fecha

Computación en el Apellidos: Marquina LLivisaca

Trabajo: Creación de una extensión para Visual Studio Code

 Es crear una extensión para el conocidísimo editor de texto de

Desarrollo de la creación de una extensión para Visual Studio Code

Imagen 1: Página Oficial

2. Instalamos Node (o NodeJS), desde su página oficial 2, Node es un motor

Imagen 2: Página Oficial

3. Ve a la página de descarga de Node e instala la versión pertinente para tu

Imagen 3: Página Oficial

4. Una vez instalado Node, accedemos a su ubicación donde se aloja NPM,

Imagen 4: Acceso a NPM

5. Para instalar ambos paquetes: “Yeoaman” y “TypeScript”, ejecuta la

Imagen 5: Instalación de Yeoaman y TypeScript

6. Una vez instalado Yeoaman, que no es más que un generador del

Imagen 6: Instalación de esqueleto del proyecto con Yeoman

7. Todas estas opciones quedan registradas en el fichero package.json,

Imagen 7: Fichero package.json.

8. Además, Yeoman, genera una carpeta de trabajo con otros archivos y

Imagen 8: Carpeta de trabajo

9. A continuación, se ejecuta el VS Code, y se abre la carpeta que contiene

Imagen 9: Carpeta del proyecto.

10. Una vez abierto el proyecto se realizará la modificación del fichero

Imagen 10: Archivo extensión.ts.

11. A continuación, se describe el concepto de las Funciones: “activa”, que

o Por ejemplo: “window.onDidChangeActiveTextEditor”, que es un

 Disposable - Desechables.- La API de VS Code utiliza el patrón de

o Por ejemplo: “setStatusBarMessage(value: string)”, función que

 Strict null - Estricta nula. - La API de VS Code, implementa

 Debug – Depurar. - Es una funcionalidad de depuración, como los

//Usa el modo estricto de javascript

// Se crea un rango y se asigna a una variable

// Número final de columna del texto seleccionado con su tamaño

12. Como también toca agregar a la configuración del archivo tsconfig.json, la

Imagen 11: Archivo tsconfig.json.

13. A continuación, se procede con la configuración del archivo

cuales se crearon con el generador de Yeoman, considerando que cuando

Imagen 12: Archivo package.json modificación.

14. Para ejecutar el programa, se dirige al menú en la opción Debug->Star

Imagen 13: Ejecutar programa.

15. A continuación, se nos presenta la siguiente pantalla donde vamos a abrir

Imagen 14: Archivo a modificar.

Imagen 15: Abrir el archivo a modificar.

contiene el archivo, a continuación, se presiona Ctrl+Shift+P, para

Imagen 16: Seleccionar la extensión a ejecutar.

17. Una vez que seleccionamos el nombre de la extensión, se nos presenta

Imagen 17: Ingreso de número de líneas.

Imagen 17: Archivo modificado/Resultado Esperado

Potrebbero piacerti anche