Las 10 mejores extensiones de VS Code de 2018 para desarrolladores front-end

Visual Studio Code probablemente se pueda llamar el mejor editor de código moderno. Si aún no está trabajando con él, entonces al menos debería mirarlo. Se han escrito una gran cantidad de extensiones para VS Code que se colocan en el directorio de Marketplace , cuyo acceso conveniente está organizado desde el propio editor.

Existen extensiones para depurar y formatear código, extensiones que hacen que sea más fácil trabajar con varias plataformas (como Heroku, GitHub, Docker, Azure) y tecnologías. En Marketplace puede encontrar temas para el editor, linter, herramientas para facilitar la entrada de fragmentos de código repetidos y mucho más.



El autor del material, cuya traducción publicamos hoy, ha seleccionado las 10 mejores extensiones de código VS, destinadas principalmente a aquellos que se dedican al desarrollo front-end, es decir, funciona con HTML, CSS, JavaScript y varios marcos web.

Información preliminar

Si no ha trabajado con VS Code antes, pero desea probar este editor, puede descargarlo aquí . Pero, si está interesado, un material en el que se demuestran sus capacidades.

Después de descargar e instalar VS Code, abra el panel de extensiones.


Panel de extensión

Luego, usando el campo de búsqueda, encuentre la extensión que le interesa, estudie la información al respecto y, si decide que la necesita, instálela. Las herramientas de búsqueda de extensiones se parecen a la imagen a continuación.


Buscar extensiones para VS Code en Marketplace

Ahora hablemos de extensiones.

Servidor en vivo

Extensión de servidor en vivo

Esta maravillosa extensión está diseñada para crear un servidor local, utilizado durante el desarrollo para alojar páginas estáticas y dinámicas en él. Después de instalar esta extensión, el botón Go Live aparecerá en la barra de tareas, lo que le permite iniciar el servidor. Al presionar este botón mientras se edita una página HTML, se abrirá en un navegador. El servidor admite la recarga de páginas interactivas, que se realiza después de realizar cambios en el código y guardar los archivos correspondientes.

Compilador sass en vivo

Extensión del compilador Live Sass

Esta extensión, interactivamente, compila archivos SCSS en archivos CSS. Esto se hace muy rápido. Puede iniciar una vista previa de los resultados de la aplicación de estilos compilados en un navegador utilizando el botón Watch my sass en la barra de tareas. Esta extensión, como acabamos de comentar, admite la recarga interactiva de materiales.

Fragmentos de código Javascript (ES6)

Fragmentos de código de extensión de Javascript (ES6)

Esta extensión es notable porque tiene más de 2 millones de descargas y, aparentemente, su popularidad solo está creciendo con el tiempo. Proporciona al desarrollador construcciones de software (fragmentos) adecuadas para su uso en los siguientes tipos de archivos:

• TypeScript (.ts)
• Reacción de JavaScript (.jsx)
• TypeScript React (.tsx)
• HTML (.html)
• Vue (.vue)

NPM

Extensión NPM

Esta es la extensión oficial de Node Package Manager (npm) para VS Code. Facilita el trabajo con el archivo package.json. En particular, muestra advertencias sobre las dependencias reflejadas en el archivo, pero no instaladas, así como aquellas que están instaladas pero que no están registradas en package.json. Ayuda a identificar paquetes cuyas versiones no cumplen con las reglas especificadas en package.json, y proporciona al desarrollador herramientas convenientes para ejecutar comandos npm.

ESLint

Extensión ESLint

Esta extensión proporciona capacidades de enlace para archivos .js y .jsx. Es configurable y permite un formato de código uniforme. ESLint, con sus casi 12 millones de descargas, puede llamarse una de las extensiones más populares para VS Code.

Más bonita

Extensión más bonita

Esta extensión muy popular cuenta con casi cuatro millones de descargas. Ayuda a formatear el código JavaScript, lo que permite mantener una base de código uniforme y mejora la legibilidad de los programas. Hay una extensión similar en Marketplace, Beautify, también bastante popular.

CSS Peek

Extensión CSS Peek

Esta útil extensión es útil cuando se trabaja con el diseño de la página, identificando y derivando, basándose en nombres de clase e identificadores de elementos, estilos aplicados a ellos. Ayuda a ahorrar tiempo al eliminar la necesidad de que el desarrollador cambie constantemente entre archivos HTML y CSS. Por supuesto, tales tareas pueden resolverse visualizando los archivos apropiados en modo de pantalla dividida, pero no a todos les gusta trabajar en este estilo.

6 fragmentos angulares

Extensión angular de 6 fragmentos

Esta es la extensión oficial que ofrece fragmentos de desarrolladores para Angular 6. El código correspondiente sigue la guía de estilo Angular; el uso de esta extensión acelera el proceso de desarrollo de proyectos de Angular, en particular, debido a la finalización del código. Es compatible con TypeScript, sintaxis de trabajador de servicio, RxJS, ngRx e incluso material angular. Si está desarrollando aplicaciones angulares en VS Code y aún no está usando esta extensión, entonces definitivamente debería echarle un vistazo.

Vetur

Extensión Vetur

Esta es la extensión oficial de Vue.js para VS Code con una impresionante cantidad de descargas, de las cuales tiene más de 5 millones. Su objetivo es facilitar el desarrollo de aplicaciones Vue.js. Vetur puede verificar el código en busca de errores, admite autocompletar y fragmentos.

Depurador para Chrome

Depurador para la extensión de Chrome

Esta es la extensión oficial para VS Code, diseñada para depurar código JS usando Google Chrome. Actualmente es una de las extensiones de código VS más utilizadas.

Resumen

Examinamos solo una docena de extensiones para VS Code, pero de hecho hay muchas. Es muy posible que cuando examine el catálogo de Marketplace, encuentre algo allí que le parezca mucho más útil que las extensiones que se analizaron. Sin embargo, la mayoría de ellos pueden ser de gran ayuda para cualquier desarrollador front-end. Esperamos que te sean útiles también.

Si está interesado en el tema de las extensiones para VS Code, este es otro de nuestros materiales sobre ellas, centrado en los desarrolladores de JS. Al publicar ese material, les preguntamos a los lectores qué extensiones usan. Luego resultó que esto es Code Outline, Todo Tree y GitHub. Hoy, queridos lectores, queremos hacerle la misma pregunta. ¿Qué extensiones para VS Code te gustan?