O Visual Studio Code, popularmente conhecido como VS Code, é um dos editores de código mais utilizados. O VS Code tem suporte integrado para Node.js, JavaScript e TypeScript. No entanto, você pode usar várias extensões para torná-lo acessível à maioria das outras linguagens e tempos de execução.
A Microsoft é a empresa que desenvolveu este editor de código gratuito e de código aberto.
O VS Code é popular devido a esses recursos;
- Intellisense: o VS Code fornece preenchimento automático de código e realce de sintaxe.
- Plataforma cruzada: você pode usar este editor de código nos sistemas operacionais Linux, Windows e macOS.
- Disponibilidade de várias extensões: A disponibilidade de várias extensões também pode transformar o VS Code em um ambiente de desenvolvimento integrado (IDE).
- Suporte a vários idiomas: você pode usar esta ferramenta com quase todas as linguagens de programação por meio das extensões do VS Code.
- Terminal integrado: O terminal integrado no VS Code permite que os desenvolvedores executem comandos Git diretamente do editor de código. Assim, você pode confirmar, enviar e receber alterações deste editor.
últimas postagens
Formatação automática no VS Code
Pré-requisitos
- VS Code: Este editor de código é gratuito para download. Caso não o tenha instalado em sua máquina, baixe-o no site oficial, dependendo do seu sistema operacional.
- Selecione o idioma a ser usado: Você deve decidir o idioma a ser usado, pois existem diferentes formatadores para diferentes idiomas.
- Um formatador: o VS Code usa extensões para formatação de código. Usaremos o Prettier neste artigo. No entanto, você pode usar qualquer formatador adequado ao idioma que está usando.
A formatação automática é um recurso que formata automaticamente blocos/linhas de código ou um arquivo no editor de código com base em regras e diretrizes específicas. Este recurso é baseado em um arquivo de configuração especificando regras de formatação de recuo, quebras de linha e espaçamento.
Quando o recurso de formatação automática estiver ativado, todas essas regras serão aplicadas a todos os arquivos em sua base de código enquanto você os escreve.
No entanto, você também pode desabilitar a formatação automática para um bloco de código específico se quiser que ele se destaque do resto. Para conseguir isso, você pode agrupar o trecho de código em um bloco de comentários que especifica as regras a serem aplicadas.
Benefícios dos códigos de formatação automática no código VS
- Economiza tempo: escrever código e formatar pode consumir muito tempo. A formatação automática economiza seu tempo e, portanto, você pode se concentrar mais no processo de escrita e na sintaxe.
- Consistência: Mesmo que o código-fonte não apareça no lado do cliente, deve haver alguma consistência. A formatação automática é útil, especialmente para grandes projetos com vários colaboradores.
- Observa as práticas recomendadas: o recurso de formatação automática é útil para impor convenções consistentes de recuo, espaçamento e nomenclatura.
- Para facilitar a leitura do código: o código bem formatado é fácil de seguir durante as revisões de código. Novos desenvolvedores que ingressam em sua organização entenderão facilmente o código bem formatado.
Como ativar o formato automático no código VS e personalizá-lo
Siga estas etapas para ativar a formatação automática:
Depois que o Prettier estiver instalado no seu VS Code, você poderá ativar o recurso de formatação automática.
Usamos um arquivo HTML simples de uma página de login para demonstrar como ativar a formatação automática.
Usaremos este código:
<!DOCTYPE html> <html> <head> <title>Login Form</title> </head> <body style> <h2 style="text-align: center; margin-top: 50px;">Login </h2> <form action="" method="POST" style="max-width: 250px; margin: 0 auto; background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);"> <label for="email" style="display: block; margin-bottom: 10px;">Enter Email</label> <input type="email" id="email" name="email" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br> <label for="password" style="display: block; margin-bottom: 10px;">Enter Password</label> <input type="password" id="password" name="password" required style="width: 100%; padding: 10px; border-radius: 3px; border: 1px solid #ccc;"><br><br> <input type="submit" value="Login" style="background-color: #af4c9e; color: white; padding: 10px 20px; border: none; border-radius: 3px; cursor: pointer;"> </form> </body> </html>
Embora o código acima seja funcional, é difícil de ler e acompanhar, pois não está recuado conforme o esperado. Usaremos o Prettier para formatar automaticamente o código.
Siga esses passos.
3. Digite Formatter na barra de pesquisa e selecione Prettier na guia Editor:Formatador padrão.
4. Localize Editor: Formatar em Salvar e marque a caixa.
5. Salve seu arquivo HTML, selecione as entradas em seu documento HTML, clique com o botão direito do mouse e selecione Formatar documento.
6. Verifique se o seu documento foi formatado. Esta extensão formatará automaticamente todos os outros códigos que você escrever no seu VS Code.
6. Ajuste as configurações do Prettier: O Prettier é configurado para executar muitas coisas por padrão. No entanto, você ainda pode personalizá-lo para atender às suas necessidades. Vá para Configurações no seu VS Code, procure por Prettier e ajuste as configurações ao seu gosto.
7. Crie um arquivo Prettier Configuration: As configurações que você configurou em sua máquina podem diferir das outras se você trabalhar em equipe. Um arquivo de configuração Prettier garantirá que você tenha um estilo de código consistente para o seu projeto. Crie um arquivo .prettierrc com extensão .json para definir as configurações do seu projeto. Podemos adicionar esse código ao arquivo JSON para fins de demonstração;
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}
O bloco de código acima especifica quatro coisas, vírgulas à direita, a largura da tabulação, o uso de ponto-e-vírgula e se deve usar aspas simples ou duplas. Nesse caso;
- Uma vírgula à direita só será adicionada quando o código for transpilado para es5.
- A largura da tabulação, o número de espaços para cada tabulação, é definida como 4.
- Semi indica se você deve adicionar ponto e vírgula ou não ao seu código no final das instruções. Definimos como falso, o que significa que não serão adicionados ponto e vírgula.
- Você pode usar aspas simples ou duplas em seu código. Especificamos que devemos usar aspas simples para este projeto.
Você pode verificar os documentos do Prettier para entender como criar definições de configuração consistentes.
Práticas recomendadas para formatação automática no VS Code
Use a formatação correta
Embora tenhamos usado o Prettier neste artigo para fins de demonstração, isso não significa que ele se aplica a todos os idiomas. Existem centenas de extensões de formatação para o VS Code, e cabe a você determinar o que atende às suas necessidades. Por exemplo, formatadores como Prettier e Beautify adequam-se a HTML e CSS. Por outro lado, você pode usar as extensões Black ou Python para formatar seu código Python.
Use um estilo de código consistente
Como você viu, você pode personalizar as configurações do formatador. Se você estiver trabalhando em equipe, certifique-se de ter as mesmas configurações para criar um estilo de código consistente. A melhor abordagem é criar um arquivo .prettierrc.extension para incluir todas as configurações do seu projeto.
Usar linters
Você pode usar linters para verificar violações de estilo, erros de sintaxe e erros de programação em seu código. A combinação de linters com formatação automática economizará muito tempo e esforço para tornar seu código legível e depurar.
Utilize atalhos de teclado
O VS Code possui centenas de atalhos para economizar seu tempo na formatação. Você pode até personalizar esses comandos para algo memorável.
Verifique seu código antes de confirmar
Embora o linting e a formatação automática possam corrigir alguns problemas em seu código; você ainda precisa revisar seu código antes de inserir o comando commit.
Atalhos de formatação de código
O VS Code é um editor de código multiplataforma que você pode usar em sistemas baseados em Windows, Mac e Linux, como o Ubuntu. Você pode usar os seguintes atalhos para formatar o documento inteiro ou áreas específicas realçadas do seu código;
janelas
- A combinação Shift + Alt + F formata o documento inteiro.
- A combinação Ctrl + K, Ctrl + F formata uma seção do seu código que você selecionou. Por exemplo, um div.
Mac OS
- A combinação Shift + Option + F formata todo o documento.
- A combinação Ctrl + K, Ctrl + F formata uma seção do seu código que você selecionou. Por exemplo, um div.
ubuntu
- A combinação Ctrl + Shift + I formata o documento inteiro.
- A combinação Ctrl + K, Ctrl + F formata uma seção do seu código que você selecionou. Por exemplo, um div.
No entanto, observe que alguns desses atalhos podem falhar se você tiver personalizado seu VS Code com vários atalhos.
Você pode verificar seus atalhos do VS Code usando estas etapas;
- Abra o VS Code e clique no item Arquivo no canto superior esquerdo.
- Role até Preferências
- Clique em Atalhos de teclado para ver todos os atalhos que você pode usar.
Conclusão
A formatação automática pode economizar muito tempo quando você a habilita. A escolha de uma extensão será diferente dependendo do idioma que você estiver usando. Você pode instalar vários formatadores de código, dependendo das linguagens de programação usadas em seus projetos.
Sempre verifique a documentação do formatador que você escolher para o seu código. Isso garantirá que você entenda os idiomas suportados e como tirar o melhor proveito disso.
Confira nosso artigo sobre as melhores extensões do VS Code que os desenvolvedores devem usar.