Cómo configurar vs código para programar

Visual Studio Code (VS Code) es uno de los editores de código más queridos por los desarrolladores. Su alta personalización le permite adaptar exactamente el entorno de desarrollo a sus necesidades.

Desde la instalación hasta la configuración de temas de teclado, extensiones y atajos, VS Code ofrece numerosas opciones para mejorar su productividad.

Este artículo lo guiará por los pasos esenciales para configurar VS Código para la programación.

Instalación del código VS

Descargar el instalador

Para comenzar a configurar el código VS, el primer paso es descargar el instalador. Visite el sitio web oficial de Código VS y haga clic en el botón Descargar.

El sitio identificará automáticamente su sistema operativo y proporcionará el instalador correcto.

Ejecutando la instalación

Una vez que se complete la descarga, haga clic en el archivo descargado para iniciar la instalación. Siga las instrucciones en la pantalla haciendo clic en "Siguiente" en los pasos.

No olvide aceptar los términos de uso. Elija la carpeta donde se instalará el código VS y continúe.

Configuración de la ruta

En la etapa final de la instalación, verifique la opción "Agregar a la ruta". Esto es crítico para usted abrir el código VS directamente a través del terminal, utilizando el comando código.

Después de marcar esta opción, haga clic en "Instalar" y cuando termine la instalación, haga clic en "Finalizar" para completar.

¡Listo! Ahora VS Code está instalado y configurado en su sistema. Vamos al siguiente paso y comencemos a explorar las características de esta poderosa herramienta de programación.

Elegir temas y esquemas de color

Acceso a preferencias

Para personalizar el código VS, vaya a las preferencias. Ir al menú Archivo> Preferencias> Tema de color o simplemente escriba Preferencias: Tema de color En la paleta de comando. Esto abrirá una lista de temas disponibles para que usted elija.

Temas populares

Hay muchos temas populares que pueden personalizar el editor a su gusto. Algunos de los más conocidos son:

• Un Dark Pro: Un tema oscuro muy popular entre los desarrolladores.
• Atom One Light: Ideal para aquellos que prefieren un tema claro.
• Drácula: Un tema oscuro desarrollado por Zeno Rocha, un brasileño.
• Tema de icono de material: Además de los temas de color, puede cambiar los iconos del archivo al estilo de diseño de material.

Personalizando su tema

Si ninguno de los temas estándar le complace, puede personalizar su propio tema. Acceso Archivo> Preferencias> Configuración y buscar Workbench.colorCustomizations.

Aquí puede ajustar los colores de diferentes elementos de la interfaz VS Code.

Consejo: Puede agregar personalizaciones de color a las barras de título y estado dentro de la sección Cololustomizaciones.

Con estos consejos, puede hacer que VS codifique su camino y hacer que el programa sea aún más agradable.

Instalación de extensiones esenciales

Explorando el mercado

Para instalar extensiones en el código VS, visite el mercado. Marketplace es donde encuentra todas las extensiones disponibles para el código VS. Para acceder a él:

1. Abra el código VS.
2. Haga clic en el icono de extensiones en la barra lateral izquierda o presione Ctrl+Shift+X.
3. Use la barra de búsqueda para encontrar las extensiones que desee.
4. Hacer clic en Instalar Para agregar la extensión a su código VS.

Extensiones recomendadas

Aquí hay algunas extensiones que pueden mejorar enormemente su productividad:

• Etiqueta de cambio automático: Cambie automáticamente las etiquetas HTML correspondientes cuando cambie una de ellas.
• Resaltar el color: Destaca los colores en su código CSS, lo que facilita ver los colores utilizados.
• Servidor en vivo: Crea un servidor local que actualiza automáticamente la página de su navegador cada vez que guarda un archivo.
• Más bonito: Formatee su código automáticamente, asegurando un estilo consistente.
• Eslint: Analiza su código JavaScript en busca de errores y problemas de estilo.
• Gitlens: Mejora la integración de GIT en el código VS, que muestra información detallada sobre comodidades y autores.

Gestionar sus extensiones

Después de instalar algunas extensiones, es posible que desee administrarlas. Para eso:

1. Abra el panel de extensión (Ctrl+Shift+X).
2. Haga clic en el icono de engranajes junto a la extensión que desea administrar.
3. Puede deshabilitar, desinstalar o configurar la extensión según sea necesario.

Recordar: Menos es más. Instale solo las extensiones que realmente usará para evitar sobrecargar su editor.

Configuración del formato del código

Ajustar las preferencias de formato

Puede ajustar las preferencias de formato de su código en el código VS. Acceder a las configuraciones presionando Ctrl (CMD) +, Y busque "formatear al guardar".

Active esta opción para que el código esté formateado automáticamente cada vez que guarde un archivo.

Formatear al guardar

Una de las características más útiles del código VS es el formato automático al guardar. Esto asegura que su código siempre esté limpio y organizado.

Para activar esta opción, agregue la siguiente línea a su archivo settings.json:

{
    "Editor.Formatonsave": Verdadero
}

Usar más bonitas y otras herramientas

