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


990

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?


47
Dla wszystkich, którzy desperacko próbują sformatować XML (co wydaje się obecnie niemożliwe po wyjęciu z pudełka), możesz to osiągnąć, instalując rozszerzenie. Znalazłem Narzędzia XML, aby dobrze wykonać zadanie. Oświadczenie: Nie jestem autorem ani nie jestem związany z tym projektem ...
informatik01

Podczas gdy VSCode ma znacznie mniej opcji menu niż VS (nowy trend?), Zawiera obszerne informacje i samouczki w menu POMOC, które mogły odpowiedzieć na to pytanie.
Roland

Dla wszystkich tych, którzy próbują uzyskać formatowanie, nawet po wypróbowaniu prawidłowych kombinacji w programie Visual Studio Code, nie zapomnij wybrać odpowiedniego typu języka programowania, znajduje się on w prawym dolnym rogu okna kodu programu Visual Studio obok tej buźki. Gdy to zrobisz, okazało się, że działa ono od razu po wyjęciu z pudełka i nie potrzebujesz żadnej dodatkowej wtyczki do formatowania kodu.
Mr.Hunt

Odpowiedzi:


3837

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 .


28
Pamiętaj również, że kod języka musi być poprawny. tzn. kod formatu nie będzie dostępny, jeśli zostanie wybrany zwykły tekst, ale przejście na JSON (na przykład) spowoduje formatowanie zaznaczonego tekstu. (tak szczęśliwy, jak edytor tekstu może być i tak)
Stephen Price

4
@JoSmo: W Ubuntu otworzyłem Plik> Preferencje> Skróty klawiaturowe. Jest element dla {„key”: „ctrl + shift + i”, „command”: „editor.action.format”, „when”: „editorTextFocus”}. Polecenie „ctrl + shift + i” działa dla mnie.
Asheesh,

18
Ponadto najwyraźniej plik należy najpierw zapisać na dysku. Miałem fragment HTML + JavaScript, w którym nie mógł sformatować JS, więc wkleiłem go do tymczasowego okna i ustawiłem język, ale to też nie pomogło, dopóki nie zostało zapisane.
Jonas,

9
Dla osób twierdzących, że nie działa na komputerze Mac, wygląda to na konflikt między skrótem a systemem wprowadzania tekstu OS X dla znaków akcentowanych, który zależy od skonfigurowanych ustawień regionalnych i klawiatury: github.com/Microsoft/vscode/issues / 8914 # emisecomment-245947844
Chris Adams,

8
To nie działa dla mnie w najnowszej wersji VS Code i Win 10. Czy to zakłada, że ​​ma zainstalowane jakieś rozszerzenie?
JayPex,

479

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 PlikPreferencjeUstawienia 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ę.


Działa również w innym języku z tym:
Beautify

3
nie jestem pewien, dlaczego różni się w CentOS, ale tak jestShift + Alt + I
a11smiles

2
beautify.onSave nie działa z zainstalowanym rozszerzeniem eslint
Ben Petersen

Shift + Alt + IRównież na Ubuntu
Mate

2
@ClintEeastwood spróbuj użyć prettier.singleQuote: truew ustawieniach vs kodu.
Enn

216

Możesz dodać skrót klawiszowy w menu PlikPreferencjeSkró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" }

23
W systemie Windows, należy wymienić cmdz ctrl- nie tylko ślepo kopiować i wklejać tak jak ja!
Jens Ehrich,

3
„editor.action.format” znów działa. Teraz formatuje cały dokument, jeśli nic nie jest zaznaczone, w przeciwnym razie formatuje zaznaczenie.
Czerwony Kapturek

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

Wpisz opis zdjęcia tutaj


18
W systemie Linux skróty klawiaturowe to Ctlr + Shift + I
Lucas

Co to jest pole menu?
Peter Mortensen

@PeterMortensen pole, w którym widać menu. Na zrzucie ekranu jest to białe pudełko z „Formatuj dokument”, „Wytnij”, „Kopiuj”, „Wklej” itp.
Ben Leggiero

117

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


2
Gdy tylko skopiujesz i wkleisz kod ze schowka do nowej karty , nic się nie stanie. Rozwiązanie: Zapisz kod w pliku z powiązanym rozszerzeniem (np. * .Json). To działa. Przypuszczam, że powodem jest to, że program upiększający zna język z rozszerzenia i nie wykonuje autodetekcji na podstawie kodu.
Beauty

Ten skrót działa na MAC. W systemie Windows formatuje kod.
C. Damoc

63

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.

Dzięki temu poleceniu w moich plikach TypeScript pojedynczy cudzysłów staje się podwójny. Jak to rozwiązać?
DioBrando

