Catégories
Astuces et Design

Quelques petites améliorations à mon flux de travail VS Code (espaces de travail, icônes, tâches)

L’autre jour, j’ai fait une petite chose que je ne savais pas possible. J'avais un dossier de projet ouvert dans VS Code comme je le fais toujours, et j'ai ajouté un autre différent dossier racine dans la fenêtre. J'ai toujours supposé que lorsque vous aviez un projet ouvert, c'était un dossier racine de premier niveau et c'est tout, si vous aviez besoin d'un autre dossier ouvert ailleurs, vous l'ouvririez dans une autre fenêtre. Mais non!

Nous avons en quelque sorte une chose «duo repo» en cours à CodePen (l'une est l'application principale Ruby on Rails, et l'autre est nos microservices), et maintenant je peux les ouvrir tous les deux ensemble:

Plusieurs dossiers s'ouvrent à la fois. Cela signifie que je n'ai plus besoin de gérer mes liens symboliques.

Maintenant, je peux rechercher dans les deux projets et simplement faire comme si c'était un gros projet.

Lorsque vous faites cela pour la première fois, puis fermez la fenêtre VS Code, il vous demandera si vous souhaitez enregistrer un «espace de travail». Meh, peut-être plus tard, j'ai toujours pensé. Je savais ce que cela signifiait, mais j'étais trop paresseux pour y faire face. Ça va faire un fichier, Pensais-je, et je n'ai pas vraiment de place pour des fichiers comme ça. (J'éviterais le dépôt lui-même, juste parce que je ne veux pas forcer mon système sur quelqu'un d'autre.)

Eh bien, je l'ai finalement surmonté et je l'ai fait. J'ai jeté tout mon .code-workspace fichiers dans un dossier local. Ils sont en fait très utiles en tant que fichiers, car je peux mettre les fichiers dans mon Dock et ouvrir mon espace de travail en un clic comme je les aime.

Icônes d'espace de travail personnalisées

Les fichiers de l'espace de travail ont des petites icônes spéciales comme celle-ci:

L'icône est un peu générique, mais j'aime ça. Un document avec une petite icône VS Code en dessous.

Depuis que je les mets dans mon Dock, j'ai vu cela comme une bonne opportunité de les transformer en Douane Icônes! Ce sera très clair pour moi et un peu plus agréable à utiliser, car je les atteindrai probablement plusieurs fois par jour.

En m'inspirant un peu de l'original, j'ai accroché le logo SVG et l'ai déposé en bas à droite des logos de mon projet.

Changer de logos sur macOS est aussi simple que «Obtenir des informations» sur le fichier, en cliquant sur le logo dans ce panneau, puis en collant l'image.

Maintenant, je peux les garder dans mon Dock et tout ouvrir en un seul clic:

Lancer les commandes du terminal lors de l'ouverture d'un projet

Maintenant que j'ai ces icônes en un clic très pratiques pour ouvrir mes projets, je me suis dit: "Comme ce serait cool s'il lançait les commandes pour démarrer le projet aussi! » Apparemment, c'est à cela que servent les tâches, et ce n'était pas trop difficile à configurer (merci, Andrew!). Juste à côté de ce fichier de paramètres, à .vscode/tasks.json, c'est là que j'ai ceci:

{
  "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"
      }
    }
  )
}

Cela donne le coup d'envoi de la commande gulp pour moi chaque fois que j'ouvre cet espace de travail. Je suppose que vous devez exécuter la tâche une fois manuellement (Terminal → Exécuter la tâche) pour qu'elle ait les bonnes autorisations, puis cela fonctionne à partir de là.

Remplace

Je ne pense pas que cela soit nécessairement spécifique aux espaces de travail, mais j'aime vraiment la façon dont vous pouvez avoir un fichier comme .vscode/settings.json dans un dossier de projet pour remplacer les paramètres VS Code pour un projet particulier.

Par exemple, ici sur CSS-Tricks, j'ai une configuration Sass super basique où Gulp prétraite .scss dans .css. C'est très bien, mais il est probable que je vais chercher un sélecteur à un moment donné. Je n'ai pas besoin de le voir dans .css parce que je ne travaille pas en CSS vanilla. Comme déjà. Je peux mettre cela dans ce fichier de paramètres et savoir que c'est juste pour ce projet, plutôt que pour tous mes projets:

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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *