Desarrollo Web en Visual Studio Code

Hace un par de semanas publiqué un vídeo en el que mostraba como es que configuro y utilizo el editor de código Atom, y como resultado obtuve muchos comentarios de personas que decían que ellos ahora están utilizando Visual Studio Code y debería hacer un vídeo de eso.

Es por eso que en esta publicación voy a compartir contigo como es que configuro y utilizo en mi día a día este editor enfocado en el desarrollo web, es decir para crear aplicaciones y sitios web.
Editor de Código Visual Studio Code

Indice

  1. ¿Que es Visual Studio Code?
  2. Instalación de Visual Studio Code
  3. Configuración de Visual Studio Code
  4. Plugins de Visual Studio Code
  5. Más Recursos de Visual Studio Códe

¿Qué es Visual Studio Code?

Visual Studio Code, es un editor de código Open Source creado por Microsoft y entre sus características más notables podemos encontrar:
  • Autocompletado de Código, como forma de aumentar la velocidad de escritura de código y ayudar al programador
  • Integración con Git, brindándote a través de una interfaz gráfica con botones, el uso de este sistema de control de versiones
  • Herramientas de Depuración y Factorización de Código
  • Extensibilidad y Customizacion del editor a través de Plugins o Extensiones
  • y Soporte Multiplataforma, es decir que puedes instalarlo en Windows, Mac o cualquier distribución de Linux, sin notar ninguna diferencia.
Ademas de todas las características típicas de los editores como resaltado de sintaxis, atajos de teclado y la capacidad de modificar su configuración por defecto.

Es desarrollado utilizando tecnología web, es decir HTML, CSS y Javascript, junto con Nodejs y complementos de C++. Esto es posible ya que fue creado utilizando Electron, un framework de desarrollo de aplicaciones de Escritorio utilizando tecnología web, y su editor web llamado monaco-editor. el cual puedes encontrar el código fuente de ambos proyectos en Github.

Instalación de Visual Studio Code

Como te decia visual Studio code es multiplaforma, debido a eso es muy simple instalarlo yendo al sitio web oficial y descargando el instalador o paquete para el sistema operativo que usas, ya que puedes instalarlo en cualquier plataforma, y esto incluye a muchas distribuciones Linux.

Configuración de Visual Studio Code

Teniendo instalado el editor voy a hacer unos pequeños cambios, entre los cuales podemos encontrar:
  • editor.fontSize: 16, para cambiar el tamaño de fuente
  • editor.tabSize: 2, para colocar el numero de tabulaciones
  • editor.wordWrap: "on", para que el código siempre se muestre en pantalla
  • terminal.integrated.fontSize: 16, para aumentar el tamaño de fuente del terminal

Plugins de Visual Studio Code

La mayoría de editores de código te permiten extender su funcionalidad a través de Plugins, y Visual Studio Code, no es la excepción. así que a continuación listo una serie de Plugins que he utilizo en mi dia a dia en este editor de código:

Estos plugins son los que utilizo independientemente del lenguaje de programación, pero si trabajas con algún lenguaje de programación en especifico, te recomiendo probar estos:

PHP
  • php intellisense
Javascript



VSCode, por defecto ya trae instalado un Plugin llamado Emmet, que ayuda al autocompletado de codigo HTML. pero si quieres siempre estar al tanto de otras extensiones siempre tienes el marketplace de visual studio code, en donde encontrarás muchos más.

Mas Recursos de Visual Studio Code

Comentarios

  1. Hola Fazt, soy seguidor de tus tutos, quería saludarte y decirte lo bien que enseñas.

    Que pensas de WebStorm ?

    ResponderEliminar
  2. Muy bueno, ahora estoy al tanto de todo lo que publicas y tus vídeos.
    Antes solía usar atom, no recuerdo que pasó y termine pasándome a vscode.

    Que bien que dejaras algunos plugins todo este tiempo estuve utilizándolo sin ellos.
    Saludos.

    ResponderEliminar
  3. Hola Fazt deberias tener button para que podamos hacerte donaciones, piensalo en youtube en la descripcion de los videos podrias ponerlo.

    ResponderEliminar
  4. Hola Fazt, he estado viendo tus tutos de Angular Material y estuve creando un par minis aplicaciones, yo estaba acostumbrado a NodeJS. TypeScript es nuevo para mi, pero poco a poco comienzo a entender su funcionamiento. Tengo una pregunta: imaginate que tengo que mostrar 2 tablas en mi pantalla y necesito q la segunda tabla cambie su contenido dependiendo del registro en que me encuentre en la primera tabla, he estado buscando informacion pero no encuentro nada, sabes si es posible hacer este tipo de funcionalidad? gracias de antemano y sigue con los tutos que son muy buenos.

    ResponderEliminar
  5. Hola Fazt estoy teniendo el siguiente problema al usar el VSCode con PHP

    phpcs: Request workspace/configuration failed with message: Unable to locate phpcs. Please add phpcs to your global path or use composer dependency manager to install it in your project locally.
    Eh instalado la extencion PHPCS pero me piden que agrege a la ruta global manualmente si es necesario

    ResponderEliminar
  6. hola fazt, me encanta tu contenido, estoy super enganchado y espero de aquí a final de año ver todos tus cursos, pero tengo una pequeña duda, en el caso de dar el paso a otro nivel, que me recomiendas.
    sinceramente, lo hacia por que quería hacer una web a mi empresa, pero me he dado cuenta que me encanta este mundo.
    agradecería mucho tu respuesta, y te deseo toda la suerte del mundo por dar esta información tan grandiosa.

    ResponderEliminar
  7. Muchas gracias por sus conocimientos que nos brinda, usted a marcado la diferencia entre tantas páginas de información, especialmente en su página en youTube es muy conciso y directo en sus explicaciones, fáciles de entender y excelente estructuración y desarrollo en cada tema que explica como en su blog y videos.

    ResponderEliminar

Publicar un comentario