Como você formata o código no Visual Studio Code (VSCode)

Qual é o equivalente de Ctrl+ K+ Fe Ctrl+ K+ Dno Windows no Visual Studio para formatar ou "embelezar" o código no editor de código do Visual Studio?

A formatação do código está disponível no Visual Studio Code através dos seguintes atalhos:

• No Windows Shift+ Alt+F
• No Mac Shift+ Option+F
• No Linux Ctrl+ Shift+I

Como alternativa, você pode encontrar o atalho, assim como outros atalhos, através da 'Paleta de comandos' fornecida no editor com Ctrl+ Shift+ P(ou Command+ Shift+ Pno Mac) e, em seguida, pesquisando o formato do documento .

Atalho para formatação de código:

Código do Visual Studio no Windows - Shift+ Alt+F

Código do Visual Studio no MacOS - Shift+ Option+F

Código do Visual Studio no Ubuntu - Ctrl+ Shift+I

Você também pode personalizar esse atalho usando uma configuração de preferência, se necessário.

Formatação de código ao salvar o arquivo:

O Visual Studio Code permite que o usuário personalize as configurações padrão.

Se você deseja formatar automaticamente seu conteúdo enquanto salva, adicione o snippet de código abaixo nas configurações do espaço de trabalho do Visual Studio Code.

Arquivo de menu → Preferências → Configurações da área de trabalho

{
    // 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"
    ]
}

Nota: agora você pode formatar automaticamente arquivos TypeScript. Verifique minha atualização.

Você pode adicionar uma combinação de teclas no menu Arquivo → Preferências → Atalhos do teclado .

{ "key": "cmd+k cmd+d", "command": "editor.action.formatDocument" }

Ou o Visual Studio como:

{ "key": "ctrl+k ctrl+d", "command": "editor.action.formatDocument" }

1. Clique com o botão direito do mouse no arquivo
2. Selecione Formatar documento no menu:
   • Janelas: Alt Shift F
   • Linux: Alt Shift I
   • Mac OS: ⌥ ⇧ F

A combinação de teclas correta é Shift+ Alt+ F.

Para o Fedora

1. Clique em File-> Preferences-> Keyboard shortcuts.
2. Em Default Keyboard Shortcuts, pesquise ( Ctrl+ F) por editor.action.format.

Mina de leitura "key": "ctrl+shift+i"

Você pode mudar também. Consulte esta resposta sobre como ... ou se você estiver com um pouco de preguiça de rolar para cima:

Você pode adicionar uma combinação de teclas em "Preferências-> Atalhos do Teclado"

{ "key": "cmd+k cmd+d", "command": "editor.action.format" }

Ou o Visual Studio como:

{ "key": "ctrl+k ctrl+d", "command": "editor.action.format" }

Observe: a cmdchave é apenas para Macs. Para Windows e Fedora (teclado do Windows), useCtrl

EDIT :

Conforme a versão do Código Visual, 1.28.2foi o que eu encontrei.

editor.action.formatnão existe mais. Agora foi substituído por editor.action.formatDocumente editor.action.formatSelection.

Digite editor.action.formatna caixa de pesquisa para visualizar os atalhos existentes.

Para alterar as combinações de teclas, siga estas etapas:

1. Clique editor.action.formatDocumentoueditor.action.formatSelection
2. Um ícone de caneta aparece à esquerda - clique nele.
3. Um pop-up aparece. Pressione a combinação de teclas desejada e pressione enter.

No Linux, é Ctrl+ Shift+ I.

No Windows, é Alt+ Shift+ F. Testado com HTML / CSS / JavaScript e Visual Studio Code 1.18.0.

Para outros idiomas, pode ser necessário instalar um pacote de idiomas específico.

O Visual Studio Code 1.6.1 suporta " Formatar ao salvar ", que seleciona automaticamente extensões relevantes do formatador instaladas e formata todo o documento a cada salvamento.

Ative "Formatar ao salvar" configurando

"editor.formatOnSave": true

E existem atalhos de teclado disponíveis (código do Visual Studio 1.7 e superior):

Formate o documento inteiro : Shift+ Alt+F

Somente seleção de formato : Ctrl+ K, Ctrl+F

No Ubuntu, é Ctrl+ Shift+ I.

Basta clicar com o botão direito do mouse no texto e selecionar "Formatar código".

O Visual Studio Code usa js-beautifyinternamente, mas não tem a capacidade de modificar o estilo que você deseja usar. A extensão "embelezar" permite adicionar configurações.

Arquivo de Menu → Preferências → Configurações

"editor.formatOnType": true

Quando você inserir o ponto e vírgula, ele será formatado.

Como alternativa, você também pode usar "editor.formatOnSave": true.

Shift+ Alt+ Ffaz o trabalho muito bem na 1.17.2 e acima.

Por alguma razão, o Alt+ Shift+ Fnão funcionou para mim no Mac Visual Studio Code 1.3.1 e, na verdade, o comando "Formatar documento" não funcionou. Mas o comando Formatter funcionou muito bem.

