Desarrollo Web con VS Code 📝

Desarrollo Web con VS Code 📝

Cuál es el mejor editor de texto para el desarollo web? Esta es una de las preguntas más frecuentes que podras ver en muchos grupos y foros de programadores, y casi siempre la respuesta menciona a algunos de los editores favoritos y más populares de hoy en día, como: Sublime , Atom, Notepad++ y VS Code. La realidad es que cada uno de estos editores tienes sus ventajas y desventajas; cada herramienta sera tan buena o mala segun el uso que le des o que tan familiarizado te encuentres con ella.

En lo personal, despues de haber probado algunos de los principales editores por algun tiempo, mi favorito hasta la fecha ha sido Visual Studio Code debido a su flexibilidad y variada libreria de extensiones. No tratare de convercerte de que es el mejor editor, sino que quiero mostrarte algunos de los plugins que me han sido de mucha utilidad para desarrollar paginas y applicaciones web y que te puede llegar a facilitar tu flujo de trabajo.

Javascript Code Snippets

D23D401C-E20B-4E0A-8D89-EFF8552A4122.png

Esta extension por Charalampos Karypidis te facilita mucho la escritura de Javascript usando fragmentos de codigos con la sintaxis de ECMAScript 6. No solo funciona con archivos con archivos de tipo Javascript sino que tambien con Typescript y JSXT.

Prettier

F9FD1FBE-1685-4FF0-AF70-53B33BD47FCD.png

Esta es sin duda una de mis extensiones favoritas. Se encarga de formatear tu codigo y hacerlo un poco mas legible, eliminando espacios, parentesis o corchetes innecesarios. Tambien aplica tabulaciones y rompe tu código en multiple lineas cuando las sentencias son muy largas. En general ayuda a hacer tu código mas legible.

Bracket Pair Colorizer

24D0E7C4-2DB6-42C3-B37B-AB361D990003.png

A veces son los pequeños detalles los que pueden llegar a tener un gran impacto en tu flujo de trabajo, y este es una de las extensiones que pareciera ser sencilla pero te puede llegar a ahorrar mucho tiempo. Esta añade colores a cada par de parentesis y corchetes permitiendo distinguir facilmente que framentos de codigos se encuentra anidados, o donde comienza y donde termina una función o metodo.

Live server

CCBB9851-296E-4E34-B51A-AE4F92478DB4.png

Si eres desarrollador PHP sabes lo tedioso que puede llegar a ser tener que configurar un servidor entero solo para probar una aplicación sencilla y tener que estar refrescando la pestaña del navegador cada vez que realizas un cambio. Live Server te permite probar tus archivos PHP en localhost si necesidad de tener que montar un servidor y lo mejor de todo es que cada vez que realizas un cambio en tu codigo la pestaña se refresca automaticamente.

##Path Intellisense 8ABF0A5F-EF40-4AC6-AA6D-E1DA99EC530F.png

Una de las cosas más inconvenientes cuando estas trabajando en un proyecto web con multiple directorios es tener que estar recordando el nombre de los archivos y la estructura del proyecto. Esta extension te ayuda con esta tarea, ya que cuando necesitas imporar un archivo, imagen o cualquier otro recurso te permitira autocompletar el nombre de cada folder.

Estas son algunas de mis extensionas favoritas pero no son las unicas que existen hay miles por descubrir. Asi que si tienes una que no se encuentra en esta lista pero que te gustaria que otros conociera enviamela a contact@kervin.tech y con gusto la agregare. Y si aun no has probado VS Code te animo a que lo hagas.