Visual Studio Code: extensiones imprescindibles para desarrollo web

Visual Studio Code se ha convertido en todo un fenómeno. Ya conocemos más o menos su historia de éxito: un editor de código que apareció en un mercado de elevada competencia y que de la noche a la mañana había desbancado a todos sus competidores. Gran culpa de todo la tiene Microsoft, que ostenta una elevadísima experiencia en el desarrollo de IDEs y que plasmó muy bien su conocimiento para construir un editor ligero y útil para la comunidad.

Podemos utilizar VSCode para muchos tipos de proyectos, pero sin duda es el desarrollo web su entorno más popular. En este post encontrarás las extensiones más útiles y populares para sacar partido a Visual Studio Code en este área.

Live Server

Esta extensión nos ofrece un servidor de desarrollo para ejecutar nuestros proyectos web, con la particularidad de ofrecer un sistema de recarga automática (Live Reload). Cuando la instalamos aparece un control «Go Live» desde donde podemos arrancar el servidor, que es especialmente útil y necesario en proyectos donde usamos Javascript, o simplemente para una maquetación web productiva.

ESLint

Si desarrollamos con Javascript una de las herramientas más útiles es ESLint, un linter que nos permite encontrar problemas en el código Javascript y arreglarlos de manera automática en muchos de los casos. Para poder usarlo necesitas instalar además el linter configurado en el proyecto o bien instalar ESLint de manera global con «npm install -g eslint».

Prettier

Junto con el mencionado ESLint, Prettier forma el tándem esencial de extensiones de VSCode para el desarrollo con Javascript. Esta extensión permite formatear el código Javascript para que se facilite la lectura, pero sobre todo para que los desarrolladores de un proyecto apliquen un mismo estilo en su codificación. Para poder usarlo necesitamos instalar Prettier en el proyecto Javascript donde estamos trabajando, con el comando «npm install prettier».

JavaScript (ES6) code snippets

También para Javascript destacamos esta extensión con algunos de los pack de snippets más útiles. Igual solo usas unos pocos pero una vez te acostumbres a ellos, te serán imprescindibles.

HTML CSS Support

Esta extensión quizás no es tan necesaria, desde el punto de vista de lo completo que es VSCode para el trabajo con HTML y CSS, pero aporta todavía algunas utilidades interesantes a la hora de escribir el código, ya que permite completar los atributos id y class de los tags, teniendo en cuenta el código de las hojas de estilo en cascada que tienes en los archivos CSS enlazados, lo que resulta especialmente útil para las tareas de maquetación.

PHP IntelliSense

Ahora para PHP, en el que encuentras muchas extensiones, pero esta sin duda es la fundamental, porque te aporta mucha velocidad de escritura gracias al «intellisense». Ten en cuenta que necesita tener instalado PHP 7 para funcionar en el editor. Suponemos que en breve se adaptará también para funcionar sobre PHP 8.

Path Intellisense

Otra de las extensiones de VSCode más populares en el marketplace. Esta extensión es muy cómoda para cualquier tipo de lenguaje en el que necesitamos escribir rutas o nombres de archivos, ya que nos permite autocompletarlas, lo que nos ayuda mucho aumentando la productividad, pero sobre todo, evitando que nos equivoquemos al escribir las rutas.

vscode-icons

Acabamos esta selección con vscode-icons, una extensión que si bien no es tan relevante como las anteriores para mejorar la productividad, si que nos permitirá aplicar un poco de alegría al editor, permitiendo aplicar distintos juegos de iconos en el navegador de archivos.

Visual Studio Code tiene una cantidad enorme de extensiones disponibles para casi cualquier lenguaje que nos podamos imaginar. En los siguientes artículos os presentaremos selecciones de extensiones de VSCode más específicas para diversos perfiles de desarrolladores, atendiendo a lenguajes y frameworks populares.

La copia de seguridad que necesitas para tus dispositivos, tus proyectos y tus datos
Accede a tus archivos desde cualquier dispositivo y lugar de forma segura
pack
10 GB
GRATIS
Consigue tu backup ahora