Creación de extensión para Visual Studio Code

 1. Instalación de herramientas
 2. Creación y configuración de la extensión para VS Code
 3. Modificación de archivos extension.ts y package.json
 4. Entregables de la actividad
 5. Modificaciones adicionales
 6. Plataforma

 

1.     Instalación de herramientas

1.1  Instalación de Visual Studio Code

Entramos a la URL https://code.visualstudio.com/ y descargamos VS

 

Guardamos el archivo y luego lo ejecutamos para proceder con la instalación en nuestro computador siguiendo el asistente de instalación.

 

Leemos y aceptamos el Acuerdo de Licencia.

 

Indicamos la ruta donde quedará VS Code, para este ejercicio lo dejamos en la ruta propuesta por defecto.


Al aparecer la selección de tareas adicionales dejamos los valores por defecto sugeridos por la instalación.

 


Se iniciará la instalación, luego se notificará el aviso de finalización de la instalación.

 


Al finalizar la instalación aparecerá la interfaz principal de VS Code.

 

La anterior interfaz nos indica que la instalación quedó completamente instalada.

 

1.2  Instalación de Node.js

Entramos a la URL https://nodejs.org/en/download/current/ y descargamos la última versión disponible de Node.js.

 

Para este ejercicio utilizamos el *.msi de 64-bit, al dar clic sobre esta opción aparece la ventana de descarga, así:

Guardamos el archivo y luego lo ejecutamos para proceder con la instalación en nuestro computador siguiendo el asistente de instalación.

 

 

Leemos y aceptamos el Acuerdo de Licencia. También, seleccionamos la ruta donde quedará la carpeta de Node.js; que para este ejercicio dejaremos la ruta por defecto.


Así mismo dejaremos los valores de configuración por defecto.

 


 

Una vez indicamos que los valores de configuración serán los sugeridos (por defecto) procedemos con la instalación de Node.js.


 

Luego de finalizada la instalación, procedemos a certificar la instalación desde el menú de Windows, en menú se evidencia que aparece Node.js instalado como una aplicación de escritorio, identificado con el siguiente ícono de acceso.


 

Al ejecutar este programa nos muestra la consola de Node.js. Sin embargo, como no trabajaremos con esta consola, salimos de esta dando dos veces Control+c.


 

1.3  Instalación de Yeoman y Generator-code

Para proceder con la instalación de Generator-code, abrimos el editor de comando de Windows (cmd.exe), escribiremos la sentencia npm install -g yo generator-code y luego Enter. Esto hará que se haga la instalación. El comando npm instala de manera global (-g) el comando yo (que no es otra cosa que Yeoman) y el generador generator-code (un generador para Yeoman que sirve para crear el esqueleto inicial de extensiones para VS Code).


 

Una vez ejecutada esta sentencia, aparecerá esta información en el editor de comandos:

 

2.     Creación y configuración de la extensión para VS Code

En este punto creamos el esqueleto del proyecto con Yeoman, con la siguiente sentencia usaré el generador de extensiones para VS Code, la sentencia es: yo code

Al ejecutar la sentencia yo code nos preguntará el tipo de extensión, el nombre de la extensión, el identificador de la extensión y otras preguntas para las cuales daremos las respuestas que se muestran en la siguiente imagen:

 

Estas respuestas deben ser contestadas moviendo las flechas del teclado y dando ENTER por cada pregunta a responder.  Luego de responder las preguntas iniciará la configuración, como se muestra en las imágenes siguientes:

 

3.     Modificación de archivos extension.ts y package.json

3.1  Abriendo la carpeta gapline

Abrimos VS Code y dentro de él abrimos la carpeta gapline con la opción de menú File / Open Folder…


Para este ejercicio la carpeta gapline quedó en la ruta: C:\Users\anuar.castillo\gapline.

3.2  Instalando actualizaciones recomendadas

Al abrir la carpeta gapline, VS Code nos sugiere unas recomendaciones relacionadas con la instalación de actualizaciones, para lo cual le damos la opción Install All. Una vez instaladas estas actualizaciones, cerramos VS Code y volvemos abrir, para lo cual aparecerá la siguiente pantalla


3.3  Modificando el archivo extension.ts

Luego de ingresar nuevamente y abrir la carpeta gapline, nos ubicamos en la carpeta GAPLINE / src en el archivo extension.ts:

En la parte derecha nos aparecerá el siguiente código:

‘use strict’;

// The module ‘vscode’ contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
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 “gapline” 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(‘extension.sayHello’, () => {

        // The code you place here will be executed every time your command is executed

 

        // Display a message box to the user

        vscode.window.showInformationMessage(‘Hello World!’);

    });

 

    context.subscriptions.push(disposable);

}

 

// this method is called when your extension is deactivated

export function deactivate() {

}

Este código lo reemplazamos por el código de la actividad, que es el siguiente:

‘use strict’;
import * as vscode from ‘vscode’;

