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.

Odpowiedzi:


279

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

Dodaj do swojego settings.jsonpliku:

"editor.formatOnSave": true

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


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 }

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.


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