Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

Las 10 extensiones de Visual Studio Code imprescindibles para desarrolladores web

La semana pasada os comentábamos cómo sacar partido a la nueva funcionalidad de extensiones de Visual Studio Code.

De momento el número de extensiones disponibles es relativamente pequeño, sobre todo si lo comparamos con las existentes para otros editores como Atom o Sublime, pero van creciendo a buen ritmo.

Hoy os presentamos unas cuantas que, a nuestro juicio, merecen la pena y están ya disponibles. Algunas serán útiles para todo tipo de programadores pero otras están orientadas solamente a desarrollo Web, de ahí el título que hemos escogido.

Seguro que hay alguna que te gusta y no está en la lista. Bueno, en algún momento había que parar ;-) Más adelante, cuando haya nuevas extensiones, y con las que nos vayáis sugiriendo, procuraremos ir ampliando la lista en nuevas recopilaciones.

¡Allá vamos!

1.- CanIUse

de Mahmoud Ali

Esta extensión añade una tecla rápida (CTRL+MAY+I) configurable para consultar rápidamente en CanIUse.com el soporte que tienen los diferentes navegadores de una determinada propiedad CSS, una etiqueta HTML o un gráfico SVG:

CanIUse

 

2.- Yo

de Sam Verschueren

Esta extensión añade la conveniencia de Yeoman directamente en la línea de comandos de Visual Studio Code.

Una vez instalada lo único que tenemos que hacer es pulsar F1 y escribir yo. Saldrá una lista con todos los generadores que tengamos disponibles y podremos generar la estructura completa de un nuevo proyecto en la carpeta que tengamos abierta en Code:

Con esto podremos crear la estructura completa de nuestros proyectos en un instante usando nuestras plantillas preferidas.

3.- JSCS Linting

de Microsoft

JSCS es una conocida herramienta que analiza tu código JavaScript y revisa que se están siguiendo unos determinados estilos de programación a la hora de programar. Esto garantiza claridad en el código y consistencia entre todos los programadores de un equipo, lo cual redunda en mayor calidad y en mayor facilidad de mantenimiento en el futuro.

Antes de poder utilizarlo hay que instalar JSCS usando el gestor de paquetes de NodeJS:

npm install -g jscs

para instalarlo de forma global, y luego ya podemos instalar y empezar a usar la extensión.

Una vez instalado actuará de manera automática mostrándonos avisos en el propio editor cuando encuentre reglas que no se están cumpliendo.

El analizador buscará en el raíz de nuestro proyecto un archivo .jscsrc con la configuración específica de JSCS que queramos utilizar. Indispensable.

Puedes encontrar muchos otros "Linters" como ese para JavaScript y otros muchos lenguajes en una categoría específica del catálogo de extensiones: Linters en Visual Studio Code.

4.- Spelling and Grammar Checker

de Sean McBreen de Microsoft 

Esta útil extensión añade un corrector ortográfico y gramatical a Visual Studio Code, lo cual es de gran interés cuando estamos escribiendo documentación y archivos MarkDown:

Spell-Checker

Por defecto se instala en inglés, pero se puede cambiar el idioma de corrección y escoger entre inglés, español, francés, portugués y alemán, usando el comando Spell Checker: Change Language:

spell-checker-change-language

Se puede configurar por cada proyecto para indicar el idioma a utilizar, las palabras a obviar durante la corrección, y los tipos de archivo sobre los que debe actuar.

Es una pena que no tenga una manera fácil de cambiar el idioma por defecto, ya que si abrimos un archivo que no está atado a un proyecto concreto con su configuración particular, usa la configuración predeterminada y corrige en inglés hasta que le cambiamos el lenguaje de nuevo.

5.- Node Security Project (nsp)

de Adam Baldwin

Interesante para los programadores de aplicaciones web con Node.js. Esta extensión añade un nuevo comando, nsp, que lanza una verificación de tu código contra el inventario de vulnerabilidades de seguridad de Node Security Project.

Súper-útil para tener la seguridad de nuestro proyecto bajo control.

6.- Angular 1.x javaScript and TypeScript Snippets

de John Papa

Esta útil extensión nos permite crear de manera inmediata el código base para crear elementos de AngularJS:

  • Controladores
  • Directivas
  • Factorías
  • Módulos
  • Servicios

Así, basta con escribir por ejemplo ng1controller para que se cree inmediatamente la estructura de un controlador y solo tengamos que rellenar los huecos para tenerlo listo:

