En este tutorial aprenderas a crear una extension muy sencilla de Visual Studio Code para que puedas tener una idea de como se crean y que necesitas saber para poder crear otras más elaboradas.

Requerimientos

Asegúrate de tener instalado Visual Studio Code, Node.js y npm en tu ordenador. Si no los tienes instalados, puedes descargarlos e instalarlos desde los siguientes enlaces:

Crea un nuevo proyecto

Para poder crear extensiont Visual Studio Code ya provee un generator de proyectos a traves de un programa llamado Yeoman, este es un CLI o programa de consola que creara todos los archivos necesarios, para no empezar desde cero.

Primero necesitas instalar Yeoman, usando el siguiente comando:

npm install -g yo generator-code

Tu primer extension de VSCode

Luego de instalado yeoma ejecuta lo siguiente para crear un proyecto:

yo code

Este comando creara una plantilla para tu extensión de Visual Studio Code y te hace algunas preguntas para configurar tu proyecto, como el nombre y la descripción de la extensión.

Y como hay muchas cosas que podemso hacer en el editor como:

  • Themes, para crear temas para el editor
  • Soporte de lenguajes, para añadir un nuevo lenguaje
  • Snippets, para generar porciones de codigo
  • Shortcuts, para crear atajos de teclado
  • Extension Packs, para juntar multiples extensiones en una sola

En nuestro caso empezaremos creando Snippets, que es algo que muchos desarrolladores puede utilizar en su dia a dia.

Snippets

Ahora vamos a crear un primer snippet en vscode

yo code

ejecuta lo siguiente: 

? What type of extension do you want to create? New Code Snippets
? Folder name for import or none for new: <EMPTY>
? What's the name of your extension? first-vscode-snippet
? What's the identifier of your extension? (first-vscode-snippet)
? What's the description of your extension? my first snippet
? Language id: html
? Initialize a git repository? (Y/n) No

❯ Open with `code`

en contrbutes, podras ver los snippets que soporta, de esta forma podemos añadir más tambien para otros lenguajes:

 "contributes": {
    "snippets": [
      {
        "language": "html",
        "path": "./snippets/snippets.code-snippets"
      }
    ]
  }

Por ejemplo podriamos hacer algo como esto:

  "contributes": {
    "snippets": [
      {
        "language": "html",
        "path": "./snippets/snippets.code-snippets"
      },
      {
        "language": "javascript",
        "path": "./snippets/snippets.code-snippets"
      },
      {
        "language": "typescript",
        "path": "./snippets/snippets.code-snippets"
      },
      {
        "language": "typescriptreact",
        "path": "./snippets/snippets.code-snippets"
      },
      {
        "language": "javascriptreact",
        "path": "./snippets/snippets.code-snippets"
      }
    ]
  }

Pero para nuestro caso solo dejaremos el de html para tener algo simple, es decir lo mantendremos tal y como estaba, asi:

  "contributes": {
    "snippets": [
      {
        "language": "html",
        "path": "./snippets/snippets.code-snippets"
      }
    ]
  }

en snippets/snippets.code-snippets

{
  "generate heading": {
    "prefix": "!fheading",
    "body": [
       "<!---",
        "title: $1",
        "description: $2",
        "--->",
        "",
        "<div>",
        "  <h1>$1</h1>",
        "  <p>$2</p>",
        "</div>"
    ]
  }
}

Presiona F5, y en un archivo html ejecuta el snippet "!fheading" admeas tambien puedes presionar Tab paa autocompletar

Creemos una extension

Ahora vamos a crear una extension de vscode que nos permita ejecutar logica dentro del editor.

Escoge Lo siguiente: 

# ? What type of extension do you want to create? New Extension (Javascript)
# ? What's the name of your extension? HelloWorld
### Press <Enter> to choose default for all options below ###

# ? What's the identifier of your extension? helloworld
# ? What's the description of your extension? LEAVE BLANK
# ? Initialize a git repository? Yes
# ? Bundle the source code with webpack? No
# ? Which package manager to use? npm

# ? Do you want to open the new folder with Visual Studio Code? Open with `code`

Luego, dentro del editor, presiona F5. Esto compilará y ejecutará la extensión en una nueva ventana del host de desarrollo de extensiones.

Hagamos Cambios

  • Cambia el mensaje de "¡Hola mundo de HelloWorld!" a "Hello VS Code" en extension.ts (o extension.js, si estas usando javascript)
vscode.window.showInformationMessage('Hello World from vscode!');
  • Ejecute Developer: Reload Window en la nueva ventana.
  • Ejecute el comando Hello World nuevamente.

CReemos un comando nuevo

    let disposable = vscode.commands.registerCommand('first-vscode-extension.helloWorld', () => {
        vscode.window.showInformationMessage('Hello World from first-vscode-extension!');
    });

    let sayGoodBye = vscode.commands.registerCommand('first-vscode-extension.sayGoodBye', () => {
        vscode.window.showInformationMessage('God bye from first-vscode-extension!');
    });

    context.subscriptions.push(disposable);
    context.subscriptions.push(sayGoodBye);
contributes:

  "contributes": {
    "commands": [
      {
        "command": "first-vscode-extension.helloWorld",
        "title": "Hello World"
      },
      {
        "command": "first-vscode-extension.sayGoodBye",
        "title": "Good Bye"
      }
    ]
  },

Sidebar

añade esto en package.json

{
  "contributes": {
    "viewsContainers": {
      "activitybar": [
        {
          "id": "package-explorer",
          "title": "Package Explorer",
          "icon": "resources/package-explorer.svg"
        }
      ]
    },
    "views": {
      "package-explorer": [
        {
          "id": "package-dependencies",
          "name": "Dependencies"
        },
        {
          "id": "package-outline",
          "name": "Outline"
        }
      ]
    }
  }
}

Más Recursos