Jak sformatować kod w programie Visual Studio Code (VSCode)

Jaki jest odpowiednik Ctrl+ K+ Fi Ctrl+ K+ Dw systemie Windows w programie Visual Studio do formatowania lub „upiększania” kodu w edytorze Visual Studio Code?

Formatowanie kodu jest dostępne w programie Visual Studio Code za pomocą następujących skrótów:

• W systemie Windows Shift+ Alt+F
• Na Mac Shift+ Option+F
• W systemie Linux Ctrl+ Shift+I

Alternatywnie możesz znaleźć skrót, a także inne skróty, poprzez „Paletę poleceń” udostępnioną w edytorze wraz z Ctrl+ Shift+ P(lub Command+ Shift+ Pna Macu), a następnie wyszukując format dokumentu .

Skrót formatowania kodu:

Kod Visual Studio w systemie Windows - Shift+ Alt+F

Visual Studio Code na MacOS - Shift+ Option+F

Kod Visual Studio na Ubuntu - Ctrl+ Shift+I

W razie potrzeby możesz także dostosować ten skrót za pomocą ustawienia preferencji.

Formatowanie kodu podczas zapisywania pliku:

Visual Studio Code pozwala użytkownikowi dostosować ustawienia domyślne.

Jeśli chcesz automatycznie sformatować treść podczas zapisywania, dodaj poniższy fragment kodu w ustawieniach przestrzeni roboczej programu Visual Studio Code.

Menu Plik → Preferencje → Ustawienia obszaru roboczego

{
    // Controls if the editor should automatically format the line after typing
    "beautify.onSave": true,

    "editor.formatOnSave": true,

    // You can auto format any files based on the file extensions type.
    "beautify.JSfiles": [
        "js",
        "json",
        "jsbeautifyrc",
        "jshintrc",
        "ts"
    ]
}

Uwaga: teraz możesz automatycznie formatować pliki TypeScript. Sprawdź moją aktualizację.

Możesz dodać skrót klawiszowy w menu Plik → Preferencje → Skróty klawiaturowe.

{ "key": "cmd+k cmd+d", "command": "editor.action.formatDocument" }

Lub Visual Studio, takie jak:

{ "key": "ctrl+k ctrl+d", "command": "editor.action.formatDocument" }

1. Kliknij plik prawym przyciskiem myszy
2. Wybierz Formatuj dokument z menu:
   • Windows: Alt Shift F
   • Linux: Alt Shift I
   • System operacyjny Mac: ⌥ ⇧ F

Właściwa kombinacja klawiszy to Shift+ Alt+ F.

Dla Fedory

1. Kliknij File-> Preferences->Keyboard shortcuts .
2. Poniżej Default Keyboard Shortcutswyszukaj ( Ctrl+ F) dla editor.action.format.

Moje przeczytane "key": "ctrl+shift+i"

Możesz to również zmienić. Zapoznaj się z odpowiedzią, jak ... lub jeśli czujesz się trochę leniwy, aby przewinąć w górę:

Możesz dodać skrót klawiszowy w „Preferencjach-> Skróty klawiaturowe”

{ "key": "cmd+k cmd+d", "command": "editor.action.format" }

Lub Visual Studio, takie jak:

{ "key": "ctrl+k ctrl+d", "command": "editor.action.format" }

Uwaga: cmdklucz jest tylko dla komputerów Mac. W systemie Windows i Fedorze (klawiatura Windows)Ctrl

EDYTOWAĆ :

Zgodnie z wersją kodu wizualnego 1.28.2 to właśnie znalazłem.

editor.action.formatjuż nie istnieje. Teraz został zastąpiony przezeditor.action.formatDocument ieditor.action.formatSelection .

Rodzaj editor.action.format w polu wyszukiwania, aby wyświetlić istniejące skróty.

Aby zmienić kombinacje klawiszy, wykonaj następujące kroki:

