¿Qué es?
VS Code es un editor de código fuente desarrollado por Microsoft. Está disponible para Windows, GNU/Linux y macOS. Entre sus características más destacables se encuentra un soporte para depuración, resaltado de sintaxis, compilador de código inteligente, refactorización de código, Git integrado y extensiones que facilitan su uso y comprensión, entre otros.
¿Por qué lo vamos a utilizar?
VS Code es uno de los editores de código más utilizados actualmente. Cuenta con muchas prácticas que facilitan su uso, tales como las extensiones, integración con otros programas, personalización de tu editor, autocompletado, entre otros más. Por ello es bueno iniciar con este software ya que es bastante completo y sencillo de utilizar si eres aún principiante o inclusive ya alguien con experiencia previa.
¿Cómo puedo descargar VS Code?
Windows
visualstudio.microsoft.com Enlace para descargar VS Code para Windows
Descarga Visual Studio Code desde el siguiente link: https://code.visualstudio.com/Download. Una vez descargado, ejecute el instalador (VSCodeUserSetup-{version}.exe). De manera predeterminada, VS Code se instala en C:\Users_{Username}\AppData\Local\Programs\Microsoft VS Code. Es necesario conceder los permisos necesarios para una mejor experiencia.
Mac y Linux
Los pasos para instalar VS Code en Mac y Linux son muy similares a los de Windows. Puedes descargar el instalador desde el mismo enlace que se proporcionó anteriormente.
¿Qué es lo que veo? (Interfaz de VS Code)
Una vez instalado VS Code, es de suma importancia conocer su interfaz y página de inicio. Si bien, puede haber dos pantallas de inicio en VS Code.
www.exercisescsharp.comPantalla de inicio de VS Code
Si bien a pesar de cualquier inicio que se visualice, es necesario conocer la interfaz o menú de apoyo que se encuentra del lado izquierdo de tu pantalla.
damiandeluca.com.ar Menú de apoyo de VS Code
¿Cómo crear y guardar archivos?
Para poder crear y guardar un archivo; deberás ir a la parte superior izquierda de tu VS Code y dar click en la palabra "File" o "Archivo". Según el idioma en que se encuentre configurado tu VSCode.
es.stackoverflow.comMenú File o Archivo de VS Code
Una vez dado click aparecerá un menú parecido a este.
guayahack.co Menú de opciones para crear y guardar archivos en VS Code
En esta ocasión solo utilizaremos el apartado "Crear nuevo archivo" o "New file". Al dar click en este, deberás nombrar tu archivo con la terminación .html. Una vez realizado hay que colocar ese archivo en un lugar y carpeta específicos.
htmlmasters.tech Ejemplo de cómo crear un archivo HTML en VS Code
Extensiones de VS Code
¿Qué son?
Una extensión es un agregado que permite compartir contenido o eventos de implementación con una aplicación. Estas son utilizadas para mejorar la experiencia al utilizar una app o algún sitio.
Aquí hay algunas extensiones que te sugerimos ya que pueden ser útiles para tí como principiante:
- Live Server
Esta es una herramienta que te ayuda a previsualizar en el navegador los cambios que se están realizando en tiempo real. Esta previsualización se actualiza inmediatamente al guardar el proyecto desde el editor, en este caso VS Code.
- Color highlight
Herramienta que ayuda a visualizar en el código, sugerencias de colores así como los colores que hemos utilizado. Como se conocerá más adelante del curso en HTML se utilizan colores en formato hexadecimal lo cuál puede llegar a dificultar la identificación de estos, por ello esta herramienta es útil.
- Prettier
Herramienta que da diseño a el formato del código que estamos escribiendo con colores, para facilitar la identificación de etiquetas, atributos, errores, entre otros.
- Auto Close Tag
Herramienta que te ayuda a cerrar una etiqueta en automático.
Conclusiones
En este artículo aprendiste a instalar VS Code, a conocer su interfaz y a crear y guardar archivos. También te sugerimos algunas extensiones que pueden ser útiles para ti como principiante.
Si estás buscando aprender a programar, Sitesupremacy es el mejor lugar para empezar. Nuestros cursos son completos y fáciles de entender, y te ayudarán a aprender a programar de forma rápida y sencilla.
Enlace a Sitesupremacy: https://www.sitesupremacy.com