Prettier es una herramienta popular de formato de código. Ayuda a mantener un estilo consistente a lo largo de su proyecto. Para usarlo, siga estos pasos:

1. Instale la extensión más bonita en el código VS.
2. Agregue la configuración más bonita a su settings.json:

{
    "Editor.defaultformterter": "esbenp.prettier-vscode",
    "[JavaScript]": {
        "Editor.defaultFormatter": "Esbenp.prettier-vscode"
    }
}

Ahora, cada vez que guarde un archivo, Prettier formará el código automáticamente.

Mantener un código bien formado no solo mejora la legibilidad, sino que también ayuda a evitar errores innecesarios.

Pruebe diferentes herramientas y encuentre la que mejor se adapte a su flujo de trabajo.

Personalización de atajos de teclado

Acceso a la configuración de acceso directo

Para personalizar sus atajos de teclado en el código VS, vaya a la paleta de comandos presionando Ctrl + Shift + P y escribir Preferencias: Abra los atajos de teclado.

Esto abrirá una nueva pestaña donde puede ver y modificar todos los atajos disponibles.

Creando nuevos atajos

Crear nuevos atajos es bastante simple. En la pestaña Atendas, haga clic en el icono del lápiz junto al comando que desea modificar y presione la combinación de teclas que desea usar.

Recuerde elegir combinaciones que no entran en conflicto con otros comandos importantes.

Importación y exportación de configuraciones

Si usa el código VS en diferentes máquinas, puede ser útil exportar su configuración de acceso directo. Ir a F1> Preferencias: Configuración abierta (JSON) y copie la configuración deseada.

Para importar, simplemente pegue estas configuraciones en el archivo settings.json de la nueva máquina.

Personalizar sus atajos de teclado puede aumentar en gran medida su productividad, lo que le permite trabajar de manera más eficiente y cómoda.

Integrando con Git

Configuración de GIT en VS Code

Visual Studio Code tiene integración nativa con sistemas de control de versiones como Git.

Para empezar, abra el panel "Control de origen" en el lado izquierdo o use los comandos en la barra de estado inferior.

Puede inicializar un repositorio de git, realizar comodidades, empujar y hacer tiros, y ver y administrar cambios directamente en el editor.

• Inicializar un repositorio de git: Haga clic en el icono Git en la barra lateral y luego el botón de inicio del repositorio.
• Agregar archivos para confirmar: Mouse a través de los archivos modificados y haga clic en "Etapa" para agregarlos a Commit.
• Cometer cometer: Haga clic en "Conjunto de la escenificación" para confirmar los cambios.
• Presionar para el repositorio remoto: Usa el comando Git Push en el terminal integrado o a través de la interfaz gráfica.

Usando Gitlens

Gitlens es una extensión poderosa que mejora la integración de GIT en el código VS. Con él, puede ver la historia de los compromisos, comparar cambios y más.

Para instalar Gitlens:

1. Vaya a la pestaña VS Extensión de código.
2. Busque Gitlens y haga clic en Instalar.
3. Después de la instalación, explore las nuevas funciones disponibles en el panel de control de origen.

Realizando comodos y empuje

Para realizar comodidades y presionar el código vs:

1. Realice cambios en el código: edite sus archivos normalmente.
2. Agregue los cambios a la etapa: en el panel de control de origen, haga clic en "Etapa todo" para agregar todos los cambios.
3. Escriba un mensaje de Commit: En el campo de mensajes, describa los cambios realizados.
4. Commit Commit: haga clic en el icono de verificación para confirmar.
5. Envíe los cambios al repositorio remoto: use el comando Git Push En el terminal integrado o haga clic en el botón Push en la interfaz gráfica.

La integración de GIT con el código VS facilita enormemente el control de versiones, lo que le permite administrar su código de manera eficiente y organizada, todo en un solo lugar.

Usando la terminal integrada

Abriendo el terminal

Para abrir el terminal integrado del código VS, use el atajo `Ctrl + \ \

(Windows/Linux) oCMD + `(Mac). Esto abrirá el terminal en la parte inferior de la ventana VS Código, lo que le permitirá ejecutar comandos sin dejar el editor.

Sair y ejecutar comandos

El terminal integrado funciona como cualquier otro terminal. Puede navegar entre directorios, ejecutar scripts, instalar paquetes y más. Aquí hay algunos comandos útiles:

• CD para cambiar el directorio.
• LS o prostituta Para enumerar los archivos y directorios.
• Instalación de NPM Para instalar instalaciones de un nodo.js. proyecto.
• Python script.py Para ejecutar un guión de Python.

El terminal integrado le permite tener más control sobre su entorno de desarrollo sin cambiar entre diferentes ventanas o aplicaciones.

Conclusión

Configurar el código de Visual Studio para la programación es un proceso que vale la pena, ya que el editor ofrece una amplia gama de características y opciones de personalización.

Desde la instalación hasta la configuración de temas, extensiones y atajos de teclado, cada paso contribuye a un entorno de trabajo más productivo y agradable.

¡Disfruta de los consejos y convierte el código VS en tu aliado principal al programar!