Cómo Configurar Visual Studio Code

Anteriormente mencioné que mi editor HTML favorito es Visual Studio Code, pero no hemos dicho cómo podemos configurar el editor y luego crear un sitio web o un archivo HTML, así que vamos a ello.

Instalar Live Server en Visual Studio Code

Luego de haber descargado he instalado el Visual Studio Code recomendamos instalar una extensión gratuita llamada Live Server, para ello haremos los siguientes pasos:

  1. Abriremos el Visual Studio Code y en la parte izquierda hacemos clic en el icono de extensiones y se desplegará una caja de texto en la que escribiremos Live Server y al aparecer haremos clic en instalar.
  2. Buscando la extension Live Server
  3. Ahora vamos a crear una carpeta que funcionará como nuestro sitio web y ahí dentro colocaremos todos los documentos HTML, imágenes, etc. En mi caso, a mí me gusta crearlos directamente en el escritorio. Tú colócalos en alguna ubicación en la que tengas permisos, no habrá ninguna diferencia.
  4. Ya creada nuestra carpeta lo que debemos hacer ahora es dentro de Visual Studio Code ir al menú archivo, luego la opción abrir carpeta y se desplegará la ventana que te permitirá seleccionar la carpeta que recién has creado y haz clic en el botón seleccionar carpeta.
  5. Abrir carpeta
    Seleccionar carpeta
  6. Hecho esto, debes comprender que estás trabajando dentro de esa carpeta que acabas de abrir en la opción anterior y ahora vamos a crear nuestra primera página web. Vamos al menú archivo, luego nuevo y se creará un nuevo archivo que probablemente se llamará untitled-1. Tenemos que guardarlo ahora con un nombre y la extensión HTML ya que, así como está no nos sirve.
  7. Nuevo archivo
  8. Hacemos clic en el menú archivo, ahora la opción guardar como y le damos el nombre index.html. Nota que luego de guardar el archivo el editor ya lo reconoce como un documento HTML.
  9. Guardar pagina
  10. Por último, cada que hagamos alguna práctica o lección, vas a ir a la izquierda y harás clic con el botón derecho del mouse sobre la página web que estés trabajando y luego clic en la opción Live Server para que se abra el navegador y veas la página que estás creando.
  11. Ejecutar Live Server en VS Code

Video de mi canal de Youtube con la explicación