Jak formatować kod podczas zapisywania w VS Code

185

Chciałbym automatycznie formatować kod TypeScript przy użyciu wbudowanego programu formatującego, gdy zapisuję plik w Visual Studio Code.

Zdaję sobie sprawę z następujących opcji, ale żadna z nich nie jest wystarczająco dobra:

  • Sformatuj ręcznie Shift + Alt + F
  • Formatuj według typu "editor.formatOnType": true
    • Formatuje linię po naciśnięciu klawisza Enter. Niestety, pozostawia to niesformatowane, gdy klikniesz myszą inną linię lub naciśniesz strzałkę w górę / w dół.
  • Użyj istniejącego rozszerzenia
    • Próbowałem ten jeden , ale nie wydają się działać zbyt dobrze.
  • Użyj upiększania "beautify.onSave": true
    • Nie działa z TypeScript
  • Napisz rozszerzenie niestandardowe
    • Jest to trudne, jeśli chcesz poprawnie obsługiwać automatyczne zapisywanie i kompilacje.
visual-studio-code vscode-settings code-formatting Tomas Nikodym
źródło

Odpowiedzi:

279

Od września 2016 r. (VSCode 1.6) jest to teraz oficjalnie obsługiwane .

Dodaj do swojego settings.jsonpliku:

"editor.formatOnSave": true
Tomas Nikodym
źródło
5
czy istnieje sposób na wykluczenie niektórych plików? tj. chcę formatować tylko pliki .js, a nie pliki .html.
gabrielAnzaldo
@ gabodev77prettier w VS Code ma do tego opcje (np. prettier.javascriptEnable, prettier.cssEnable ...), ale nie dla HTML.
Freewalker
7
Czy można go sformatować za pomocą automatycznego zapisywania? formatOnSave działa u mnie tylko wtedy, gdy ręcznie wciskam Cmd + S.
Freewalker
@gabrielAnzaldo Zobacz to pytanie, aby dowiedzieć się, jak wykluczyć określone pliki / typy plików: stackoverflow.com/questions/44831313/ ...
Gama11
@LukeWilliams Obecnie nie jest to możliwe, istnieje prośba o dodanie
Gama11
64

Aby automatycznie formatować kod przy zapisywaniu:

  • Naciśnij, Ctrl ,aby otworzyć preferencje użytkownika

  • Wprowadź następujący kod w otwartym pliku ustawień

    {
    "editor.formatOnSave": true
}

  • Zapisz plik

Źródło

Zameer
źródło
33

Jeśli chcesz automatycznie formatować przy zapisywaniu tylko ze źródłem JavaScript, dodaj to do Users Setting(naciśnij Cmd,lub Ctrl,):

"[javascript]": { "editor.formatOnSave": true }
Long Nguyen
źródło
moja wersja, zacząłem poszukiwania „formatOnSave” i po prostu kliknąć pole wyboru w Code Vs Ustawienia UI
Akin Hwan
26

Nie ma już potrzeby dodawania poleceń. Dla tych, którzy są nowicjuszami w Visual Studio Code i szukają łatwego sposobu na formatowanie kodu podczas zapisywania, postępuj zgodnie z poniższymi krokami.

  1. Otwórz Ustawienia, naciskając [Cmd+,]na komputerze Mac lub korzystając z poniższego zrzutu ekranu.

VS Code - Otwórz obraz polecenia ustawień

  1. Wpisz „ format ” w polu wyszukiwania i włącz opcję „ Formatuj przy zapisywaniu ”.

wprowadź opis obrazu tutaj

Skończyłeś. Dziękuję Ci.

Balasubramani M
źródło
4

W przypadku użytkowników MAC dodaj tę linię do ustawień domyślnych

Ścieżka do pliku to: / Users / USER_NAME / Library / Application Support / Code / User / settings.json

"tslint.autoFixOnSave": prawda

Przykładowy plik to:

{
    "window.zoomLevel": 0,
    "workbench.iconTheme": "vscode-icons",
    "typescript.check.tscVersion": false,
    "vsicons.projectDetection.disableDetect": true,
    "typescript.updateImportsOnFileMove.enabled": "always",
    "eslint.autoFixOnSave": true,
    "tslint.autoFixOnSave": true
}
Richard
źródło