John Papa es un conocido experto en desarrollo web que además ha creado una extensión similar para generar componentes y servicios para el estado actual de la próxima versión del framework: AngularJS 2 TypeScript Snippets.

7.- vscode-todo

de Mattias Pernhult

Esta extensión es muy útil para trabajar en los proyectos. Lo que hace es localizar los comentarios marcados con la palabra "TODO" de forma que podamos recordar de manera sencilla cosas pendientes que todavía tenemos que hacer.

Es muy habitual que cuando estamos programando dejemos pequeñas cosas para rematar más tarde, y para no olvidarnos las dejamos marcadas con un comentario del tipo:

//TODO: Refactorizar esto más tarde

Es decir, la palabra "TODO" (pendiente de hacer, en inglés) seguida de dos puntos una breve descripción.

Esta extensión localizará todos esos comentarios y nos permitirá saltar rápidamente a ellos para acabar las tareas pendientes.

8.- Bookmarks

de Alessandro Fragnani.

Esta extensión, como la anterior, es simple pero muy útil: nos permite marcar ciertas líneas en nuestro código y luego saltar rápidamente de unas a otras con unas teclas rápidas. De esta forma, cuando estamos trabajando en varios archivos (o varias partes del miso archivo) a la vez, podemos movernos a toda velocidad entre unas partes y otras sin necesidad de usar el ratón ni soltar el teclado.

bookmarks-commands

De momento solo guarda los bookmarks en la sesión actual, por lo que al cerrar el editor los perdemos, pero está trabajando en una versión nueva que estará lista pronto que soluciona esta inconveniencia y además añadirá vistas previas de las marcas y permitirá decidir qué icono queremos usar para cada una.

Aumento de productividad asegurado.

9.- Searchdocs

de Rob Lourens

Esta pequeña extensión añade dos comandos muy útiles al editor:

  • CTRL+ALT+MAY+S: busca la palabra o palabras seleccionadas en Stack Overflow usando el navegador por defecto.
  • CTRL+ALT+MAY+M: busca la palabra o palabras seleccionadas en la Mozilla Developer Network.

Si no tenemos nada seleccionado abre una pequeña línea de comandos en la que podemos escribir y al pulsar ENTER abre el navegador buscando lo que hayamos introducido en el sitio correspondiente.

De gran utilidad sobre todo para desarrolladores web, ya que nos acelera el proceso de búsqueda de documentación o resolución de problemas.

10.- Encode Decode

de Mitch Denny

Esta extensión es sencilla pero útil en ocasiones puntuales. Se encarga de convertir entre codificaciones, concretamente de:

  • Texto plano a Base64
  • Base64 a texto plano
  • Cadena a array de bytes JSON
  • Base64 a array de bytes JSON
  • Texto plano a resumen digital (hash) de tipo MD5, ya codificado como Base64 para transmitirlo

No la necesitaremos muy a menudo, pero cuando surja la oportunidad agradeceremos tenerla a mano.

José M. Alarcón Aguín Fundador de campusMVP, es ingeniero industrial y especialista en consultoría de empresa. Ha escrito diversos libros, habiendo publicado hasta la fecha cientos de artículos sobre informática e ingeniería en publicaciones especializadas. Microsoft lo ha reconocido como MVP (Most Valuable Professional) en desarrollo web desde el año 2004 hasta la actualidad. Puedes seguirlo en Twitter en @jm_alarcon o leer sus blog técnico o personal. Ver todos los posts de José M. Alarcón Aguín
Archivado en: Desarrollo Web | Herramientas

Boletín campusMVP.es

Solo cosas útiles. Una vez al mes.

🚀 Únete a miles de desarrolladores

DATE DE ALTA

x No me interesa | x Ya soy suscriptor

La mejor formación online para desarrolladores como tú

Comentarios (14) -

Hola,

Buenas recomendaciones! El único cambio sería "Spelling and Grammar Checker" por "Code SpellChecker", ya que el primero está "DEPRECATED"

Responder

José Manuel Alarcón
José Manuel Alarcón

Hola Jorge:

Sí, tienes razón. si te fijas el artículo es de diciembre de 2015. ¡Ya ha llovido! Lo tengo que actualizar. De hecho al Spell Checkar actual que existe y que funciona offline, el soporte para español se lo he añadido yo :-)

Me lo anoto y lo actualizaré pronto.

