Extensiones en VSCode

Publish date:

El editor de texto de Visual Studio denominado VS Code que fue lanzado en 2015. Es un software libre con licencia del MIT y nació como uno más a sumarse a otros editores altamente conocidos como Atom o Sublime Text, pero en estos últimos meses, y con sus continuas actualizaciones, se está convirtiendo en un potente […]

El editor de texto de Visual Studio denominado VS Code que fue lanzado en 2015. Es un software libre con licencia del MIT y nació como uno más a sumarse a otros editores altamente conocidos como Atom o Sublime Text, pero en estos últimos meses, y con sus continuas actualizaciones, se está convirtiendo en un potente editor de texto que además está disponible para los principales sistemas operativos (Windows, Mac and Linux).

Pero, ¿por qué ese éxito? En mi opinión, se justifica por varias razones, entre las que se encuentran las opciones de personalización, que nos permiten adaptar el editor de texto al lenguaje o entorno de desarrollo que tengamos que usar. Es aquí donde aparecen las extensiones como utilidad para dicha personalización del editor de texto y acercarlo más a un IDE que a un simple editor de texto.

Las extensiones son el medio para añadir personalizaciones, funcionalidades, ayudas, nuevos lenguajes, etc a VS Code. Una de sus ventajas es intentar mantener ligero el editor y así customizarlo solo para el entorno o lenguaje de desarrollo que estemos usando.

Trabajar con las extensiones en VS Code es muy sencillo, el propio editor agrupa dentro de una de sus opciones toda la funcionalidad relacionada. En ese apartado incorpora una caja de texto para escribir y hacer búsquedas de extensiones. También nos mostrará las extensiones instaladas y recomendaciones que el editor crea oportuno. Este último punto es muy interesante, ya que según vayas trabajando y editando diferentes archivos en ocasiones te recomendará extensiones que él crea oportunas para el lenguaje que estas usando o tipo de fichero.

Cada vez que encuentres una extensión si la seleccionas en la parte del editor mostrará información de dicha extensión, información sobre al autor, descripción de la misma, valoración, número de descargas, incluso videos demostrativos en algunos casos.

Además ofrece las siguientes opciones: buscar actualizaciones, deshabilitar extensiones o la posibilidad de instalación desde un fichero VSIX. Los ficheros VSIX son usados para empaquetar el código de las extensiones y subirlas al market del VS Code.

Para instalarlas basta con ejecutar en la terminal del editor, un simple comando como el siguiente:

code –install-extension abusaidm.html-snippets

Con el comando code –list-extensions podemos tener listas las extensiones instaladas.

Actualmente el número de extensiones disponible es abrumador, si bien es cierto que hay extensiones genéricas aunque la mayoría están dirigidas a temas de apariencia del editor. Si se hace una búsqueda rápida por Internet encontramos listas con las que son las extensiones más populares o recomendadas.

A continuación detallo agunas de las que uso yo y que algunas se pueden localizar en las listas indicadas anteriormente.

  • PATH Intellisense christian-kohler.path-intellisense. Extensión para ayudar con los nombres de los ficheros
  • VSCode-todo MattiasPernhult.vscode-todo. Extensión para trabajar más intuitiva con los TODOs
  • Visual Studio Team Services ms-vsts.team. Extensión propia de Microsoft para poder trabajar con Team Services y Team Foundation Server
  • VSCode icons robertohuertasm.vscode-icons. Extensión que refleja iconos identificativos a las carpetas y documentos para su fácil localización.
  • Settings Sync Shan.code-settings-sync. Extensión que sincroniza en un repositorio archivos de configuración, extensiones instaladas, etc.
  • SpellChecker swyphcosmo.spellchecker. Extensión autocorrector de lo que escribimos.
  • Code Runner formulahendry.code-runner. Ayuda a ejecutar diferentes lenguajes en VSCode
  • Intellisense for CSS class names Zignd.html-css-class-completion. Ayuda a escribir los identificadores de CSS en el código HTML
  • Html wrap bradgashler.htmltagwrap. Extensión que permite encerrar texto seleccionado dentro de cualquier tag HTML
  • AutoClose tag formulahendry.auto-close-tag. Extensión que crea automáticamente el tag de cierre.
  • Open in browser coderfee.open-html-in-browser. Deja previsualizar documento HTML en Firefox, google Chrome e IE.
  • ESLint dbaeumer.vscode-eslint. Extensión que ayuda a establecer reglas a la hora de codificar ES
  • TSLint eg2.tslint. Extensión que ayuda a establecer reglas a la hora de codificar ES
  • JSCS Linting ms-vscode.jscs. Extensión para poner warnings en el código para ayudar a mantenerlo más limpio y en orden.
  • TypeScript Hero rbbit.typescript-hero. Extensión para ayudar a la hora de escribir código en TypeScript
  • AutoImport steoates.autoimport. Extensión que ayuda a escribir los import en los ficheros
  • Angular Switcher infinity1207.angular2-switcher. Extensión que facilita la navegación entre diferentes documentos.
  • Angular v5 Snippets johnpapa.Angular2. Extensión que ayuda a escribir código, con autocompletado.
  • Language support for Java redhat.java. Extensión para dar soporte a proyectos de Java desde Eclipse
  • Java Extension Pack (incluye la anterior redhat.java) vscjava.vscode-java-pack. Extensión para añadir soporte a Java en VSCode, instala automáticamente la anterior.
  • Debugger for Java vscjava.vscode-java-debug. Extensión que añade soporte para depurar proyectos Java
  • Java Test Runner vscjava.vscode-java-test. Extensión para poder ejecutar test de Java
  • Python ms-python.python. Extensión para dar soporte al lenguaje de Python en VSCode
  • C# ms-vscode.csharp. Extensión para dar soporte de C# en VSCode
  • NPM Intellisense christian-kohler.npm-intellisense. Extensión para autocompletar módulos NPM en imports
  • NPM support for VSCode eg2.vscode-npm-script. Extensión para añadir soporte NPM en VSCode
  • NPM Commands for VSCode fknop.vscode-npm. Extensión para instalar scripts y validar los módulos instalados y sus dependencias

Debemos tener en cuenta que estas son algunas pero cada día hay mayor número de extensiones en el market de visual studio code. También me gustaría resaltar que algunas pueden perder soporte, si el creador no las continúa manteniendo.

Mi consejo es buscar e instalar las que veamos más convenientes, dependiendo del proyecto a desarrollar.

Para más información sobre las extensiones:
Galería de Extensiones

Instalación de extensiones desde el Market vía web:
Market vía web

Como hacer publicaciones propias en el market:
Publicar Extensiones

Documentación general sobre VSCode:
VSCode info

Post relacionados

digital marketing

SEO y SEM, una alianza ganadora

Carlos Mora de la Cruz
Date icon 21 Agosto, 2018
Collaboration

Los bancos y FinTechs colaboran a través de diferentes enfoques de participación

Elias Ghanem
Date icon 9 Agosto, 2018

Each collaboration uniquely satisfies the specific needs of its participants and is built on...

asistentes voz

Personalidad para los asistentes emocionales

Puchades Ruiz, Consuelo
Date icon 27 Julio, 2018

El diseño de la personalidad de un asistente debe apoyarse en la investigación. Hay que...

cookies.

Si continúas navegando en esta página, aceptas el uso de cookies

Para obtener más información y para cambiar la configuración de las cookies en tu ordenador, por favor lee nuestra política de privacidad

Cerrar

Cerrar información sobre cookies