Nie można tego zlokalizować w nowym interfejsie śmieci.
Oliver Dixon,

63

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.


61

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


Sugeruję rozszerzenie EsLint dla VS Code marketplace.visualstudio.com/…
Dariusz

44

W Ubuntu jest to Ctrl+ Shift+ I.


7
Myślę, że to zależy od języka. CTRL + SHIFT + Idziała na JavaScript, ale nie na przykład na PHP.
Jamie Carl

32

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ń.


1
Jasne, używam systemu Windows i działa on zgodnie z opisem - może zależeć od wersji VScode (proszę zaktualizować!) I rozszerzenia pliku. Testuj za pomocą HTML.
Gerfried


32

Menu PlikPreferencjeUstawienia

"editor.formatOnType": true

Gdy wpiszesz średnik, zostanie on sformatowany.

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


co dziwne, stwierdziłem, że zachowanie tego ustawienia może być inne niż shift+alt+fw niektórych sytuacjach. nie wiem dlaczego!
JzInqXc9Dg

Po włączeniu tej funkcji i utworzeniu funkcji w języku C # mogę dokończyć całość i przejść dalej, ale funkcja nie jest sformatowana, dopóki nie uruchomię funkcji „Formatuj dokument”. Nie wiem, dlaczego powyższe ustawienie nie formatuje się po wpisaniu funkcji.
Daniel Jackson


24

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 PlikPreferencjeSkróty klawiaturoweCommand+ K Command+, Sa następnie wpisać Formatter i dodać skrót.

Zobacz przykład:

Wpisz opis zdjęcia tutaj


23

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ń.

    Wpisz opis zdjęcia tutaj

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

    Shift+ Alt+F

    Wpisz opis zdjęcia tutaj


1
Czasami kopiuję xml wklej do nowego pliku i chcę go sformatować bez zapisywania pliku. Jest to idealne rozwiązanie w takich sytuacjach!
user3885927,

19

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


18

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.


Aby sformatować C # należy zainstalować rozszerzenia. Zwykle omnisharp powinien działać. Istnieje jednak błąd w omnisharp. Do czasu naprawienia błędu musimy używać rozszerzenia Leopotam.csharpfixformat. Zastępuje omnisharp. Po zainstalowaniu rozszerzenia C # FixFormat mogę ponownie formatować dokumenty.
Oncel Umut TURER,

18

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

Zawsze możesz sprawdzić przypisania klawiszy w menu:

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


14

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 PlikPreferencjeUstawienia 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).

    Jak to wygląda

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 PlikPreferencjeUstawienia 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 .


9

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!


Tak, ale tylko 2 na 5 gwiazdek? Poważnie?
kmoser

Przypominamy: ta odpowiedź została napisana w 2017 roku i że w tamtym czasie funkcjonalność VS Code działała właściwie za pośrednictwem wtyczek lub innych hacków, żadne inne rozwiązanie nie działało dla mnie w tym czasie, więc sam to odkryłem, które faktycznie działało w tym czasie i zależało na tym, ile ma gwiazdek :-) Teraz 2020 i obsługa formatowania jest fantastyczna od razu po wyjęciu z pudełka.
Mumair

Nie sądzę, że VS Code obsługuje formatowanie CSS po wyjęciu z pudełka. Zainstalowałem wtyczkę Prettier ( prettier.io ), która obsługuje JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown, YAML. 5,6 miliona instalacji i 4 gwiazdki.
kmoser

Cieszę się, że znalazłeś ładniejsze: P Obsługa formatowania jest dostępna, ale nie jest tak ładniejsza, używam ładniejszej jako zależności programistycznej we wszystkich moich projektach .prettierrci wtyczce. Obawiam się, że pewnego dnia ładniej połączy się w vs-code :)
Mumair

8

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

Wpisz opis zdjęcia tutaj

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




7

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.


1
Gdzie to położyć? Pomaga również dodać, że upiększenie jest rozszerzeniem ...
rotgers

Państwo mogłoby wspomniałem gdzie umieścić ten kod.
gromit190,

6

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

Zobacz ten zrzut ekranu:

img


6

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.


Beautify zapyta cię, czy nie wie, jakiego formatyzatora użyć, umożliwiając stylizację cshtml.
Cees Timmerman,

6

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” .


5

Nie ten. Użyj tego:

Menu PlikPreferencjeUstawienia obszaru roboczego , „editor.formatOnType” : true


3
Nie ten co? Czy odnosisz się do innej odpowiedzi? Jeśli tak, to który?
Peter Mortensen


Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.