Personalizar VSCode
En este apunte trato sobre cómo personailizar VSCode, trabajo con GitHub en un entorno multiplataforma y multicuenta, quiero sincronizar mis settings, usar las mismas las extensiones, aprovechar licencias. Explico el tema multicuenta, la sincronización de mis preferencias (settings) globales y específicos por proyecto y las extensiones.
Normalmente uso windows, linux, macos y he optado por VSCode como editor/ide. El objetivo es tener una experiencia de trabajo unificada, que arranque VSCode en cualquier sistema operativo, que pueda clonar un proyecto personal o profesional, manteniendo las mismas extensiones y settings, incluso usando las opciones de conectarte a host, tunel, WSL, etc.
A saber,
- VSCode no soporta multicuenta con proveedores Git y tengo cuenta profesional y otra personal (en mi caso con GitHub)
- Para que funcione lo que explico, me apoyo en Git multicuenta
- Mis
settings.json
globales deben ser válidos para Linux, MacOS y Windows. - Mis
<proyecto>.vscode/settings.json
son especificos por proryecto, pero al clonar en diferentes OS’s también me preocupo de que sean compatibles entre diferentes sistemas operativos.
Trabajo multicuenta
Te cuento mi caso y cómo lo he resuelto. Debes saber que VSCode solo permite hacer login a GitHub con una única cuenta.
- Empiezo sin estar conectado a nada, desde el icono de usuario (Inferior Izda)
- Entro en Configuración de copia de Seguridad y Sincronización > Iniciar Sesión (dejo todo activado)
- Paso 1: uso mi cuenta gratuita Microsoft Account (personal) para la sincronización. uso una cuenta personal vía Microsoft para sincronizar y para temas de GitHub usaré más tarde una cuenta Profesional.
- Paso 3 - login de VSCode en GitHub con mi cuenta profesional. Aquí quiero usar la cuenta donde tenga más licencias, así activo más cosas. En mi caso la profesional donde tengo acceso por ejemplo a GitHub Copilot y GitHub Actions.
- Paso 4 - Login con Extensiones específicas con sus credenciales. Si tienes una licencia de software para algún producto, lo normal es que puedas hacer Login desde su extensión. Muestro un ejemplo con mi licencia de GitKraken (Extensión
eamodio.gitlens
).
- Paso 5: configuro correctamente la forma de trabajar en modo Git multicuenta. Accede a ese apunte, ahí describo cómo hacerlo.
Sincronización y Backup
La sincronización de VSCode (paso 1 anterior) permite una experiencia de trabajo coherente entre diferentes dispositivos y sistemas operativos. Sincroniza configuraciones, extensiones, fragmentos de código y atajos de teclado en todos los equipos donde tengo VSCode instalado.
-
Activa la sincronización: Ve a
Administrar (Manage) > Configuración de sincronización (Backup & Sync Settings)
. Te pedirá que Inicies sesión utilizando tu cuenta de GitHub (o Microsoft, si prefieres). En mi caso uso Microsoft como dije en el punto anterior. Usa esa cuenta (bajo cuerda) para mantener las copias de seguridad/sincronización. -
Selecciona qué sincronizar: Puedes elegir qué aspectos de tu configuración deseas sincronizar: configuraciones generales, extensiones, atajos de teclado, etc. Además puedes Realiza backups periódicos: Aunque la sincronización es automática, es recomendable hacer backups manuales de las configuraciones importantes (como el archivo
settings.json
) en caso de que necesites restaurar alguna configuración anterior.
Al activarlo puede que tengas conflictos, te ofrecerá cómo resolverlo.
Configuración global
Para entender mi configuración y los ejemplos, mi usuario en los diferentes entornos es luis
y todos mis proyectos de desarrollo están bajo HOME/00.git
Dejo aquí a modo de referencia mis settings globales. Se accede a ella con Ctrl+Shift+P
o CMD+Shift+P
> Preferencias o Settings
. Los directorios donde la guarda dependen del SO
- Mi fichero VSCode global “settings.json”
- Windows -
C:\Users\luis\AppData\Roaming\Code\User
- MacOS -
/Users/luis/Library/Application Support/Code/User
- Linux -
/home/luis/.config/Code/User
- Windows -
Nota: Los comentarios no están permitidos en la especificación JSON, sin embargo VSCode (al igual que otros entornos) si que se lo traga. En GitHUb observará que los marca en rojo como errores, los he dejado para entender mejor el fichero. |
Configuración por proyecto
Depende de cada proyecto, dejo enlaces a gists
sobre algunos ejemplos, el archivo siempre estará en <proyecto>/.vscode/settings.json
- Proyecto muy vinculado a Linux, github y plantillas
- Proyecto Node.js con ESLint
- Proyecto de desarrollo web con Prettier y configuraciones de linting
- Ejemplo complejo para proyecto Golang para microservicios Dockerizados
- Ejemplo complejo para proyecto C++ en Windows 11 para desarrollo con MSVC y CLANG
Extensiones de VSCode
VSCode es una herramienta extremadamente poderosa y flexible, en gran parte gracias a su ecosistema de extensiones. Las extensiones permiten personalizar y ampliar las funcionalidades del editor para adaptarlo a las necesidades específicas de cada proyecto y desarrollador. Existen miles de extensiones disponibles en el marketplace de VSCode.
La elección de las extensiones es un tema muy personal. Lo que funciona bien para un desarrollador puede no ser tan útil para otro, dependiendo del tipo de proyectos en los que trabajes y de tus preferencias personales en cuanto a herramientas y flujos de trabajo. Esta es la lista de extensiones que utilizo regularmente, las cuales me ayudan a mantener un entorno de desarrollo eficiente y agradable.
- Programación
- formulahendry.code-runner - Permite resaltar un trozo de código y probarlo/ejecutarlo en el terminal. Crea un ejecutable temporal para probar ese trozo. Brutal !!
- zainchen.json - Soporte de JSON para VSCode
- Lenguaje C++
- ms-vscode.cpptools - Añade soporte del lenguage C/C++ a Visual Studio Code, incluyendo edición (IntelliSense) y debugging.
- twxs.cmake - Añade soporte de CMake a Visual Studio.
- ms-vscode.cmake-tools - Añade un flujo de trabajo nativo y conveniente para trabajar con proyectos basados en CMake
- Lenguaje C#
- ms-dotnettools.csdevkit - Kit de desarrollo de C# para VSCode
- Lenguaje Python
- ms-python.debugpy - Herramienta de depuración para Python.
- ms-python.python - Soporte completo para Python, incluyendo depuración y análisis de código.
- ms-python.vscode-pylance - Analizador de código para Python con capacidades de autocompletado avanzadas.
- Lenguaje Golang
- golang.go - Soporte completo para desarrollo en Go (Golang).
- Edición
- shardulm94.trailing-spaces - Resalta y elimina espacios en blanco al final de las líneas de código.
- christian-kohler.path-intellisense - Completa rutas de archivos automáticamente.
- Datos
- mechatroner.rainbow-csv - Colorea diferentes columnas en archivos CSV.
- Servicios
- ms-azuretools.vscode-docker - Soporte para desarrollo y administración de contenedores Docker. Útil si estás dockerizando.
- Git y Proyectos
- donjayamanne.git-extension-pack - Incluye varias extensiones muy útiles para Git:
- donjayamanne.githistory - Git history, search y mucho más
- alefragnani.project-manager - Gestor de proyectos para cambiar rápidamente entre diferentes repositorios y configuraciones, locales o remotos. Recomendado incluso sin Git.
- eamodio.gitlens - Extensión avanzada para gestionar y visualizar la historia de Git.
- codezombiech.gitignore - Soporte par ficheros
.gitignore
, ademas deja bajarse ficheros desde el repositorio gitignore. - ziyasal.vscode-open-in-github - Abrir en GitHub / Bitbucket / VisualStudio.com - salta a la línea del código fuente en Github / Bitbucket / VisualStudio.com.
- github.vscode-github-actions - Soporte para GitHub Actions.
- donjayamanne.git-extension-pack - Incluye varias extensiones muy útiles para Git:
- Desarrollo APIs
- postman.postman-for-vscode - Agilizar el desarrollo y las pruebas de APIs con Postman directamente desde VSCode
- Yaml
- redhat.vscode-yaml - Linter y autocompletado para archivos YAML.
- Arte
- adpyke.codesnap - Toma capturas de pantalla de fragmentos de código.
- simonsiefke.svg-preview - Vista previa de archivos SVG.
- vitaliymaz.vscode-svg-previewer - Previsualización avanzada de archivos SVG.
- equinusocio.vsc-material-theme, pack de colores para el tema de VSCode, junto con equinusocio.vsc-material-theme-icons
- pkief.material-icon-theme - Iconos Material Design para Visual Studio Code
- Prettiers
- esbenp.prettier-vscode - Formateador de código para diversos lenguajes, especialmente útil en JavaScript.
- Markdown
- yzhang.markdown-all-in-one - Conjunto de herramientas todo en uno para Markdown.
- bierner.markdown-mermaid - Soporte para diagramas Mermaid en archivos Markdown.
- davidanson.vscode-markdownlint - Linter para Markdown.
- IA
- codesnippetsai.codesnippetsai - Herramienta de autocompletado impulsada por IA para generar fragmentos de código.
- genieai.chatgpt-vscode - Integración con vaios AIs usando tu propia API Key.
- github.copilot - Asistente de codificación basado en IA.
- github.copilot-chat - Integración de chat con GitHub Copilot.
- VScode
- ms-vscode-remote.remote-containers - Soporte para desarrollo en contenedores remotos.
- ms-vscode-remote.remote-ssh - Soporte para conectar VSCode a máquinas remotas a través de SSH.
- ms-vscode-remote.remote-ssh-edit - Edita archivos en máquinas remotas usando SSH.
- ms-vscode-remote.remote-wsl - Soporte para el subsistema de Windows para Linux (WSL).
- ms-vscode-remote.vscode-remote-extensionpack - Paquete de extensiones para desarrollo remoto.
- ms-vscode.azure-repos - Integración con Azure Repos para gestionar repositorios de código.
- ms-vscode.remote-explorer - Explorador de recursos remotos.
- ms-vscode.remote-repositories - Soporte para trabajar con repositorios remotos directamente desde VSCode.
- ms-vscode.remote-server - Soporte para servidores remotos.
- Bajo estudio
- Coding Tools Extension Pack
- ms-vscode.cpptools - Extensión principal para desarrollo en C/C++.
- ms-vscode.cpptools-extension-pack - Paquete de extensiones adicionales para C/C++.
- ms-vscode.cpptools-themes - Temas para resaltar sintaxis en C/C++.
- ms-vscode.hexeditor - Editor de archivos binarios en formato hexadecimal.
- ms-vscode.makefile-tools - Soporte para proyectos basados en Makefile.
- peakchen90.open-html-in-browser - Abre archivos HTML directamente en el navegador desde VSCode.
- ryu1kn.partial-diff - Herramienta para comparar fragmentos de código.
- sandcastle.vscode-open - Abre archivos y carpetas directamente desde VSCode.
- tamasfe.even-better-toml - Mejora el soporte para archivos TOML.
- tomoki1207.pdf - Visualizador de archivos PDF integrado en VSCode.
- usernamehw.errorlens - Resalta errores y advertencias directamente en el código.
- vadimcn.vscode-lldb - Depurador LLDB para C/C++.
- visualstudioexptteam.intellicode-api-usage-examples - Ejemplos de uso de API generados por IntelliCode.
- visualstudioexptteam.vscodeintellicode - Completa automáticamente código con recomendaciones basadas en IA.
Ver extensiones instaladas: Usa el comando siguiente para ver las que tienes instaladas.
code --list-extensions
Instalación de las extensiones: Puedes instalar cualquiera de estas extensiones directamente desde el marketplace de VSCode o utilizando la línea de comandos:
- Abre la paleta de comandos (
Ctrl+Shift+P
/CMD+Shift+P
) y escribeExtensions: Install Extensions
. - Busca la extensión por su nombre o identificador (
alefragnani.project-manager
, por ejemplo). - Haz clic en instalar.
Otra opción es instalar las extensiones utilizando el terminal integrado, por ejemplo:
code --install-extension alefragnani.project-manager