podział projektów na Workspace w Visual Studio Code

Oddzielone przestrzenie tak żeby każdy projekt był „osobnym workspace” to idealne podejście by nie mieszały się katalogi i by nie wprowadzić zmian w złym miejscu. W VS Code da się to łatwo, poprawnie zrobić wykorzystując workspace.

Workspace w VS Code pozwala zapisać:

• które foldery są otwarte
• ustawienia specyficzne dla projektu, np. dla PHP, WordPressa, linterów itp.
• rozszerzenia włączone tylko dla tego projektu
• nie ma ryzyka, że edytujesz pliki z innego projektu

Kroki:

1. otwórz główny katalog projektu w VS Code (projekt może być otwarty lokalnie lub na serwerze, nie ma to znaczenia)
2. w menu: File → Save Workspace As…
3. jeśli chcesz zapisać jako skrót na lokalnym komputerze a pliki masz na serwerze, kliknij przycisk koło ścieżki „Show local”
4. zapisz np. mynewapp.code-workspace w jakimś centralnym folderze (może ~/VSCodeWorkspaces/), może on też być zapisany lokalnie, co pozwala potem otwierać projekt zapisanym plikiem, taki rodzaj skrótu na pulpicie czy w katalogu projektów
5. powtórz dla pozostałych projektów ;)

Jeśli chcesz by Workspace kierował do konkretnego katalogu, pierw otwórz tylko ten katalog, poprzez File → Open Folder… i dopiero wybierz File → Save Workspace As…

dodatkowe zabezpieczenie

edycja pliku name.code-workspace poprzez:

• wejdź w: File → Preferences → Settings, w prawym górnym rogu kliknij ikonę Open Settings (JSON), lub przycisk „Edit as JSON” upewnij się, że edytujesz Workspace Settings, nie User – odpowiednia zakładka
• przez skrót klawiaturowy Ctrl + Shift + P i wpisujesz Open Workspace Configuration File

można dodać:

{
  "folders": [
    {
      "path": "docker/myweb.com"
    }
  ],
  "settings": {
    "files.exclude": {
      "**/node_modules": true
    },
    "editor.tabSize": 2
  }
}

kolorowe paski statusu

1. otworzyć ustawienia workspace
2. ustawić „workbench.colorCustomizations” w "settings":{} dla np. paska statusu
3. każdy projekt będzie miał inny kolor → wizualne ostrzeżenie, że jesteś w odpowiednim katalogu
4. zmiana jest natychmiastowa, nie trzeba restartu VS Code.

"workbench.colorCustomizations": {
    "editor.selectionBackground": "#1ea4d9",
    "statusBar.background": "#1ea4d9",
    "statusBar.foreground": "#ffffff",
    "statusBar.noFolderBackground": "#68217a"
}

Szybkie przełączanie między projektami

Po zapisaniu workspace możesz:

• kliknąć File → Open Workspace… i wybrać projekt
• stworzyć skrót na pulpicie do pliku .code-workspace