1. Kliknij editor.action.formatDocument lubeditor.action.formatSelection
2. Po lewej stronie pojawi się ikona przypominająca długopis - kliknij ją.
3. Pojawi się wyskakujące okienko. Naciśnij żądaną kombinację klawiszy i naciśnij enter.

W systemie Linux jest to Ctrl+ Shift+ I.

W systemie Windows jest to Alt+ Shift+ F. Testowane z HTML / CSS / JavaScript i Visual Studio Code 1.18.0.

W przypadku innych języków może być konieczne zainstalowanie określonego pakietu językowego.

Program Visual Studio Code 1.6.1 obsługuje funkcję „ Formatuj podczas zapisywania ”, która automatycznie pobiera odpowiednie zainstalowane rozszerzenia formatera i formatuje cały dokument przy każdym zapisie.

Włącz „Formatuj przy zapisywaniu” poprzez ustawienie

"editor.formatOnSave": true

Dostępne są skróty klawiaturowe (Visual Studio Code 1.7 i nowsze):

Sformatuj cały dokument : Shift+ Alt+F

Tylko wybór formatu : Ctrl+ K, Ctrl+F

W Ubuntu jest to Ctrl+ Shift+ I.

Wystarczy kliknąć tekst prawym przyciskiem myszy i wybrać „Formatuj kod”.

Program Visual Studio Code używa js-beautifywewnętrznie, ale nie ma możliwości modyfikowania stylu, którego chcesz użyć. Rozszerzenie „upiększ” umożliwia dodawanie ustawień.

Menu Plik → Preferencje → Ustawienia

"editor.formatOnType": true

Gdy wpiszesz średnik, zostanie on sformatowany.

Możesz także użyć "editor.formatOnSave": true.

Shift+ Alt+ Fdziała dobrze w wersji 1.17.2 i nowszych.

Z jakiegoś powodu Alt+ Shift+ Fnie działało dla mnie na Mac Visual Studio Code 1.3.1, a tak naprawdę polecenie „Formatuj dokument” w ogóle nie działało. Ale polecenie Formatter działało bardzo dobrze.

Możesz więc użyć Command+ Shift+ Pi wpisać Formatter lub utworzyć własny skrót w menu Plik → Preferencje → Skróty klawiaturowe → Command+ K Command+, Sa następnie wpisać Formatter i dodać skrót.

Zobacz przykład:

Formatowanie kodu w Visual Studio.

Próbowałem sformatować w systemie Windows 8.

Wystarczy wykonać zrzuty ekranu poniżej.

1. Kliknij Widok na górnym pasku menu, a następnie kliknij Paletę poleceń.

   

2. Wtedy pojawi się pole tekstowe, w którym potrzebujemy wpisać Format

   Shift+ Alt+F

   

W Visual Studio Code Shift+ Alt+ Frobi to, co Ctrl+ K+ Drobi w Visual Studio.

Skrót formatu w C # nie działał dla mnie, dopóki nie zainstalowałem Mono dla Mac OS X, DNVM i DNX .

Przed zainstalowaniem Mono skrót do automatycznego formatowania ( Shift+ Alt+ F) działał tylko dla .jsonplików.

Na Macu Shift+ Alt+F działa dla mnie.

Zawsze możesz sprawdzić przypisania klawiszy w menu:

Plik menu → Preferencje → Skróty klawiaturowe i filtruj według słowa kluczowego „format”.

Zmiana domyślnego zachowania programu Visual Studio Code wymaga rozszerzenia, ale można zastąpić domyślne zachowanie w obszarze roboczym lub na poziomie użytkownika. Działa dla większości obsługiwanych języków (mogę zagwarantować HTML, JavaScript i C #).

Poziom obszaru roboczego

Korzyści

• Nie wymaga przedłużenia
• Może być dzielony między zespołami

Wyniki

• .vscode/settings.json jest tworzony w folderze głównym projektu

Jak?

1. Przejdź do: Menu Plik → Preferencje → Ustawienia obszaru roboczego

2. Dodaj i zapisz "editor.formatOnType": truedo settings.json (który zastępuje domyślne zachowanie projektu, nad którym pracujesz, tworząc plik .vscode / settings.json).

   

Poziom środowiska użytkownika

Korzyści

• Nie wymaga rozszerzenia
• Dostosowywanie środowiska programistycznego do rządzenia nimi wszystkimi (ustawienia :))

