IronWoods.es

Desarrollo web

Blog / Editores / Visual Studio Code - Extensiones fundamentales 2020

Mi listado de extensiones fundamentales para trabajar con el editor Visual Studio Code.

Configuración editor

Peacock, John Papa

Permite personalizar el color de fondo del editor para cada proyecto. Útil para diferenciar las ventanas si tienes varios proyectos abiertos al mismo tiempo.

Sublime Text Keymap and Settings Importer, Microsoft

Como su nombre indica, importa combinaciones de teclas de SublimeText, para los que venimos de o seguimos usando este editor.

Extensiones genéricas

Auto-Align, bladnman

Permite alinear el fragmento de código seleccionado.

imagen de ejemplo de CSS alineado

Configuración de combinación de teclas, como por ejemplo ctrl + alt + a (después de la instalación):

  • 1. Clic sobre el icono de configuración del editor (rueda dentada abajo-izquierda)
  • 2. Seleccionar Keyboard Shortcuts
  • 3. Escribir en el campo de búsqueda: align
  • 4. Clic sobre el icono del lápiz de Auto-Align / extension.autoalign
  • 5. Pulsar la combinación de teclas deseada seguida de Enter

Cuando seleccionemos la combinación de teclas se nos indica si otros comandos la utilizan, debemos evitar combinaciones que ya estén en uso.

Code Spell Checker, Street Side Software

Señala las palabras que estas escribiendo incorrectamente en inglés.

Pueden instalarse otros idiomas.

Markdown Preview Github Styling, Matt Bierner

Visualiza ficheros Markdown como los "README.md" en Github.

Prettify JSON, Mohsen Azimi

Permite "embellecer" o hacer más legible el código JSON.

Partiendo de un JSON "en bruto", seleccionar todo, cortar y volver a pegar para que la extensión haga su trabajo.

Sort lines, Daniel Imms

Con varias opciones de ordenación de líneas mediante comandos.

Seleccionando y pulsando F9 se ordena ascendentemente.

TODO Highlight, Wayou Liu

Resalta en color las palabras indicadas tanto en el texto o código que estemos visualizando como en la barra de scroll vertical.

Añadiremos las palabras y colores en nuestra configuración de usuario. Adjunto aquí la mía, que resultará en:

palabras y colores configurados para TODO Highlight
Todo Tree, Gruntfuggly

Permite localizar las anotaciones de tipo TODO del proyecto, destacándolos dentro del código y a partir de un listado.

ejemplo de uso de Todo Tree

Por defecto localiza las etiquetas TODO y FIXME, pero se pueden configurar más palabras y otras muchas opciones, p.e. añadiendo al fichero de configuración general:

            "todo-tree.general.tags":[
                "BUG",
                "FAQ",
                "FIXME",
                "HACK",
                "NOBUG",
                "REVIEW",
                "TODO"
            ],
                
WakaTime, ¿cuánto tiempo pasas programando?

WakaTime es una aplicación para medir el tiempo de trabajo, en lenguajes y proyectos.

Se integra en VS Code y otros editores, como Sublime, mediante una extensión y funciona en modo silencioso.

Git

Git Graph, mhutchie
captura de uso de Git Graph

Añade a la integración con Git del editor un gráfico de las ramas del repositorio y permite consultar detalles del histórico.

Git History, Don Jayamanne
captura de uso de Git History

Complementa la integración con Git del editor y permite revisar con facilidad el histórico de cambios.

Maquetación: HTML / CSS

Auto Rename Tag, Jun Han

Renombra el tag de cierre HTML al tiempo que reescribimos el de apertura.

HTML TagWrap, Brad Gashler

Permite generar un tag HTML alrededor del texto seleccionado o la posición del puntero del ratón mediante la combinación de teclas alt + W.

IntelliSense for CSS class names in HTML, Zignd

Autocompletado de clases CSS en el HTML a partir de los estilos del espacio de trabajo y hojas enlazadas en elementos link.

Live Sass Compiler, Ritwick Dey

Herramienta para maquetar en vivo con SASS.

Compila SASS a CSS y refresca "en vivo" la ventana del navegador después de guardar cambios en el código HTML o SASS.

Live Server, Ritwick Dey

Herramienta para maquetar en vivo.

Refresca automáticamente la ventana del navegador después de guardar los cambios en el HTML / CSS.

Programación JavaScript / TypeScript

ES7 React/Redux/GraphQL/React-Native snippets, dsznajder

Extensión para el desarrollo con React / Redux / GraphQL en JS/TS con sintaxis ES7.

Quokka.js, Wallaby.js

Herramienta de prototipado rápido para JavaScript / TypeScript. Los valores de la ejecución se actualizan y muestran junto al código según se escribe.

VSCode TSLint, Microsoft

Integra el TypeScript TSLint Language Service Plugin para trabajar con TypeScript.

Programación PHP / Laravel

Laravel Blade Spacer, Austen Cameron

Genera automáticamente espacios a los lados al abrir llaves en Blade.

Laravel Blade, Christian Howe

Resalta la sintaxis de Laravel Blade.

PHP Intelephense, Ben Mewburn

Conjunto de características esenciales para el desarrollo PHP.

  • Resalta elementos sin use: sentencias use, variables, etc.
  • Auto-importado de dependencias. Añade (algunas) sentencias use en las cabeceras de los ficheros cuando escribimos las clases.
  • Permite acceder directamente a la definición de las clases usadas en el fichero actual.
  • Autocompletado de código.
Yet Another PHPUnit, Danilo Polani

Yet Another PHPUnit permite ejecutar test unitarios a nivel de método o clase muy fácilmente, basta clicar el enlace que se muestra sobre la declaración de la clase o el método.

25-08-2018 (actualizado 02-05-2021)