export function activate(context: vscode.ExtensionContext) {
let disposable = vscode.commands.registerCommand(‘extension.gapline’, () => {
var editor = vscode.window.activeTextEditor;
if (!editor) { return; }
var selection = editor.selection;
var text = editor.document.getText(selection);
vscode.window.showInputBox({ prompt: ‘Lineas?’ }).then(value => {
let numberOfLines = +value;
var textInChunks: Array<string> = [];
text.split(‘\n’).forEach((currentLine: string, lineIndex) => {
textInChunks.push(currentLine);
if ((lineIndex+1) % numberOfLines === 0) textInChunks.push(”);
});
text = textInChunks.join(‘\n’);
editor.edit((editBuilder) => {
var range = new vscode.Range(
selection.start.line, 0,
selection.end.line,
editor.document.lineAt(selection.end.line).text.length
);
editBuilder.replace(range, text);
});
})
});
context.subscriptions.push(disposable);
}

export function deactivate() { }

 

3.4  Modificando el archivo package.json

Nos ubicamos en el archivo package.json:

Del archivo package.json, modificamos el texto inicial:

{

“name”: “gapline”,

“displayName”: “Line Gapper”,

“description”: “Actividad UNIR”,

“version”: “0.0.1”,

“engines”: {

“vscode”: “^1.29.0”

},

“categories”: [

“Other”

],

“activationEvents”: [

“onCommand:extension.sayHello”

],

“main”: “./out/extension”,

“contributes”: {

“commands”: [

{

“command”: “extension.sayHello”,

“title”: “Hello World”

}

]

},

“scripts”: {

“vscode:prepublish”: “npm run compile”,

“compile”: “tsc -p ./”,

“watch”: “tsc -watch -p ./”,

“postinstall”: “node ./node_modules/vscode/bin/install”,

“test”: “npm run compile && node ./node_modules/vscode/bin/test”

},

“devDependencies”: {

“typescript”: “^2.6.1”,

“vscode”: “^1.1.21”,

“tslint”: “^5.8.0”,

“@types/node”: “^8.10.25”,

“@types/mocha”: “^2.2.42”

}

}

Sustituyendo los .sayHello por gapline; el texto final quedó así:

{

“name”: “gapline”,

“displayName”: “Line Gapper”,

“description”: “Actividad UNIR”,

“version”: “0.0.1”,

“engines”: {

“vscode”: “^1.29.0”

},

“categories”: [

“Other”

],

“activationEvents”: [

“onCommand:extension.gapline

],

“main”: “./out/extension”,

“contributes”: {

“commands”: [

{

“command”: “extension.gapline“,

“title”: “GapLine

}

]

},

“scripts”: {

“vscode:prepublish”: “npm run compile”,

“compile”: “tsc -p ./”,

“watch”: “tsc -watch -p ./”,

“postinstall”: “node ./node_modules/vscode/bin/install”,

“test”: “npm run compile && node ./node_modules/vscode/bin/test”

},

“devDependencies”: {

“typescript”: “^2.6.1”,

“vscode”: “^1.1.21”,

“tslint”: “^5.8.0”,

“@types/node”: “^8.10.25”,

“@types/mocha”: “^2.2.42”

}

}

4.     Entregables de la actividad

4.1  Comentar (documentar) el archivo extension.ts

4.2  Pruebas funcionales de la extensión.

Para la prueba funcional de la extensión, nos ubicamos en el archivo extension.ts, le damos F5, aquí se abrirá una nueva ventana de VS Code, abrimos un archivo de texto de prueba, seleccionamos unas líneas de texto dentro del archivo, que para este ejercicio serán las líneas desde la 8 hasta la 26, como lo muestra la imagen y luego le damos el comando CTRL + SHIFT + P, aquí aparecerá la extensión creada (GapLine).

Al seleccionar esta extensión (GapLine), nos aparecerá una nueva ventana con el texto: “¿Cada cuántas líneas poner una línea en blanco?”,

Aquí le digitamos cualquier número, sin embargo, para la prueba funcional, le digitamos el número 2.

Luego de digitar el número 2, cambia el contenido del archivo de ejemplo, tal y como lo muestra la imagen:

Con esto evidenciamos que el texto ahora inicia en la línea 8 pero termina en la línea 36, poniendo una línea en blanco cada dos líneas de texto. Prueba funcional superada.

 

 

5.     Modificaciones adicionales.

Para el correcto funcionamiento de la extensión, realicé los ajustes y/o modificaciones adicionales que describo a continuación.

 

5.1  Cambios en el archivo extension.ts

  1. Se adicionaron corchetes, así:

Antes:

if ((lineIndex+1) % numberOfLines === 0) textInChunks.push(”);

Después:

if ((lineIndex+1) % numberOfLines === 0) { textInChunks.push(”); }

  1. Se adicionó un ; en una sentencia finalización que no lo contenía, así:

Antes:

})

Después:

});

 

5.2 Cambios en el archivo package.json

  1. Complementé corchetes, así:

Antes:

“contributes”: {

“commands”: [

{

“command”: “extension.gapline”,

“title”: “Hello World”

}

]

Después:

“contributes”: {

“commands”: [

{

“command”: “extension.gapline”,

“title”: “GapLine

}

]

 

5.3   Cambios en el archivo tsconfig.json

  1. Adicioné configuración/funcionaldad de strictNullChecks, así:

Antes:

“compilerOptions”: {

“module”: “commonjs”,

“target”: “es6”,

Después:

“compilerOptions”: {

“module”: “commonjs”,

        “strictNullChecks”: false, // modificado afca – agregué esta línea

“target”: “es6”,

 

6.    Plataforma

A continuación, describo la plataforma sobre la cual se realizó esta actividad.