Con este post inicio una serie para compartir mi configuración en el PC como programador. Hoy vamos a ver cómo tengo personalizado Visual Studio Code para combinar lo mejor del editor con las ventajas de Vim. Esta combinación me permite trabajar de forma ágil y sin distracciones, integrando la flexibilidad de VSCode con la velocidad de Vim.
¿Qué es Vim y por qué integrarlo en VSCode?
Vim es un editor de texto famoso por su enfoque minimalista, diseñado para trabajar directamente con el teclado sin depender del ratón. Esta característica puede parecer extraña al principio, pero permite moverse y editar texto con una rapidez sorprendente. Al combinarlo con VSCode, conseguimos un entorno poderoso, flexible y, sobre todo, eficiente.
Paso a Paso: Instalando las Extensiones Esenciales
Para configurar este setup, necesitamos instalar algunas extensiones en VSCode, incluyendo la de Vim y otras personalizaciones visuales. Recuerda también instalar las extensiones adecuadas para tu stack tecnológico (JavaScript, Python, etc.), ya que mejorarán tu flujo de trabajo.
- Extensión de Vim: Esta extensión añade los comandos y atajos de Vim directamente en VSCode. Instálala buscándola en el Marketplace de VSCode o usa el siguiente comando:
code --install-extension vscodevim.vim- Tema Vesper + Iconos Chalice: Para darle un estilo único al editor, utilizo el tema oscuro Vesper y los iconos de Chalice. Puedes instalarlos con estos comandos:
code --install-extension artlaman.chalice-icon-theme
code --install-extension raunofreiberg.vesper- APC Customize UI++: Esta extensión permite personalizar la interfaz completa de VSCode, incluso elementos que normalmente no son editables. Yo la uso para que toda la interfaz tenga la misma fuente que el editor. Instálala con:
code --install-extension drcika.apc-extensionConfiguración Completa en `settings.json``
Ahora vamos a editar el settings.json, para ello, haz click en Ctrl + Shift + P (Windows/Linux) o Cmd + Shift + P (macOS) para abrir la Paleta de Comandos. Escribe "Open Settings (JSON)" y entra en **Preferences: Open Settings (JSON). Copia, pega y guarda la siguiente configuración:
{
// Configuración general de VSCode
"workbench.startupEditor": "none", // No abrir ningún archivo al inicio
"editor.accessibilitySupport": "off", // Desactiva soporte de accesibilidad para simplificar
// Edición de texto
"editor.formatOnSave": true, // Formatear automáticamente al guardar
"editor.defaultFormatter": "esbenp.prettier-vscode", // Usa Prettier como formateador principal
"editor.linkedEditing": true, // Edición enlazada para HTML/JSX
"editor.inlineSuggest.enabled": true, // Activar sugerencias en línea
"editor.unicodeHighlight.nonBasicASCII": false, // No resaltar caracteres Unicode especiales
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit" // Corrección automática con ESLint al guardar
},
// Configuración visual (UI)
// Tipografía
"editor.fontFamily": "Geist Mono, Berkeley Mono, monospace", // Fuente del editor
"editor.fontSize": 14, // Tamaño de fuente
"editor.lineHeight": 1.42857, // Altura de línea de aproximadamente 20px
"apc.font.family": "Geist Mono", // Aplica la misma fuente a toda la UI (requiere APC)
// Cursor
"editor.cursorBlinking": "smooth", // Animación suave para el cursor
"editor.cursorSmoothCaretAnimation": "on", // Movimiento suave del cursor
// Barra de título y ventana
"window.title": "${dirty}neovim${separator}${activeEditorShort}", // Formato del título de la ventana
"workbench.editor.showTabs": "none", // Ocultar pestañas
"breadcrumbs.enabled": false, // Ocultar breadcrumb (ruta de navegación) en la parte superior
"window.commandCenter": false, // Ocultar el centro de comandos; uso cmd+shift+p en su lugar
"workbench.layoutControl.enabled": false, // Ocultar iconos de diseño en la esquina superior derecha
"workbench.editor.editorActionsLocation": "hidden", // Ocultar botones de formato en la esquina derecha
// Minimapa
"editor.minimap.renderCharacters": false, // Minimapa en estilo bloque
"editor.hideCursorInOverviewRuler": true, // No destacar la línea actual en la barra de desplazamiento
"editor.minimap.autohide": true, // Minimapa visible solo al pasar el ratón
// Barra lateral
"workbench.activityBar.location": "hidden", // Ocultar iconos de la barra lateral; uso cmd+b para abrir
"workbench.sideBar.location": "right", // Colocar la barra lateral a la derecha para menos distracciones
// Barra inferior
"workbench.statusBar.visible": false, // Ocultar barra de estado para reducir distracciones
// Editor
"editor.stickyScroll.enabled": true, // Fija el nombre del bloque actual al hacer scroll
"gitlens.mode.active": "zen", // Modo zen en GitLens para reducir información extra
"editor.wordWrap": "on", // Activar ajuste de línea
// Tema e iconos
"workbench.iconTheme": "chalice-icon-theme", // Tema de iconos Chalice
"workbench.colorTheme": "Vesper", // Tema oscuro Vesper
"workbench.colorCustomizations": {
// Personalización de colores del editor
"editorGutter.addedBackground": "#A0A0A0",
"editorGutter.deletedBackground": "#A0A0A0",
"editorGutter.modifiedBackground": "#A0A0A0"
},
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"name": "String, Symbols, Inherited Class",
"scope": [
"string",
"constant.other.symbol",
"constant.other.key",
"meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js"
],
"settings": { "foreground": "#A0A0A0" }
},
{
"name": "CSS ID's",
"scope": [
"source.sass keyword.control",
"meta.attribute-selector.scss"
],
"settings": { "foreground": "#ffffff" }
},
{
"name": "Inserted",
"scope": ["markup.inserted"],
"settings": { "foreground": "#ffffff" }
}
]
},
// Configuración de Git
"git.openRepositoryInParentFolders": "always", // Abrir repositorio en carpetas principales
"git.autofetch": true, // Fetch automático
"git.confirmNoVerifyCommit": false, // Confirmación de commit sin verificación
"git.confirmSync": false, // Desactiva confirmación para sincronización
"git.ignoreMissingGitWarning": true, // Ocultar advertencia cuando falta Git
"gitlens.gitCommands.skipConfirmations": [
// Saltar confirmación en comandos específicos de GitLens
"fetch:command",
"stash-push:command",
"switch:command",
"push:command"
],
"gitlens.hovers.currentLine.over": "line", // GitLens en modo línea
// Herramientas para JavaScript y TypeScript
"typescript.preferences.importModuleSpecifier": "non-relative", // Preferir alias en imports
"eslint.options": {
"extensions": [".js", ".jsx", ".mdx", ".ts", ".tsx"]
},
"eslint.validate": [
// Archivos validados con ESLint
"mdx",
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
],
"tailwindCSS.experimental.classRegex": [
["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
["cx\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
],
// Otros
"diffEditor.ignoreTrimWhitespace": false, // Considerar espacios en blanco en diff
"terminal.integrated.defaultProfile.osx": "zsh", // Terminal predeterminado en macOS: zsh
"git.enableSmartCommit": true, // Commits inteligentes en Git
"[liquid]": {
"editor.defaultFormatter": "Shopify.theme-check-vscode" // Formateador para archivos liquid
}
}Una Configuración Minimalista para la Productividad
¿La clave de este setup? Menos es más. Mantener la interfaz limpia y sin distracciones me ayuda a concentrarme en el código y ser más productivo. Con un editor organizado, cada herramienta está al alcance solo cuando la necesito. Este enfoque es especialmente útil al combinar VSCode con Vim: puedo mantener el flujo y trabajar sin interrupciones.
CRÉDITOS: