Jak włączyć zawijanie wierszy w Visual Studio Code? Word Wrap VS Code | WebMajka

Jak włączyć zawijanie wierszy w Visual Studio Code — szybka ściąga

Domyślnie Visual Studio Code nie zawija długich linii kodu — jeśli linia jest za długa, trzeba przewijać poziomo suwakiem na dole ekranu. Dla większości programistów to irytujące, szczególnie przy pracy na laptopach z mniejszym ekranem. Zawijanie wierszy (word wrap) włącza się jedną z czterech metod: 1. Skrót klawiaturowy Alt+Z (najszybciej), 2. Menu View → Word Wrap, 3. Ustawienie editor.wordWrap w settings.json, 4. Ustawienie per-language dla konkretnych typów plików. Który wybrać? Alt+Z działa na chwilę (przełącznik), a konfiguracja w settings.json jest trwała. W tym artykule pokażę wszystkie metody i wyjaśnię, dlaczego w niektórych projektach lepiej zostawić zawijanie wyłączone.

Alt+Z — najszybszy sposób na włączenie word wrap

Najprostsza metoda to skrót klawiaturowy — Alt+Z (Windows, Linux) lub Option+Z (macOS). Naciśnięcie przełącza zawijanie w bieżącym edytorze. To rozwiązanie ad-hoc — po restarcie VS Code wraca do domyślnego zachowania (zwykle "off"). Skrót działa w dowolnej zakładce, bez względu na typ pliku. Jeśli Alt+Z nie działa — sprawdź, czy nie jest przypisany do innej funkcji (np. w keymapie Vim) w File → Preferences → Keyboard Shortcuts, szukaj editor.action.toggleWordWrap. Alternatywnie to samo można zrobić przez Command Palette (Ctrl+Shift+P) → wpisać "toggle word wrap". Dla osób przełączających się między plikami z kodem i Markdown-em Alt+Z staje się odruchem — kod wolisz bez zawijania, tekst zawsze z zawijaniem.

Menu View → Word Wrap — metoda graficzna

Jeśli wolisz klikać myszą niż zapamiętywać skróty, skorzystaj z menu głównego. View (Widok) → Word Wrap (Zawijanie wiersza) — checkbox przełącza stan dla bieżącego edytora. To ta sama akcja co Alt+Z. W polskiej wersji językowej VS Code (jeśli masz zainstalowane Polish Language Pack) ścieżka wygląda: Widok → Zawijanie wierszy. Menu tę opcję pokazuje zawsze — nawet gdy edytor jest pusty lub masz otwarte ustawienia. Metoda graficzna jest wolniejsza od skrótu, ale przydatna, gdy uczysz się VS Code i nie pamiętasz jeszcze kombinacji klawiszy.

Trwałe włączenie — ustawienie editor.wordWrap w settings.json

Dla trwałej zmiany konfiguracji edytuj plik settings.json. Otwórz go przez Ctrl+Shift+P → Preferences: Open User Settings (JSON). Dodaj wpis:

{
    "editor.wordWrap": "on"
}

Wartości dla editor.wordWrap:

Opcja bounded jest ulubioną wśród profesjonalistów — łączy korzyść z zawijania (brak poziomego scrollbara) z dyscypliną ograniczonej szerokości (80 lub 120 znaków). Aby ustawić kolumnę: "editor.wordWrapColumn": 120. Pamiętaj, że settings.json akceptuje komentarze (//), więc możesz zostawić notatkę dla siebie, dlaczego dana wartość została ustawiona.

Konfiguracja per-language — różne ustawienia dla różnych plików

Najbardziej pragmatyczne podejście: kod bez zawijania, Markdown i pliki tekstowe z zawijaniem. VS Code pozwala ustawić zachowanie osobno dla każdego języka. W settings.json:

{
    "editor.wordWrap": "off",
    "[markdown]": {
        "editor.wordWrap": "on",
        "editor.quickSuggestions": {
            "other": "off"
        }
    },
    "[plaintext]": {
        "editor.wordWrap": "on"
    },
    "[json]": {
        "editor.wordWrap": "bounded",
        "editor.wordWrapColumn": 120
    }
}

Składnia [język] to selektor language-specific, aktywujący podblok ustawień tylko dla danego typu pliku. Listę języków znajdziesz w prawym dolnym rogu VS Code (klikając na nazwę języka można zmienić tryb). Tak skonfigurowany edytor automatycznie zawija Markdown i plain text, ale zostawia kod (JS, PHP, Python) nienaruszony.

Zawijanie w Visual Studio vs Visual Studio Code — różnice

Uwaga terminologiczna: Visual Studio i Visual Studio Code to dwa różne produkty Microsoftu. Visual Studio (bez "Code") to pełne IDE, głównie dla C#/.NET, Windows, kilkaset MB. Visual Studio Code (VS Code) to lekki edytor, cross-platform, dla wszystkich języków. Ustawienia zawijania różnią się:

• Visual Studio: Tools → Options → Text Editor → All Languages → General → Word wrap (checkbox)
• Visual Studio Code: Alt+Z lub editor.wordWrap w settings.json (opisane wyżej)

Wiele osób myli te programy — jeśli pracujesz głównie z webem (HTML, PHP, JS, Python), prawie na pewno używasz VS Code. Visual Studio ma sens dla .NET, WPF, aplikacji desktopowych Windows. Dla typowej pracy frontend/backend webowej VS Code jest szybszy i bardziej elastyczny dzięki marketplace z tysiącami rozszerzeń.

Ruler — wizualna linia limitu szerokości

Komplementarne do zawijania jest ustawienie pionowej linijki (ruler) wskazującej maksymalną zalecaną szerokość linii. Dodaj do settings.json:

{
    "editor.rulers": [80, 120]
}

Po zapisie edytor pokaże pionowe linie na 80. i 120. kolumnie. 80 znaków to historyczny standard z czasów terminali — do dziś używany w Pythonie (PEP 8) i wielu konwencjach open-source. 120 znaków to nowoczesny kompromis — dla szerokich monitorów. Niektórzy zespoły używają 100 (Airbnb JavaScript Guide) albo 160 (nie polecam, robi niewygodny bałagan). Ruler działa niezależnie od zawijania — to tylko wizualna wskazówka. W połączeniu z bounded + wordWrapColumn: 120 dostajesz idealny setup: linia pomaga pisać w limicie, a zawijanie zapobiega scrollowaniu w razie wyjątków.

Rozszerzenia wpływające na zawijanie

Kilka popularnych rozszerzeń zmienia zachowanie zawijania lub dodaje nowe możliwości. Rewrap (stkb.rewrap) — ręczne zawijanie zaznaczonego tekstu przy Alt+Q, idealne dla komentarzy JSDoc i Markdown. Better Comments — koloruje różne typy komentarzy (TODO, FIXME, notes). Bracket Pair Colorizer (wbudowane od VS Code 1.60) — koloruje pary nawiasów dla lepszej czytelności długich linii. Prettier — formatter kodu automatycznie łamie linie wg printWidth (ustawienie w .prettierrc). ESLint z regułą max-len — ostrzega przy przekroczeniu limitu. Dla systematycznej pracy najlepiej ustawić Prettier + ESLint z regułą max-len: 120, a ręczne zawijanie używać tylko dla komentarzy. Prettier potrafi automatycznie łamać długie wywołania funkcji i importy, co jest cenniejsze niż czysto wizualne zawijanie.

Mini-mapa i overview ruler — nawigacja w długich plikach

Przy pracy z długimi plikami zawijanie to jedno, nawigacja to drugie. VS Code oferuje dwa elementy pomagające w orientacji. Minimap (domyślnie włączona) — miniatura całego pliku po prawej stronie, można w niej klikać. Ustawienia: "editor.minimap.enabled": true, "editor.minimap.side": "right", "editor.minimap.renderCharacters": false (pokazuje bloki zamiast znaków, mniej rozpraszająca). Overview ruler — kolorowe kreski po prawej (obok minimap) oznaczające błędy, ostrzeżenia, zmiany Git, zakładki. Pomaga szybko skoczyć do interesującego fragmentu. Dla długich plików (500+ linii) ta kombinacja jest bezcenna — zawijanie włącza się dla czytelności, a minimapa + overview ruler zapewniają nawigację.

Dlaczego czasem nie warto włączać zawijania

Mimo wygody, zawijanie w kodzie ma wady. 1. Ukrywa problem długich linii. Gdy widzisz poziomy scroll, wiesz, że linia jest za długa i powinieneś ją refaktoryzować. Zawijanie zamienia ten sygnał na "niewidzialny". 2. Utrudnia analizę diff-ów w Git. Code review w GitHubie/GitLabie pokazuje każdą linię pojedynczo — jeśli lokalnie miałeś zawijanie, ale commit zawiera mega-długie linie, zespół ucierpi. 3. Niektóre tools łamią się. Linter może raportować błędy na kolumnie 150, której "nie widzisz" lokalnie. 4. Wygląda źle w kodzie wymagającym wyrównania. Tabele, ASCII art, komentarze blokowe — wszystko się rozjeżdża. Profesjonalny kompromis: kod bez zawijania + Prettier + ruler na 120. Zawijanie włączaj tylko dla Markdown i plain text. Zobacz też najpopularniejsze edytory kodu — większość profesjonalistów trzyma się tej zasady.

Podsumowanie — konfiguracja wg potrzeb

Włączenie zawijania wierszy w Visual Studio Code to kwestia sekundy (Alt+Z) lub trwałej zmiany w settings.json. Rekomendowana konfiguracja dla programisty webowego:

{
    "editor.wordWrap": "off",
    "editor.rulers": [80, 120],
    "editor.minimap.enabled": true,
    "[markdown]": {
        "editor.wordWrap": "on"
    },
    "[plaintext]": {
        "editor.wordWrap": "on"
    }
}

Ten zestaw: wyłącza zawijanie dla kodu (zmusza do krótkich linii), włącza dla Markdown i plain text (czytanie dokumentacji), pokazuje dwie pionowe linijki (80 i 120) oraz minimapę. Dla zespołów warto ustawienia trzymać w repozytorium — VS Code wspiera Workspace Settings w pliku .vscode/settings.json, dzięki czemu wszyscy mają ten sam wygląd. Zerknij też na artykuł o frameworkach JS — wiele z nich narzuca własne standardy długości linii (React → 100, Vue → 100, Angular → 140).