Wskazówki: Konfiguracja Edytora

Visual Studio Code

Większość pracy odbywa się w folderze zapisy/, więc tylko ten folder mam otwarty w edytorze.

Rozszerzenia

Mam zainstalowane następujące rozszerzenia: „Python”, „Pylance” (Language Server z szybkim type-checking'iem dla Pythona), „Prettier - Code formatter”, „Vetur” (do pisania komponentów w bibliotece Vue, dobrą alternatywą jest oficjalna wtyczka „Volar”).

Virtualenv

Virtualenv/Venv to popularne Pythonowe narzędzie. Tworzy ono katalog, w którym zainstalowane będą wszystkie zależności konkretnego projektu. W ten sposób różne projekty na tym samym komputerze nie wchodzą sobie w drogę. Virtualenv tworzymy w folderze zapisy/ komendą

python3 -m venv venv    # Uwaga musimy mieć zainstalowanego Pythona 3 oraz moduł venv — na Ubuntu są to paczki python3 i python3-venv.

i możemy je „załadować”

source venv/bin/activate

Równoważne polecenie dla systemu Windows

.\venv\Scripts\activate

Dzięki temu, gdy zainstalujemy pythonowe zależności

pip install -r requirements.development.txt

będą one żyły wyłącznie w naszym projekcie. VSCode sam wykryje to wirtualne środowisko i będzie go używało. Dzięki temu, gdy napiszemy coś podejrzanego (na przykład błędny import), edytor często to podkreśli na czerwono.

Typescript i assety

VSCode sam z siebie rozumie JavaScript/Typescript — także ten w plikach .vue. Przy formatowaniu plików dodatek prettier-vscode się denerwuje, że w pliku package.json wśród zależoności prettier występuje, ale nie jest zainstalowany. Mimo tego ostrzeżenia kod się formatuje za pomocą wersji formattera wbudowanej w dodatek. Dla świętego można ustawić w ustawieniach edytora prettierPath na jakąś niepoprawną ścieżkę, na przykład bundled. Można też zrobić tak, jak w poniższej sekcji.

Instalacja Typescript SDK

VSCode domyślnie używa do analizy kodu wbudowanej w edytor instancji Typescripta. Niestety, nie rozumie ona modułów importowanych za pomocą PnP (Plug'n'Play — mechanizm zastępujący folder node_modules) i nie potrafi sprawdzać typów importowanych zależności. Można powiedzieć edytorowi, żeby używał naszego Typescripta — tego samego, którym kompilujemy nasz kod. W tym celu trzeba uruchomić z konsoli

yarn && yarn dlx @yarnpkg/sdks vscode

co instaluje wszystkie zależności JS-owe, i dodaje odpowiednie ustawienia do .vscode/settings.json. Przy okazji zostaje zainstalowany nasz Prettier i do ustawień VSCode automatycznie zostaje dodana ścieżka do niego — co przy okazji rozwiązuje opisany wyżej problem.

Jeśli wciąż widoczne są błędy w postaci Cannot find module X ... w plikach .vue, to prawdopodobnie konieczne jest ręczne wskazanie wersji Typescripta. W przypadku wtyczki Volar można to zrobić w następujący sposób:

• Otwórz linię poleceń, np. skrótem skrótem ctrl+shift+p.
• Wyszukaj polecenie „Volar: Select TypeScript version...”.
• Wybierz „Use Workspace Version”.

Ustawienia edytora

Mój plik .vscode/settings.json wygląda tak (bez komentarzy; przed instalacją SDK):

{
  "python.pythonPath": "venv/bin/python",    // Wskazuje na binarkę Pythona w naszym Virtualenv'ie.
  "python.formatting.provider": "yapf",      // Czym formatować pliki Pythona.
  "python.formatting.yapfArgs": [            // Jak je formatować.
    "--style={ based_on_style: facebook, column_limit: 100, dedent_closing_brackets: false, }"
  ],
  "python.linting.flake8Enabled": true,      // Używa flake8 do sprawdzania formatowania. Flake8 jest też używany w naszych testach.
  "python.linting.pylintEnabled": false,
  "files.exclude": {                         // Nie pokazuje tych katalogów w panelu po lewej. Wyłącza to też szukanie w nich.
    ".vscode": true,
    "**/venv": true,
    "**/__pycache__": true,
    ".yarn": true,
    "compiled_assets/": true,
    "node_modules/": true
  },
  "prettier.prettierPath": "bundled"         // Używa Prettier dołączonego do dodatku prettier-vscode i nie marudzi.
}