Einige kleine Verbesserungen an meinem VS Code Workflow (Workspaces, Icons,  Tasks)

Ich habe neulich etwas Kleines 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 dann habe ich einen weiteren, anderen Stammordner zum Fenster hinzugefügt. Ich ging immer davon aus, dass man, wenn man ein Projekt geöffnet hat, nur einen Stammordner auf der obersten Ebene hat und das war's. Wenn man einen anderen Ordner woanders öffnen wollte, würde man das in einem anderen Fenster tun. Aber nein!

Wir haben bei CodePen so etwas wie "Duo-Repos" (eins ist die Haupt-Ruby-on-Rails-App und eins sind unsere Microservices), und jetzt kann ich sie beide zusammen öffnen.

Jetzt kann ich beide Projekte durchsuchen und so tun, als wäre es ein einziges großes Projekt.

Wenn du das zum ersten Mal machst und dann das VS Code-Fenster schließt, wirst du gefragt, ob du einen "Workspace" speichern möchtest. Meh, vielleicht später, dachte ich immer. Ich wusste, was gemeint war, aber ich war zu faul, mich darum zu kümmern. Es wird eine Datei erstellt, dachte ich, und ich habe keinen richtigen Platz für solche Dateien. (Ich würde das Repo selbst vermeiden, nur weil ich niemandem meine Systeme aufzwingen möchte.)

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

Benutzerdefinierte Workspace-Icons

Workspace-Dateien haben spezielle kleine Icons wie dieses.

Da ich diese in mein Dock lege, 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 wahrscheinlich viele Male am Tag danach greifen werde.

Mit ein wenig Inspiration vom Original habe ich mir das SVG-Logo geschnappt und es unten rechts auf meine Projektlogos geklatscht.

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

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

Terminalbefehle beim Öffnen eines Projekts ausführen

Nachdem ich jetzt diese wirklich praktischen Ein-Klick-Icons zum Öffnen meiner Projekte habe, dachte ich: "Wie cool wäre es, wenn es auch die Befehle zum Starten des Projekts auslöst!" Offenbar sind dafür Tasks da, und es war nicht allzu schwer einzurichten (danke, Andrew!). Direkt neben dieser Einstellungsdatei, unter .vscode/tasks.json, habe ich 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 denke, man muss den Task einmal manuell ausführen (Terminal → Task ausführen), damit er die richtigen Berechtigungen hat, dann funktioniert es von da an.

Überschreibungen

Ich glaube nicht, dass das unbedingt spezifisch für Workspaces ist, aber mir gefällt sehr gut, 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 vorverarbeitet. Das ist alles gut und schön, 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 gilt und nicht für alle meine Projekte.

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