Extensiones muy útiles de Visual Studio Code para Desarrollo Web

Gabriela Perez
Cocoa Web Studio
Published in
5 min readOct 3, 2019
extensions VSC

Visual Studio Code, Es un editor de código abierto de Microsoft gratuito muy completo, adaptable, multiplataforma, está basado en Etectron y proviene de Atom. En la actualidad existen muchos editores de código, pero Visual Studio Code es uno de los más sobresalientes, posee características innovadoras bastante útiles ya incorporadas, entre las más relevantes están Emmet, una terminal, soporte para Git, depurador de código, un excelente buscador, entre otros. No cabe duda que ha logrado desplazar a muchos editores de código favoritos por los desarrolladores, esto se debe a que la evolución de este editor no se detiene porque constantemente se realizan actualizaciones.

Visual Studio Code

Es muy sencillo instalar plugins, pues tiene incorporado una sección de extensiones donde puedes hacer la búsqueda de plugins que necesites y con solo un clic se instala en el editor.

Los atributos más destacados son:

· Meet IntelliSense: Permite el autocompletado de la sintaxis basándose en el código que hayamos escrito anteriormente. Funciona para casi todos los lenguajes de programación.

· Print Statement Debugging: Ayuda en la depuración de código, a través de un botón donde podemos ir depurando como si se estuviese ejecutando en el inspector de elementos del navegador.

· Git Commands Built-in: Es una integración que nos permite crear repositorios, crear commits, navegar entre las branchs, entre otras.

Te mostraremos las mejores extensiones de Visual Studio Code que no puedes dejar de probar.

Cada día existen muchos programadores que trabajan en la creación de excelentes extensiones, las cuales permiten darle a Visual Studio Code un aspecto más agradable, haciendo que el escribir código sea más ágil.

Dirígete al marketplace de Visual Studio Code y que empiece la diversión.

extensiones-vsc

· Hay muchísimos temas para personalizar Visual Studio Code, puedes usar cualquiera que sea de tu preferencia, te recomendamos algunos de estos Panda Theme, AYU, blackai-theme (tema oscuro elegante).

icon themes vsc

· Project Manager: Te permitirá abrir más de una carpeta de trabajo en una misma ventana de Visual Studio Code.

icon project manager

· Color Highlight: Si trabajas mucho con css este plugins es ideal porque te resalta los colores por encima del código hexadecimal (#) y “rgba” además de mostrarte un cuadrado con el color.

example
icon Color highlight

· Babel ES6/ES7: Si trabajas mucho con JavaScript, te servirá para resaltar todas las funcionalidades y novedades que tenga ES6, ES7 y ES8, según tu sintaxis de color.

icon Babel ES6/ES7

· EditorConfig for VS Code: A través de un fichero .editorconfig le transmites reglas de sintaxis al proyecto, ideal si trabajas en un equipo, si todos tienen el plugins instalado y el fichero en el proyecto tendrás las mismas reglas de sintaxis.

example
icon EditorConfig for VS Code

· ESLint: Con un fichero .eslintrc.js tienes tanto reglas de sintaxis como para que marque errores o warnings, debe ir configurado con el comando con el que corre el proyecto.

icon ESLint

· Prettier- JavaScript formatter: Te permite escribir código como quieras sin preocuparte por la indentación y lo que hará es autoindentarte el código y ordenarlo con las reglas establecidas en tu editor config.

icon Prettier- JavaScript formatter

· vscode-icons: Te permite detectar cada fichero con el icono correspondiente, así podrás visualizar y diferencias mejor con que archivo estas trabajando y será más fácil la ubicación de algún archivo.

icon vscode-icons

· npm: Si trabajas con node o JavaScript en general, este plugin te permite instalar desde la línea de comando de VSC comandos de install, run script, etc.

example
icon npm

· npm Intellisense: Si ya tienes instalada la dependencia de node_modules este plugin hace que cuando vayas a requerir alguna de sus librerías en tu proyecto te la pre visualiza.

example
icon npm Intellisense

· Vetur: Si estas usando Vuejs para hacer tus proyectos web, este plugin es buenísimo, ya que te dará algunos snippet de código y te resaltará ficheros de tipo vue.

icon Vetur

· TODO Highlight: Si eres de los programadores que les gusta comentar su código con comentarios tipo TODO, pones listas de lo que quieres hacer o trabajas en equipo este plugin es ideal porque te permite resaltar los comentarios.

example
icon TODO Highlight

--

--