Ao digitar comandos no VS Code, tentar ser organizado às vezes pode ser a última coisa em sua mente. Embora a formatação não seja necessária para a execução de um programa, ela ajuda muito durante a depuração e a tentativa de localizar erros.
Neste artigo, mostraremos como formatar código no VS Code junto com outras dicas úteis para manter seu código bem organizado.
Como formatar o código
O VS Code possui comandos integrados para organizar o código atualmente digitado no formato padrão. Essas teclas de atalho não requerem extensões adicionais e podem ser usadas a qualquer momento. Os atalhos são os seguintes:
Para computador
Formate todo o documento:
Abra o arquivo com o código que você deseja formatar.
Pressione “Shift + Alt + F”.
Salve as alterações clicando em “Arquivo” no canto superior esquerdo e escolhendo “Salvar” ou pressionando “Ctrl + S”.
Formatando apenas o código selecionado:
No arquivo com as linhas de código que você deseja formatar, selecione as linhas destacando-as com o mouse.
Pressione “Ctrl + K”.
Pressione “Ctrl + F”.
Salve as alterações escolhendo “Salvar” no menu Arquivo no canto superior esquerdo ou pressionando “Ctrl + S”.
Note que se você pressionar “Ctrl + F” sem primeiro pressionar “Ctrl + K” você abrirá o Menu Find. Se isso acontecer, basta fechar clicando no botão “x” ou pressionando Esc.
Mover linhas para cima ou para baixo:
Mova o cursor para o início da linha que você deseja mover.
Mantenha pressionada a tecla Alt.
Para mover a linha para cima, pressione a seta para cima. Para movê-lo para baixo, pressione a seta para baixo.
Salve seu arquivo escolhendo-o no menu Arquivo no canto superior esquerdo da janela ou pressionando “Ctrl + S”.
Altere o recuo de uma única linha:
Mova o cursor para o início da linha na qual deseja alterar o recuo.
Pressione “Ctrl + ]” para aumentar o recuo.
Pressione “Ctrl + [“ to decrease the indent.
Save changes by selecting Save from the File menu or by pressing “Ctrl + S”.
For Mac
Format the entire document:
Open the file with the code that you wish to format.
Press “⇧ + ⌥ + F.”
Save your changes by clicking “File” on the upper left then choosing “Save” or pressing “⌘ + S”.
Formatting selected code only:
Highlight the part of the document that you wish to format.
Press “⌘ + K”.
Press “⌘ + F”.
Save your file by pressing “⌘ + S” or by choosing “Save” from the File menu on the upper left corner of the window.
Note that using “⌘ + F” without pressing “⌘ + K” beforehand will only open the Find Menu. To close the Find Menu just press “x” on the right side or press Esc.
Move lines up or down:
Place your cursor at the beginning of the line you want to edit.
Hold down the “⌥” Key.
To move a line up, press the up arrow. To move it down, press the down arrow.
Save your changes by choosing “Save” from the File menu or by pressing “⌘ + S”.
Change indentation of a single line:
Move your cursor to the beginning of the line in which you want to change the indention.
Press “⌘ + ]” para aumentar o recuo.
Pressione “⌘ +[“paradiminuirorecuo[“todecreasetheindent
Salve o arquivo pressionando “⌘ + S” ou escolhendo “Salvar” no menu Arquivo no canto superior esquerdo da janela.
Código de formato de código VS ao salvar
O VS Code não possui um comando nativo que formata seu documento ao salvar. Em vez disso, isso pode ser feito instalando uma extensão de formatação em seu aplicativo VS Code. A mais popular dessas extensões é a Prettier, que fornece muitas funcionalidades de formatação para o VS Code. O Prettier pode ser instalado fazendo o seguinte:
Abra o código VS.
Clique no botão Extensões localizado no menu à esquerda. Este é o ícone que se parece com quatro caixas. Alternativamente, você pode pressionar “Ctrl + Shit + x” para PC ou “⌘ + ⇧ + x” no Mac.
Na barra de pesquisa na parte superior do menu, digite Prettier.
Clique no botão Instalar no canto inferior direito do ícone Prettier.
Aguarde a extensão terminar a instalação.
Antes que o Prettier possa começar a formatar automaticamente seu documento ao salvar, você terá que configurar a extensão para ativar o recurso. Isso é feito fazendo o seguinte:
Abra a janela de configurações pressionando “Ctrl +” no PC ou “⌘ +” no Mac.
Na barra de pesquisa digite formatador. Isso deve trazer várias configurações de formatação.
Na configuração Editor: Formatador padrão, certifique-se de que a extensão selecionada seja mais bonita. Se não houver um formatador padrão ou o VS Code estiver usando outro formatador por padrão, pressione a seta suspensa. Selecione “Prettier – Code Formatter” na lista. Alternativamente, Prettier pode aparecer na lista como “esbenp.prettier-vscode”.
Certifique-se de que a opção “Editor: Format On Save” esteja marcada. Caso contrário, alterne a marca de seleção.
Digite “Prettier” na barra de pesquisa de configurações.
Role para baixo até encontrar a linha “Prettier: Require Config”. Certifique-se de que a caixa de seleção foi marcada. Essa configuração impede que o Prettier formate documentos sem um arquivo de configuração. Isso é útil quando você está olhando para o código baixado que pode ter suas próprias regras de formatação. Isso evita que você sobrescreva as opções de formatação involuntariamente. Observe que os arquivos sem título ainda serão formatados automaticamente, mesmo que essa configuração esteja marcada.
Você pode editar configurações específicas do Prettier dependendo de suas preferências. Quando terminar, você pode sair deste menu.
Como você configurou o Prettier para formatar automaticamente somente quando há um arquivo de configuração, você deve criar um para cada projeto. Isso é feito seguindo estas etapas:
Selecione a raiz do seu projeto no menu à esquerda.
Clique no botão novo arquivo para criar um arquivo de configuração.
Nomeie este arquivo como “.prettierrc.”
No arquivo, basta digitar {}.
O Prettier agora formata automaticamente seu documento sempre que você o salvar.
Dicas para manter o código organizado
Embora o recuo não seja necessário para a execução de um programa, ele pode ajudar na depuração compartimentalizando o código em módulos gerenciáveis. As instruções If-Then ou casos aninhados, por exemplo, podem se beneficiar disso tornando cada opção alternativa visualmente distinguível uma da outra. Isso é útil quando você está lidando com erros de lógica em vez de erros de sintaxe.
Se você estiver nomeando módulos ou linhas curtas de código, crie o hábito de usar títulos descritivos em vez de simplesmente chamá-los de módulo 1, módulo 2, etc. Isso torna mais fácil saber qual parte do código executa uma função específica.
É sempre uma boa ideia usar os comentários a seu favor. Esteja você incluindo uma descrição rápida ou apenas adicionando uma nota para si mesmo, os comentários ajudam imensamente durante a depuração.
Código Organizador
Manter seus projetos formatados corretamente não apenas facilita a leitura, mas também ajuda na identificação de erros e mantém seu código organizado. Embora não seja necessário para que um programa seja executado, saber como formatar seus arquivos no VS Code é uma vantagem definitiva.
Você conhece outras maneiras de formatar seus arquivos no VS Code? Sinta-se à vontade para compartilhar seus pensamentos na seção de comentários abaixo.
