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. 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
  4. powtórz dla pozostałych projektów ;)

dodatkowe zabezpieczenie

edycja pliku name.code-workspace poprzez:

  • wejdź w: File → Preferences → Settings, w prawym górnym rogu kliknij ikonę Open Settings (JSON), upewnij się, że edytujesz Workspace Settings, nie User
  • 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

Hope this helps and happy coding :)

Zobacz jeszcze

praktyczna, zalecana i często spotykana struktura katalogów dla WordPress custom theme

Poniżej struktura katalogów dla custom theme WordPress, zgodna z dobrymi praktykami i gotowa zarówno na klasyczne WP, jak i Gutenberga. W my-theme-wp zamieszczamy: assets src -...