Como você formata o código ao salvar no VS Code

185

Gostaria de formatar automaticamente o código TypeScript usando o formatador incorporado ao salvar um arquivo no Visual Studio Code.

Estou ciente das seguintes opções, mas nenhuma delas é boa o suficiente:

  • Formate manualmente Shift + Alt + F
  • Formato no tipo "editor.formatOnType": true
    • Ele formata a linha quando você pressiona enter. Infelizmente, ele não é formatado quando você clica em outra linha ou pressiona a seta para cima / para baixo.
  • Usar extensão existente
    • Eu tentei este um , mas não parecem funcionar muito bem.
  • Use embelezar "beautify.onSave": true
    • Não funciona com TypeScript
  • Gravar extensão personalizada
    • É complicado se você deseja lidar com salvamentos automáticos e compilações corretamente.
visual-studio-code vscode-settings code-formatting Tomas Nikodym
fonte

Respostas:

279

A partir de setembro de 2016 (VSCode 1.6), isso agora é oficialmente suportado .

Adicione o seguinte ao seu settings.jsonarquivo:

"editor.formatOnSave": true
Tomas Nikodym
fonte
5
existe uma maneira de excluir alguns arquivos? ou seja, eu quero apenas formatar arquivos .js e não arquivos .html.
gabrielAnzaldo
@ gabodev77prettier no VS Code tem opções para isso (por exemplo, prettier.javascriptEnable, prettier.cssEnable ...) embora não seja para HTML.
Freewalker 28/09
7
Ele pode formatar no Salvamento automático? formatOnSave está funcionando para mim somente quando eu clico manualmente em Cmd + S.
Freewalker 28/09
@gabrielAnzaldo Veja esta pergunta para saber como excluir determinados arquivos / tipos de arquivo: stackoverflow.com/questions/44831313/…
Gama11 30/03/19
@LukeWilliams No momento, isso não é possível, há uma solicitação de recurso aqui: github.com/microsoft/vscode/issues/45997
Gama11
63

Para formatar automaticamente o código ao salvar:

  • Pressione Ctrl ,para abrir as preferências do usuário

  • Digite o seguinte código no arquivo de configurações aberto

    {
    "editor.formatOnSave": true
}

  • Salvar Arquivo

Fonte

Zameer
fonte
33

Se você deseja formatar automaticamente o salvamento apenas com fonte Javascript, adicione este em Users Setting(pressione Cmd,ou Ctrl,):

"[javascript]": { "editor.formatOnSave": true }
Long Nguyen
fonte
a minha versão, eu comecei a procurar "formatOnSave" e só tinha de clicar em uma caixa de seleção em Configurações UI Código Vs
Akin Hwan
24

Não há mais necessidade de adicionar comandos. Para quem é novo no Visual Studio Code e procura uma maneira fácil de formatar o código ao salvar, siga as etapas abaixo.

  1. Abra as Configurações pressionando [Cmd+,]no Mac ou usando a captura de tela abaixo.

Código VS - Imagem do comando Configurações abertas

  1. Digite ' format ' na caixa de pesquisa e ative a opção ' Format On Save '.

insira a descrição da imagem aqui

Você terminou. Obrigado.

Balasubramani M
fonte
4

Para usuário MAC , adicione esta linha às suas configurações padrão

O caminho do arquivo é: / Usuários / USER_NAME / Biblioteca / Suporte a aplicativos / Código / Usuário / settings.json

"tslint.autoFixOnSave": true

A amostra do arquivo seria:

{
    "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
fonte