Saludos y gracias por comentar.

Responder

Cómo está ahora en 2017 el estado del arte para extensiones de Visual Studio Code?

Y extensiones recomendadas en Visual Studio 2012?

Responder

Odnumi Oligav
Odnumi Oligav

Hace poco adopté Visual Studio Code y me parece impresionante.
Lo que me gustaría es encontrar alguna herramienta (no sé cómo se llamará pero seguro que ya existe) que, habiendo seleccionaddo un texto, me lo encierre en un <div> ¿me explico?
Muy buen post a pesar de los añares (en este ambiente envejecemos por segundo...)

Responder

José Manuel Alarcón
José Manuel Alarcón

Hola:

Aquí tienes una extensión que hace precisamente eso:

marketplace.visualstudio.com/items

Saludos.

Responder

Hola cómo estás
Una consulta, una vez qeu selecciono un controller ¿Cómo hago para que navegar por los métodos de ese controller? otros ides muestran otra ventana con todos los métodos.
Muchas gracias
saludos!

Responder

José Manuel Alarcón
José Manuel Alarcón

No sé muy bien a qué te refieres, pero puedes pulsar CTRL+Espacio para mostrar los miembros de una clase, o ALT+F12 para mostrar el código de lo que tengas debajo del cursor, etc...

Aquí tienes un resumen de todos los modos de navegar por código: code.visualstudio.com/docs/editor/editingevolved

Salu2

Responder

Hola, esta interesante, de echo aprendi cosas nuevas, y seguire aprendiendo pues esta interesante vuestro sitio.
Ya le ojeare pues necesito enpezar de nuevo a aprender javascript, hice un curso por encima y veo que no se nada.
Yo queria abrir dos proyectos a la vez en visual studio code, pero cuando doy a abrir una carpete se me cierra la otra
No lo veo por tu esplicacion, quiza lo pase por alto
Como puedo hacer,
Gracias y un saludo

Responder

José Manuel Alarcón
José Manuel Alarcón

Hola:

Ahora mismo esa posibilidad solo está disponible en la rama "no estable" de Visual Studio Code. Es decir, si pruebas versiones próximas, no las actuales, mientras no las sacan. En breve supongo que estará disponible para todo el mundo.

Mientras tanto una cosa que puedes hacer es abrir varias ventanas de VSCode al mismo tiempo. Para ello simplemente usa el menú "Archivo·Nueva ventana" (o CTRL+SHIFT+N en Windows)..

Saludos.

Responder

Hola, ya me respondiste a un tema ke me ayudo.
Tengo un problemilla y por mas que busco, nada.
Hasta hace dos dias podia correr mis proyectos desde Visual Studio code, en la parte inferior derecha habia varias opciones donde se encuentra el numero de lineas, numero de espaios, ... y elegi  "cmd".
Pero eso a desaparecido.
Que he tocado para que desaparecca....??
Un saludo y muchas gracias

Responder

José Manuel Alarcón
José Manuel Alarcón

Hola de nuevo:

Supongo que habrás tocado en el menú "View·Hide status bar" (en español supongo que pondrá "Ver·Ocultar la barra de estado", to lo uso en inglés). Vete al menú "Ver" y dale a la opción que tendrás ahora que pone "Mostrar barra de estado".

Saludos.

Responder

Excelente post, estaría bueno que lo actualizaras al 2019, que estoy seguro que deben haber salido muchas extensiones nuevas. Gracias!

Responder

hola, ayuda... soy nuevo en el uso de VCS. Cual es la extension o combinación de teclas para hacer lo mismo que puedo hacer en Sublime: ej. teniendo este código $loginModel->isLoggedAdmin() al posicionarme con el cursor sobre isLoggedAdmin levanta un hint Definition con todos los lugares donde esté definida esa función y puedo ir a su definición con un click sobre una de las listadas.

Responder

José Manuel Alarcón
José Manuel Alarcón

Hola:

Solo tienes que pulsar F12 para ir a la definición, o ALT+F12 para que te muestre en-línea el código correspondiente de la función debajo del cursor.

Además, por defecto tiene activada la funcionalidad Codelens que te coloca encima de la definición de cualquier función un pequeño enlace con el número de referencias (sitios donde se usa) en el código de tu proyecto. Si pulsas en este enlace te muestra todas esas ubicaciones para saber exactamente dónde se está usando.

Saludos.

Responder

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.