Assim, você pode usar Command+ Shift+ Pe digitar Formatador ou criar seu próprio atalho no menu Arquivo → Preferências → Atalhos de teclado → Command+ K Command+ e Sdepois digitar Formatador e adicionar seu atalho.

Veja um exemplo:

Código de formatação no Visual Studio.

Eu tentei formatar no Windows 8.

Basta seguir as imagens abaixo.

1. Clique em Exibir na barra de menus superior e, em seguida, clique em Paleta de comandos.

   

2. Em seguida, uma caixa de texto aparecerá onde precisamos digitar Formato

   Shift+ Alt+F

   

No Visual Studio Code, Shift+ Alt+ Festá fazendo o que Ctrl+ K+ Destá fazendo no Visual Studio.

O atalho de formato em C # não funcionou para mim até instalar o Mono para Mac OS X, DNVM e DNX .

Antes de instalar o Mono, o atalho de formato automático ( Shift+ Alt+ F) funcionava apenas para os .jsonarquivos.

No Mac, o Shift+ Alt+ Ffunciona para mim.

Você sempre pode verificar as combinações de teclas no menu:

Arquivo de menu → Preferências → Atalhos do teclado e filtre pela palavra-chave 'formato'.

Embora a alteração do comportamento padrão do Visual Studio Code exija uma extensão, você pode substituir o comportamento padrão no espaço de trabalho ou no nível do usuário. Funciona para a maioria dos idiomas suportados (posso garantir HTML, JavaScript e C #).

Nível da área de trabalho

Benefícios

• Não requer uma extensão
• Pode ser compartilhado entre equipes

Resultados

• .vscode/settings.json é criado na pasta raiz do projeto

Como?

1. Vá para: Arquivo de menu → Preferências → Configurações da área de trabalho

2. Adicione e salve "editor.formatOnType": trueem settings.json (que substitui o comportamento padrão do projeto em que você trabalha, criando o arquivo .vscode / settings.json).

   

Nível do ambiente do usuário

Benefícios

• Não requer extensão
• Ambiente de desenvolvimento pessoal tweeking para governar todos eles (configurações :))

Resultados

• O usuário settings.jsonfoi modificado (veja a localização pelo sistema operacional abaixo)

Como?

1. Vá para: menu Arquivo → Preferências → Configurações do usuário

2. Adicione ou altere o valor de "editor.formatOnType": falsepara "editor.formatOnType": truenas configurações do usuário.json

A settings.jsonlocalização do usuário do código do Visual Studio é:

Locais dos arquivos de configurações, dependendo da sua plataforma, o arquivo de configurações do usuário está localizado aqui:

• Janelas: %APPDATA%\Code\User\settings.json
• Mac: $HOME/Library/Application Support/Code/User/settings.json
• Linux: $HOME/.config/Code/User/settings.jsono arquivo de configuração da área de trabalho está localizado na pasta .vscode no seu projeto.

Mais detalhes podem ser encontrados aqui .

Por padrão, essa chave não estava funcionando para mim em documentos HTML, CSS e JavaScript.

Após a pesquisa, encontrei o popular plugin JS-CSS-HTML Formatter com 133.796 instalações .

Após a instalação, basta recarregar as janelas e pressionar Ctrl+ Shift+ F, e funcionou!

Selecione o texto, clique com o botão direito do mouse na seleção e selecione a opção "paleta de comandos":

Uma nova janela é aberta. Procure por "formato" e selecione a opção com formatação conforme o requisito.

Basta instalar o Visual Studio Keymap da Microsoft. Problema resolvido. : p

No Mac, use ⌘+ Ke depois ⌘+ F.

Para aqueles que desejam personalizar quais arquivos JavaScript devem ser formatados, é possível usar qualquer extensão na JSfilespropriedade. O mesmo se aplica ao HTML.

{
    "beautify.onSave": true,
    "beautify.JSfiles": ["js", "json", "jsbeautifyrc", "jshintrc", "ts"],
    "beautify.HTMLfiles": ["htm", "html"]
}

Isso permitirá embelezar ao salvar para TypeScript e você poderá adicionar XML à opção HTML.

Se você deseja personalizar o estilo do formato do documento, use a extensão Embelezar .

Consulte esta captura de tela:

Você deve instalar o plug-in apropriado primeiro (por exemplo, XML, C # etc.).

A formatação não estará disponível até você instalar o plug-in relevante e salvar o arquivo com uma extensão apropriada.

A maneira mais simples de usar no Visual Studio Code (Ubuntu) é:

Selecione o texto que deseja formatar com o mouse.

Clique com o botão direito e escolha "Seleção de formato" .

Esse não. Usa isto:

Arquivo de menu → Preferências → Configurações da área de trabalho , "editor.formatOnType" : true

Usar extensão ...

Ativa a formatação automática do código quando você salva um arquivo.

Inicie o Visual Studio Code e o Quick Open ( Ctrl+ P), cole o seguinte comando e pressione Enter.

instalação ext format-on-save

https://marketplace.visualstudio.com/items?itemName=gyuha.format-on-save

Código do Visual Studio no Linux:

Ctrl+ [para unindent bloco de código e

Ctrl+ ]para fazer um recuo em massa