Einige kleine Verbesserungen für meinen VS Code Workflow (Workspaces, Icons, Tasks)

Ich habe neulich etwas gemacht, von dem ich bis dahin nicht wusste, dass es möglich ist. Ich hatte einen Projektordner in VS Code geöffnet, wie ich es immer tue, und habe ein anderes, separates Stammverzeichnis zum Fenster hinzugefügt. Ich ging immer davon aus, dass es, wenn man ein Projekt geöffnet hat, nur ein oberstes Stammverzeichnis gibt und das war's. Wenn man einen anderen Ordner woanders öffnen müsste, würde man das in einem separaten Fenster tun. Aber nein!

Wir haben bei CodePen eine Art "Duo-Repo"-Konfiguration (eines ist die Haupt-Ruby-on-Rails-App, und eines sind unsere Microservices), und jetzt kann ich beide zusammen öffnen

Jetzt kann ich in beiden Projekten suchen und im Grunde so tun, als wäre es ein einziges großes Projekt.

Wenn man das zum ersten Mal macht und dann das VS Code-Fenster schließt, wird man gefragt, ob man einen "Workspace" speichern möchte. Meh, vielleicht später, dachte ich immer. Ich wusste, was es bedeutet, aber ich war zu faul, mich darum zu kümmern. Es wird eine Datei erstellt, dachte ich, und ich habe keinen richtigen Ort für solche Dateien. (Ich würde das Repo selbst meiden, einfach weil ich niemandem mein System aufzwingen möchte.)

Nun, ich habe mich endlich dazu durchgerungen und es getan. Ich habe alle meine .code-workspace-Dateien in einen lokalen Ordner verschoben. Sie sind tatsächlich recht nützlich als Dateien, denn ich kann die Dateien in mein Dock legen und meinen Workspace mit einem Klick so öffnen, wie ich es mag.

Benutzerdefinierte Workspace-Icons

Workspace-Dateien haben spezielle kleine Icons wie dieses

Da ich diese in mein Dock packe, sah ich darin eine coole Gelegenheit, sie in benutzerdefinierte Icons zu verwandeln! Das macht es für mich super klar und ein bisschen angenehmer zu benutzen, da ich sie wahrscheinlich viele Male am Tag benutzen werde.

Inspiriert vom Original habe ich das SVG-Logo geschnappt und es unten rechts auf meinen Projektlogos platziert.

Logos unter macOS zu ändern ist so einfach wie "Informationen abrufen" für die Datei, auf das Logo in diesem Fenster zu klicken und dann das Bild einzufügen.

Jetzt kann ich sie in meinem Dock aufbewahren und alles mit einem einzigen Klick öffnen

Terminalbefehle beim Öffnen eines Projekts ausführen

Jetzt, wo ich diese sehr praktischen Ein-Klick-Icons zum Öffnen meiner Projekte habe, dachte ich: "Wie cool wäre es, wenn sie auch gleich die Befehle zum Starten des Projekts ausführen!" Anscheinend sind dafür Tasks da, und es war nicht allzu schwer einzurichten (danke, Andrew!). Direkt neben dieser Konfigurationsdatei, unter .vscode/tasks.json, befindet sich das hier

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

Das führt den Befehl gulp für mich aus, wann immer ich diesen Workspace öffne. Ich schätze, man muss den Task einmal manuell ausführen (Terminal → Task ausführen), damit er die richtigen Berechtigungen hat, dann funktioniert er von da an.

Überschreibungen

Ich glaube nicht, dass dies unbedingt spezifisch für Workspaces ist, aber ich mag es wirklich, wie man eine Datei wie .vscode/settings.json in einem Projektordner haben kann, um VS Code-Einstellungen für ein bestimmtes Projekt zu überschreiben.

Zum Beispiel habe ich hier bei CSS-Tricks ein sehr einfaches Sass-Setup, bei dem Gulp .scss in .css vorkompiliert. Das ist in Ordnung, aber es ist wahrscheinlich, dass ich irgendwann nach einem Selektor suche. Ich muss ihn nicht in .css sehen, weil ich nicht in Vanilla CSS arbeite. So gut wie nie. Ich kann das in diese Einstellungsdatei einfügen und weiß, dass es nur für dieses Projekt und nicht für alle meine Projekte gilt

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