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

El otro día hice una cosita que no sabía que fuera posible hasta entonces. Tenía una carpeta de proyecto abierta en VS Code como siempre lo hago y agregué otra carpeta de raíz diferente a la ventana. Siempre asumí que cuando tenías un proyecto abierto, era una carpeta raíz de nivel superior y eso es todo, si necesitabas abrir otra carpeta en otro lugar, la abrirías 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:

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

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

Bueno, finalmente lo superé y lo hice. Guardé todos mis .code-workspacearchivos en una carpeta local. En realidad, son bastante útiles como archivos, porque puedo colocar los archivos en mi Dock y abrir mi espacio de trabajo con un solo clic tal como me gusta.

Iconos de espacio de trabajo personalizados

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

Desde que los puse en mi Dock, lo vi como una excelente oportunidad para convertirlos en íconos personalizados. Eso lo hará muy claro para mí y será un poco más agradable de usar, ya que probablemente los usaré muchas veces al día.

Inspirándome un poco en el original, tomé el logotipo SVG y lo coloqué 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 realmente útiles de un solo clic para abrir mis proyectos, pensé: “¡Qué genial sería si también activara los comandos para iniciar el proyecto!”. Aparentemente, para eso están las Tareas, y no fue demasiado difícil de configurar (¡gracias, Andrew !). 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 gulpcada vez que abre este espacio de trabajo. Supongo que debes ejecutar la tarea una vez manualmente (Terminal → Ejecutar tarea) para que tenga los permisos correctos y luego funcionará de ahí en adelante.

Anulaciones

No creo que esto sea necesariamente específico de los espacios de trabajo, pero realmente me gusta cómo se puede tener un archivo como .vscode/settings.jsonen 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 Sass súper básica donde Gulp preprocesa .scssen .css. Todo eso está bien, pero es probable que busque un selector en algún momento. No necesito verlo .cssporque no estoy trabajando en CSS básico. Como siempre. Puedo poner esto en ese archivo de configuración y saber que es solo para este proyecto, en lugar de para todos mis proyectos:

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