Configuración personal de VSCode

Anotaciones sobre mi configuración actual en: Visual Studio Code.

Extensiones

⚡️ Esenciales

• GitHub Copilot → Asistente de programación impulsado por IA.
• Prettier - Code Formatter → Formatea el código de manera uniforme y limpia.
• ES6 String HTML → Coloreado de sintaxis para HTML, CSS, SVG, XML, SQL, GLSL en string templates. Ideal para WebComponents.
• ESLint → Mantiene la calidad del código JavaScript/TypeScript.
• GitLens → Potentes herramientas para trabajar con Git directamente en VSCode.
• Error Lens → Resalta errores y advertencias directamente en el editor.
• Material Icon Theme → Un tema de iconos atractivo y funcional.
• Live Server → Lanza un servidor local para desarrollo web.
• Auto Rename Tag → Renombra etiquetas HTML/JSX relacionadas automáticamente.
• Tailwind CSS IntelliSense → Autocompletado y validación para clases de Tailwind CSS.
• Python → Soporte avanzado para Python.
• Pylance → Motor de lenguaje para Python, rápido y con muchas funciones.
• Black Formatter → Formateador de código Python según la guía de estilo PEP 8.
• PHP Intelephense → Gran herramienta para desarrollo en PHP.
• PHP CS Fixer → Formatea el código PHP automáticamente.
• PHP Debug → Permite depurar el código PHP.
• Docker → Herramientas para manejar contenedores Docker.
• VSCode Color Picker → Ideal para colores en Javascript o WebComponents.
• Image preview → Muestra una previsualización de la imagen referenciada en el margen de la línea.
• REST Client → Cliente REST integrado en VSCode para probar APIs.
• GitHub Copilot
• GitHub Copilot Chat

🛠️ Otras extensiones útiles

Según el lenguaje y entorno:

• Jupyter → Soporte para trabajar con notebooks de Jupyter.
• CSS Modules → Herramienta útil si trabajas con módulos CSS
• PostCSS Language Support → Resaltado de sintaxis para CSS moderno y experimental.
• Astro → Soporte para el framework Astro.
• Laravel Artisan → Ejecuta comandos de Laravel Artisan desde VSCode.
• Composer → Interfaz para el administrador de dependencias de Composer.
• Django → Herramientas para proyectos Django.
• Prisma → Agrega resaltado de sintaxis, correción de errores, completa código y más para Prisma Schema

Productividad y formateo:

• Activitus Bar → Simplifica la barra de actividad.
• TODO Highlight → Resalta comentarios TODO en el código.
• Colorize → Genera un fondo de color en el propio código.
• Stylelint → Integra StyleLint (Linter CSS) en VSCode.
• Better Comments → Mejora la visualización de los comentarios en el código.
• .env → Proporciona compatibilidad con la sintaxis de archivos .env.
• Markdown All in One → Herramientas para trabajar con Markdown.
• SQLite Viewer → Visualiza la información de archivos SQLite.
• Paste JSON as Code → Convierte JSON en código.
• Better DockerFile Syntax → Mejora el resaltado de sintaxis en Dockerfiles.
• Rainbow CSV → Mejora la visualización de archivos CSV. Resalta columnas.
• EditorConfig for VS Code → Soporte para archivos .editorconfig. Consistencia de estilos.
• GitHub Pull Requests → Gestiona pull requests y issues de GitHub directamente desde VSCode.

Snippets:

• ES7 React/Redux → Snippets para React y Redux.
• Snippets simple Next.js → Snippets para proyectos con Next.js.
• PHP Snippets → Snippets para PHP.

Otras extensiones interesantes:

• Eyecons → El color de los iconos se adapta al tema que estés usando.

Opcionales

• W3C Web Validator → Validar problemas en el código HTML.
• HTMLHint → Linter para HTML. Ayuda a cumplir estándares de calidad y buenas prácticas.
• vscode-pdf → Para visualizar archivos PDF.
• AI Toolkit for Visual Studio Code → Optimiza el desarrollo de aplicaciones de IA generativa mediante la integración de herramientas y modelos.

Temas

Tema actual

• Catppuccin → Mi favorido es Macchiato. Tiene tonos cálidos e intensos y la cantidad justa de contraste.

Otros temas que también me gustan

• GitHub Theme → Tema oficial de GitHub, limpio y profesional.
• Dracula Official → Un clásico oscuro y agradable.
• One Dark Pro → Inspirado en Atom One Dark. Gran contraste, detalles vibrantes y un diseño limpio.

Sincronizar configuraciones de VSCode

1. Abrir la paleta de commandos con Cmd + Shift + P
2. Buscar 'Activity Bar' si es que no está visible.
3. En el icono de 'Cuentas' o 'Accounts', seleccionamos 'Configuración de copia de seguridad y sincronización' ('Settings Sync is On')
4. Iniciar sesión con GitHub.
5. Aparecerá el mensaje de que se activó la Sincronización de configuración.

Configurar el comando code

1. Abrir la paleta de commandos con Cmd + Shift + P
2. Seleccionar "Shell Command: Install 'code' command in PATH"

Recursos útiles

• Keyboard Shortcuts Reference
• Tips and Tricks VSCode
• PDF con todos los atajos de teclado para macOS en Keyboard Shortcuts MacOS