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

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.

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

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

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