Wyniki

• Użytkownik settings.jsonjest zmodyfikowany (patrz lokalizacja według systemu operacyjnego poniżej)

Jak?

1. Przejdź do: menu Plik → Preferencje → Ustawienia użytkownika

2. Dodać lub zmienić wartość "editor.formatOnType": false, aby "editor.formatOnType": truew settings.json użytkownika

Twój użytkownik programu Visual Studio Code settings.json to:

Lokalizacje plików ustawień w zależności od platformy, plik ustawień użytkownika znajduje się tutaj:

• Windows: %APPDATA%\Code\User\settings.json
• Prochowiec: $HOME/Library/Application Support/Code/User/settings.json
• Linux: $HOME/.config/Code/User/settings.jsonplik ustawień obszaru roboczego znajduje się w folderze .vscode w projekcie.

Więcej informacji można znaleźć tutaj .

Domyślnie ten klucz nie działał dla mnie w dokumentach HTML, CSS i JavaScript.

Po przeszukaniu znalazłem popularną wtyczkę JS-CSS-HTML Formatter z 133,796 instalacjami .

Po instalacji wystarczy ponownie załadować okna i nacisnąć Ctrl+ Shift+ Fi zadziałało!

Zaznacz tekst, kliknij zaznaczenie prawym przyciskiem myszy i wybierz opcję „paleta poleceń”:

Otwiera się nowe okno. Wyszukaj „format” i wybierz opcję, która ma formatowanie zgodnie z wymaganiami.

Wystarczy zainstalować program Visual Studio Keymap firmy Microsoft. Problem rozwiązany. : p

Na Macu użyj ⌘+, Ka następnie ⌘+ F.

Dla tych, którzy chcą dostosować pliki JavaScript do sformatowania, możesz użyć dowolnego rozszerzenia we JSfileswłaściwości. To samo dotyczy HTML.

{
    "beautify.onSave": true,
    "beautify.JSfiles": ["js", "json", "jsbeautifyrc", "jshintrc", "ts"],
    "beautify.HTMLfiles": ["htm", "html"]
}

Umożliwi to upiększanie przy zapisywaniu dla TypeScript i możesz dodać XML do opcji HTML.

Jeśli chcesz dostosować styl formatu dokumentu, powinieneś użyć Beautify przedłużeniu.

Zobacz ten zrzut ekranu:

Najpierw musisz zainstalować odpowiednią wtyczkę (np. XML, C # itp.).

Formatowanie nie będzie dostępne, dopóki nie zainstalujesz odpowiedniej wtyczki i nie zapiszesz pliku z odpowiednim rozszerzeniem.

Najprostszym sposobem korzystania z Visual Studio Code (Ubuntu) jest:

Wybierz tekst, który chcesz sformatować za pomocą myszy.

Kliknij prawym przyciskiem myszy i wybierz „Wybór formatu” .

Nie ten. Użyj tego:

Menu Plik → Preferencje → Ustawienia obszaru roboczego , „editor.formatOnType” : true

Użyj rozszerzenia ...

Umożliwia automatyczne formatowanie kodu podczas zapisywania pliku.

Uruchom program Visual Studio Code i Quick Open ( Ctrl+ P), wklej następujące polecenie i naciśnij Enter.

ext zainstaluj format po zapisaniu

https://marketplace.visualstudio.com/items?itemName=gyuha.format-on-save

Kod Visual Studio w systemie Linux:

Ctrl + [ do nieindentalnego bloku kodu i

Ctrl+ ]zrobić masowe wcięcie