VSC przy pracy z WordPress

Jakość kodu i Debugging

• PHP Sniffer & Beautifier (by Samuel Hilson) – Pomaga utrzymać kod zgodnie z oficjalnymi standardami kodowania WordPressa (WordPress Coding Standards)
• Error Lens (by Alexander) – Wyświetla błędy i ostrzeżenia bezpośrednio w linii kodu, zamiast tylko na dole w konsoli. Od razu widzisz, gdzie brakuje średnika

Organizacja pracy

• Project Manager – Pozwala błyskawicznie przełączać się między różnymi projektami (np. różnymi motywami), nad którymi pracujesz
• Path IntelliSense – Podpowiada ścieżki do plików, gdy np. chcesz załączyć obrazek lub inny plik .php

Aby Twój VS Code stał się profesjonalnym środowiskiem do WordPressa, musimy skonfigurować go tak, aby rozumiał specyficzną strukturę PHP oraz poprawnie formatował kod (WordPress ma swoje dość unikalne zasady, np. używanie tabulacji zamiast spacji).

Oto zoptymalizowana konfiguracja do wklejenia w settings.json (Cmd + Shift + P -> „Open User Settings (JSON)”):

{
    // --- PODSTAWY PHP I WP ---
    "php.suggest.basic": false, // Wyłączamy wbudowane sugestie na rzecz Intelephense
    "intelephense.stubs": [
        "wordpress",
        "apache",
        "bcmath",
        "bz2",
        "calendar",
        "Core",
        "curl",
        "date",
        "dom",
        "filter",
        "gd",
        "gettext",
        "hash",
        "iconv",
        "imap",
        "json",
        "libxml",
        "mbstring",
        "mysqli",
        "mysqlnd",
        "openssl",
        "pcntl",
        "pcre",
        "PDO",
        "pdo_mysql",
        "Phar",
        "readline",
        "Reflection",
        "session",
        "SimpleXML",
        "sockets",
        "standard",
        "tokenizer",
        "xml",
        "xdebug",
        "xmlreader",
        "xmlwriter",
        "zip",
        "zlib"
    ],

    // --- FORMATOWANIE ZGODNE Z WP ---
    "editor.tabSize": 4,
    "editor.insertSpaces": false, // WP preferuje taby (szczególnie w PHP)
    "editor.formatOnSave": true,
    
    "[php]": {
        "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
    },

    // --- EMMET W PHP (Kluczowe dla WordPressa) ---
    "emmet.includeLanguages": {
        "php": "html",
        "sass": "sass",
        "scss": "css"
    },

    // --- USPRAWNIENIA INTERFEJSU ---
    "editor.renderWhitespace": "boundary",
    "files.associations": {
        "*.php": "php"
    },
    
    // --- AUTOMATYKA SASS (jeśli masz Live Sass Compiler) ---
    "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/" 
        }
    ],
    "liveSassCompile.settings.excludeList": [
        "**/node_modules/**",
        ".vscode/**"
    ]
}

Dlaczego ta konfiguracja jest ważna?

• intelephense.stubs: Dodanie „wordpress” sprawi, że VS Code przestanie podkreślać funkcje typu get_header() czy the_content() jako błędy. Będziesz też mógł kliknąć w dowolną funkcję WP z klawiszem Cmd, aby zobaczyć jej źródło.
• emmet.includeLanguages: Dzięki mapowaniu „php”: „html”, możesz wewnątrz pliku .php wpisać np. div.container i po naciśnięciu Tab otrzymać gotowy kod HTML, co drastycznie przyspiesza budowanie szablonów.
• Taby vs Spacje: Oficjalne standardy WordPressa (WordPress Coding Standards) wymagają używania tabulatorów. Powyższe ustawienia dopilnują tego automatycznie.
• Live Sass Compiler: Skonfigurowałem go tak, aby kompilował pliki CSS bezpośrednio w tym samym folderze (często w WP plik style.css musi być w głównym katalogu motywu).