8 potentes extensiones de código de Visual Studio para desarrolladores front-end

Aunque Microsoft lanzó la primera versión estable de Visual Studio Code, su potente editor de código hace solo unos meses, para marzo de 2016, ya tiene muchas extensiones disponibles que pueden llevar la experiencia de codificación al siguiente nivel. los Extensiones oficiales de código de Visual Studio están alojados en el Visual Studio Code Marketplace, muchos de los cuales pueden ser de gran ayuda para los desarrolladores web.

Para esta publicación, probé un montón de extensiones de código VS relacionadas con el desarrollo de aplicaciones para usuario e hice una lista de las que encontré más intuitivo, fácil de usar y conveniente. No es una lista definitiva por todos. Tómese el tiempo de navegar por el mercado por sí mismo y vea qué más puede ofrecerle, especialmente porque muchas grandes extensiones aún están por venir..

Cómo instalar extensiones de código VS

Instalar una extensión es bastante sencillo en Visual Studio Code, ya que puedes hazlo dentro del editor de código. En VS Code Marketplace, cada extensión tiene su propia página, y puede encontrar el comando con el que puede instalar la extensión dada en la parte superior de esta página..

El comando siempre comienza con el ext instala término. Para instalar una extensión, simplemente prensa CTRL + P Dentro de VS Code para iniciar el panel de apertura rápida, copiar y pegar este comando en ella, y finalmente reinicie el editor de código para hacer funcionar la nueva extensión.

8 potentes extensiones de código de Visual Studio

1. Fragmentos de HTML

   Si desea escribir HTML con frecuencia en Visual Studio Code, la extensión HTML Snippets puede ser una herramienta útil, ya que agrega soporte elaborado para HTML. Aunque VS Code tiene soporte básico para HTML, como color de sintaxis, La extensión HTML Snippets sabe mucho más..

   

   Probablemente la característica más útil de esta extensión es que Cuando empiezas a escribir el nombre de una etiqueta HTML (sin el corchete angular inicial), HTML Snippets rápidamente muestra una lista de las opciones disponibles con una breve información sobre cada.

   

   Cuando hace clic en el elemento que necesita, HTML Snippets agrega la etiqueta HTML5 completa con sus propiedades más comunes. Por ejemplo, si desea agregar un enlace (etiqueta de anclaje) a su documento, simplemente escriba un una en VS Code, elija la opción correcta en el cuadro emergente y HTML Snippets insertará la información necesaria. Accede a tu editor sin ningún problema..

   El autor de esta extensión también presta atención a eliminar elementos obsoletos, por lo que si desea utilizar una etiqueta HTML que no puede encontrar en la lista emergente, vale la pena comprobar si sigue siendo válida o no.

2. HTML CSS Clase completada

   HTML CSS Class Completion puede ser una extensión útil si necesita usar muchos Clases de CSS en tu proyecto Con frecuencia nos pasa a los desarrolladores, que somos no completamente seguro en el nombre exacto de una clase, pero simplemente se sienta en el fondo de nuestra mente como conocimiento pasivo.

   Esta extensión inteligente da una solución para este problema, ya que Obtiene los nombres de todas las clases de CSS. en el espacio de trabajo actual, y muestra una lista de ellos.

   

   Supongamos que desea crear un sitio utilizando Zurb Foundation y desea utilizar la cuadrícula pequeña. No recuerdas cómo se nombran exactamente las clases, pero sabes que tienen nombres semánticos.

   Con HTML CSS Class Completion solo debes comenzar a escribir la palabra pequeña, y las opciones disponibles aparecen en su pantalla a la vez, para que pueda seleccionar fácilmente la que necesita.

   

3. Ver en el navegador

   View in Browser es una extensión simple pero poderosa para Visual Studio Code. Puede facilitar el desarrollo frontal al permitirle Eche un vistazo rápido al resultado de su trabajo en el navegador mientras codifica. Puede abrir su archivo HTML en su navegador predeterminado directamente desde VS Code presionando la tecla CTRL + F1 atajo de teclado.

   Tenga en cuenta que ver en el navegador solo soporta HTML, así que si quieres ver tu sitio necesitas tener el archivo HTML abierto. Tú no se puede acceder directamente al navegador desde un archivo CSS o JavaScript.

   

