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

VS Code Améliorations du flux de travail: espaces de travail, icônes et tâches

Récemment, j'ai découvert une fonctionnalité VS Code que je ne connaissais pas auparavant: alors qu'un dossier de projet est ouvert, un autre dossier racine différent peut être ajouté à la même fenêtre. J'ai toujours pensé que l'ouverture d'un projet ne peut avoir qu'un seul dossier racine de niveau supérieur, et si vous avez besoin d'ouvrir un autre dossier, il doit être ouvert dans une nouvelle fenêtre. Mais ce n'est pas le cas!

Dans Codepen, nous utilisons le mode "Dual Repository" (une application principale Ruby on Rails, un microservice), et maintenant je peux ouvrir les deux référentiels en même temps:

Maintenant, je peux rechercher deux projets et le gérer essentiellement comme un grand projet.

La première fois que vous faites cela, puis fermez la fenêtre de code vs, il vous demande si vous souhaitez enregistrer un "espace de travail". J'ai toujours ressenti un peu de mal auparavant, pensant que cela créerait un fichier et je n'ai pas un endroit approprié pour stocker de tels fichiers (j'évite de le mettre dans un référentiel parce que je ne veux pas imposer mon système aux autres).

Finalement, je surmonte ma paresse et crée un dossier local pour stocker tous .code-workspace fichiers. Ces fichiers sont très utiles, je peux les ajouter à la station d'accueil et ouvrir l'espace de travail que j'ai configuré en un clic.

Icône d'espace de travail personnalisé

Les fichiers d'espace de travail ont des icônes spéciales:

Depuis que j'ai mis ces fichiers dans le quai, j'ai pensé à créer des icônes personnalisées pour eux! Cela rendra mes espaces de travail clairs en un coup d'œil et plus pratique à utiliser, car je peux les ouvrir plusieurs fois par jour.

J'ai pris le logo SVG de l'icône d'origine et je l'ai placé dans le coin inférieur droit de mon logo de projet.

La modification du logo sur macOS est très simple: cliquez avec le bouton droit sur le fichier, sélectionnez "Afficher l'introduction", puis cliquez sur le logo dans le panneau et collez une nouvelle image.

Maintenant, je peux les enregistrer sur le quai et ouvrir tous les projets en un seul clic:

Démarrez la commande du terminal lors de l'ouverture du projet

Maintenant que j'ai ces icônes d'ouverture de projet en un clic pratique, je me suis dit: «Ce serait cool s'il pouvait également lancer la commande de démarrage du projet!». De toute évidence, c'est à cela que servent les tâches et ce n'est pas difficile à mettre en place (merci Andrew!). Dans le fichier .vscode/tasks.json , j'ai ajouté ce qui suit:

 {
  "version": "2.0.0",
  "Tâches": [
    {
      "Label": "Run Gulp",
      "type": "shell",
      "Commande": "Gulp",
      "tâche": "par défaut",
      "présentation": {
        "Focus": faux,
        "panneau": "partagé",
        "showReuseMessage": vrai,
        "Clear": vrai
      },
      "runOptions": {
        "Runon": "Folderopen"
      }
    }
  ]]
}

Chaque fois que j'ouvre cet espace de travail, il lance la commande gulp pour moi. Je pense que vous devez exécuter la tâche manuellement (terminal → exécuter la tâche) afin qu'il ait les autorisations correctes, puis cela fonctionne bien.

Remplacer les paramètres

Je ne pense pas que ce soit juste une fonctionnalité spécifique à l'espace de travail, mais j'aime vraiment écraser les paramètres de code VS dans le dossier du projet à l'aide du fichier .vscode/settings.json .

Par exemple, dans CSS-Tricks, j'ai une configuration SASS très basique où Gulp préprose .scss à .css . C'est bien, mais je pourrais rechercher des sélecteurs. Je n'ai pas besoin de le voir dans .css car je n'utilise jamais de CSS natifs. Je peux l'ajouter au fichier de paramètres et je sais que cela ne fonctionne que pour ce projet, pas tous les projets:

 {
  "search.exclude": {
    "** / *. CSS": vrai,
  }
} 

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!