Algunas pequeñas mejoras en el flujo de trabajo de My VS Code (espacios de trabajo, iconos, tareas) | Programar Plus

Hice una pequeña cosa el otro día que no sabía que era posible hasta entonces. Tenía una carpeta de proyecto abierta en VS Code como siempre lo hago, y agregué otra carpeta raíz diferente a la ventana. Siempre asumí que cuando tenía un proyecto abierto, era una carpeta raíz de nivel superior y eso es todo, si necesitaba otra carpeta abierta en otro lugar, la abriría en otra ventana. ¡Pero no!

Tenemos una especie de “repositorio dúo” en CodePen (uno es la aplicación principal de Ruby on Rails y el otro son nuestros microservicios), y ahora puedo abrir ambos juntos:

Múltiples carpetas abiertas a la vez. Esto significa que ya no necesito lidiar con mis enlaces simbólicos.

Ahora puedo buscar en ambos proyectos y básicamente fingir que es un gran proyecto.

Cuando haga eso por primera vez y luego cierre la ventana de VS Code, le preguntará si desea guardar un “Área de trabajo”. Meh, tal vez más tarde, siempre pensé. Sabía lo que significaba, pero era demasiado perezoso para lidiar con eso. Hará un archivo, pensé, y realmente no tengo un lugar para archivos como ese. (Evitaría el repositorio en sí, solo porque no quiero forzar mi sistema a nadie más).

Bueno, finalmente lo superé y lo hice. Tiré todo mi .code-workspace archivos en una carpeta local. En realidad, son bastante útiles como archivos, porque puedo poner los archivos en mi Dock y abrir mi Workspace con un solo clic tal como me gusta.

Iconos de espacio de trabajo personalizados

Los archivos del espacio de trabajo tienen pequeños iconos especiales como este:

El icono es un poco genérico, pero me gusta. Un documento con un pequeño ícono de VS Code debajo.

Como los estoy poniendo en mi Dock, lo vi como una excelente oportunidad para convertirlos en íconos personalizados. Eso lo hará súper claro para mí y un poco más agradable de usar, ya que probablemente los alcanzaré muchas veces al día.

Inspirándome un poco en el original, agarré el logotipo SVG y lo puse en la parte inferior derecha de los logotipos de mi proyecto.

Cambiar logotipos en macOS es tan simple como “Obtener información” en el archivo, hacer clic en el logotipo en ese panel y luego pegar la imagen.

Ahora puedo guardarlos en mi Dock y abrir todo con un solo clic:

Iniciar comandos de terminal al abrir un proyecto

Ahora que tengo estos íconos de un solo clic realmente útiles para abrir mis proyectos, pensé: “¡Qué genial sería si iniciara los comandos para iniciar el proyecto también!” Aparentemente, para eso están las Tareas, y no fue demasiado difícil de configurar (gracias, Andrés!). Justo al lado de ese archivo de configuración, en .vscode/tasks.json, es donde tengo esto:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run Gulp",
      "type": "shell",
      "command": "gulp",
      "task": "default",
      "presentation": {
        "focus": false,
        "panel": "shared",
        "showReuseMessage": true,
        "clear": true
      },
      "runOptions": {
        "runOn": "folderOpen"
      }
    }
  ]
}

Eso inicia el comando gulp para mí cada vez que abro este espacio de trabajo. Supongo que debe ejecutar la tarea una vez manualmente (Terminal → Ejecutar tarea) para que tenga los permisos correctos, luego funciona a partir de ahí.

Anulaciones

No creo que esto sea necesariamente específico de Workspaces, pero realmente me gusta cómo puedes tener un archivo como .vscode/settings.json en una carpeta de proyecto para anular la configuración de VS Code para un proyecto en particular.

Por ejemplo, aquí en CSS-Tricks, tengo una configuración de Sass súper básica donde Gulp preprocesa .scss en .css. Todo está bien, pero es probable que busque un selector en algún momento. No necesito verlo en .css porque no estoy trabajando en vainilla CSS. Como siempre. Puedo poner esto en ese archivo de configuración y saber que es solo para este proyecto, en lugar de todos mis proyectos:

{
  "search.exclude": {
    "**/*.css": true,
  }
}