4. Depurador para Chrome

   El depurador para Chrome fue creado por Microsoft, y actualmente es la cuarta extensión de Visual Studio Code que se descarga con más frecuencia.

   El depurador para Chrome hace posible depura JavaScript en Google Chrome sin salir del editor de código. Esto significa que no necesita trabajar con el JavaScript transpilado que ve el navegador, pero puede Realice la depuración desde los archivos fuente originales.. Vea esta demostración para ver cómo funciona..

   

   La extensión tiene todas las funciones que un depurador necesita, como ajuste de punto de interrupción, observación variable, pasos, una consola de depuración práctica, y muchos otros (ver la lista de características del primer lanzamiento).

   Para usar esta extensión necesitas iniciar Chrome con depuración remota habilitada, y establecer una adecuada launch.json expediente. Esto último puede llevar un tiempo, pero puede encontrar instrucciones detalladas en GitHub sobre cómo hacerlo correctamente..

5. JSHint

   La extensión JSHint de Visual Studio Code integra el popular JSHint JavaScript en el editor de código, por lo que puede Manténgase informado de sus errores tan pronto como los cometa.. De forma predeterminada, la extensión JSHint utiliza las opciones predeterminadas de la impresora que puede personalizar con la ayuda de un archivo de configuración..

   

   El uso de esta extensión es bastante sencillo, ya que JSHint marca los errores con rojo y las notificaciones con un subrayado verde. Si desea obtener más información sobre los problemas, solo pase el cursor sobre las partes subrayadas y JSHint hará flotar una etiqueta con la descripción del problema a la vez..

   

6. Fragmentos de código de jQuery

   Los fragmentos de código de jQuery pueden acelerar enormemente el desarrollo de aplicaciones para usuario en Visual Studio Code, ya que le permite escribir rápidamente jQuery sin errores básicos de sintaxis. Fragmentos de código de jQuery actualmente tiene alrededor 130 fragmentos disponibles puedes invocar escribiendo el gatillo derecho.

   

   Todos los fragmentos de jQuery, pero uno comienza con el jq prefijo. La única excepción es la función desencadenar eso inserta una función anónima en el editor.

   Esta práctica extensión es una ayuda útil cuando no está completamente seguro de la sintaxis adecuada y desea ahorrar tiempo para consultar la documentación. También facilita el desplazamiento rápido a través de las opciones disponibles.

   

7. Cenador

   La extensión Bower VS Code puede hacer que su flujo de trabajo de desarrollo web sea más intuitivo al integrar el administrador de paquetes Bower en Visual Studio Code.

   Si pones esta extensión en uso tu No es necesario cambiar entre el terminal y el editor, pero puede realizar fácilmente las tareas de administración de paquetes dentro de Visual Studio Code.

   

   La extensión Bower te guía a través de la creación de tus proyectos. Bower.json archivo, y también puede instalar, desinstalar, buscar, actualizar paquetes, administrar el caché y realizar muchas otras tareas con él (consulte la lista completa de características).

   Usted puede acceder a los comandos relacionados con Bower iniciando la paleta de comandos presionando F1, mecanografía “Cenador” en la barra de entrada, haciendo clic en el “Cenador” en la lista desplegable que aparece, y seleccionando el comando Bower apropiado.

   

8. Historia de Git

   La historia de Git hace posible siga los cambios de un proyecto Git dentro de Visual Studio Code. Esta extensión es especialmente útil cuando desea contribuir a un proyecto Github más grande, y necesita una manera de revisar rápidamente las modificaciones que otros desarrolladores hicieron.

   Con la extensión Git History instalada puedes ver la historia de un archivo completo, o un linea particular dentro de ella Tú también puedes comparar versiones anteriores del mismo archivo.

   

   Puede acceder a los comandos relacionados con el historial de Git si escribe la palabra “Git” en la paleta de comandos (F1), escoger “Git” dentro de la lista desplegable, y finalmente seleccione el comando que necesita. Tenga en cuenta que necesitas abrir el archivo del cual desea ver el historial antes de poder realizar cualquier acción en él.