O Visual Studio Code, amplamente conhecido como VS Code, destaca-se como um dos editores de código mais populares na atualidade. Ele oferece suporte nativo para tecnologias como Node.js, JavaScript e TypeScript. Além disso, a sua versatilidade é ampliada por meio de diversas extensões, que o tornam compatível com uma vasta gama de outras linguagens e ambientes de execução.
A Microsoft é a empresa responsável pelo desenvolvimento deste editor, que se distingue por ser gratuito e de código aberto.
A popularidade do VS Code reside em suas funcionalidades notáveis:
- Intellisense: Este recurso proporciona preenchimento automático de código e realce de sintaxe, agilizando o processo de desenvolvimento.
- Multiplataforma: O VS Code pode ser utilizado em diversos sistemas operacionais, incluindo Linux, Windows e macOS, garantindo flexibilidade aos usuários.
- Extensões Variadas: A disponibilidade de uma ampla variedade de extensões possibilita transformar o VS Code em um Ambiente de Desenvolvimento Integrado (IDE) completo.
- Suporte a Diversas Linguagens: Através das extensões do VS Code, é possível trabalhar com praticamente qualquer linguagem de programação.
- Terminal Integrado: O terminal embutido no VS Code permite que os desenvolvedores executem comandos Git diretamente no editor, facilitando o versionamento de código.
Formatação Automática no VS Code
Para utilizar a formatação automática, alguns pré-requisitos são necessários:
- VS Code: O editor de código pode ser baixado gratuitamente no site oficial, adequado ao seu sistema operacional.
- Escolha da Linguagem: É importante definir a linguagem de programação a ser utilizada, pois existem formatadores específicos para cada uma.
- Formatador: O VS Code utiliza extensões para a formatação de código. Neste guia, utilizaremos o Prettier, mas você pode escolher o mais adequado à sua linguagem.
A formatação automática é um recurso que aplica regras específicas para organizar blocos de código, linhas ou arquivos dentro do editor. Essas regras são baseadas em configurações de indentação, quebras de linha e espaçamento.
Quando ativado, o recurso aplica essas regras a todos os arquivos do seu projeto enquanto você codifica. No entanto, é possível desativá-lo em trechos de código específicos, agrupando-os dentro de comentários que especificam as regras a serem aplicadas.
Vantagens da Formatação Automática de Códigos no VS Code
- Economia de Tempo: A formatação automática reduz o tempo gasto com organização do código, permitindo que você se concentre na lógica e sintaxe.
- Consistência: Garante a uniformidade na aparência do código, fundamental em grandes projetos com múltiplos desenvolvedores.
- Boas Práticas: O recurso ajuda a impor convenções de indentação, espaçamento e nomenclatura, seguindo as melhores práticas de programação.
- Legibilidade: Um código bem formatado facilita a compreensão durante revisões e a colaboração em equipe.
Como Ativar e Personalizar a Formatação Automática no VS Code
Siga estas etapas para ativar a formatação automática:
- Instale uma extensão de formatação no VS Code. Você pode acessar o ícone de extensões no menu lateral.
- Procure pela extensão “Prettier” (desenvolvida pela própria equipe Prettier) e clique em “Instalar”.
Após a instalação, é possível habilitar a formatação automática.
Para demonstrar a ativação do recurso, utilizaremos um arquivo HTML simples de uma página de login.
Este é o código que vamos utilizar:
<!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>
O código acima, embora funcional, é difícil de ler devido à falta de indentação. O Prettier irá formatá-lo automaticamente.
Siga os seguintes passos:
- Crie um arquivo HTML (index.html) e insira o código acima.
- Acesse as configurações no canto inferior esquerdo do VS Code.
- Na barra de pesquisa, digite “Formatter” e selecione “Prettier” como o formatador padrão na guia “Editor: Formatter”.
- Localize “Editor: Formatar ao Salvar” e marque a caixa correspondente.
- Salve seu arquivo HTML, clique com o botão direito no código e selecione “Formatar Documento”.
- Verifique se o documento foi formatado corretamente. A extensão formatará automaticamente todo código escrito no VS Code.
- Ajuste as configurações do Prettier: O Prettier possui configurações padrão. No entanto, você pode personalizá-las. Nas configurações do VS Code, procure por “Prettier” e ajuste as opções desejadas.
- Crie um arquivo de configuração do Prettier: As configurações em sua máquina podem diferir de outros desenvolvedores. Para manter um padrão de código consistente, crie um arquivo “.prettierrc” com a extensão “.json” para definir as configurações do projeto. Para exemplificar, adicionaremos o seguinte código ao arquivo JSON:
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}
Este bloco de código define quatro configurações: vírgula à direita, largura da tabulação, uso de ponto-e-vírgula e uso de aspas simples ou duplas.
- A vírgula à direita será adicionada apenas se o código for compilado para ES5.
- A largura da tabulação é definida como 4 espaços.
- “semi” definido como “false” indica que o ponto-e-vírgula não será adicionado ao final das instruções.
- Optamos por usar aspas simples.
Consulte a documentação do Prettier para criar definições de configuração consistentes.
Melhores Práticas para Formatação Automática no VS Code
Escolha o Formador Correto
Neste guia, utilizamos o Prettier para demonstrar a formatação automática, mas ele pode não ser a melhor opção para todas as linguagens. Existem inúmeras extensões de formatação disponíveis no VS Code. É importante escolher a ferramenta mais adequada ao seu projeto. Por exemplo, Prettier e Beautify são boas opções para HTML e CSS, enquanto Black e Python são ideais para código Python.
Mantenha um Estilo de Código Consistente
Personalize as configurações do formatador para garantir a uniformidade do código. Ao trabalhar em equipe, certifique-se de que todos utilizem as mesmas configurações. O arquivo “.prettierrc” é a melhor maneira de incluir as configurações do seu projeto.
Utilize Linters
Linters auxiliam na detecção de violações de estilo, erros de sintaxe e problemas de programação. Combinar linters com a formatação automática agiliza a correção de problemas e melhora a qualidade do código.
Utilize Atalhos de Teclado
O VS Code oferece diversos atalhos para acelerar a formatação do código. Você pode personalizar esses atalhos conforme suas necessidades.
Revise seu Código Antes do Commit
Embora linters e formatação automática auxiliem na correção de problemas, é importante revisar o código antes de efetuar um commit.
Atalhos para Formatação de Código
O VS Code pode ser utilizado em Windows, macOS e Linux, como o Ubuntu. Os seguintes atalhos são utilizados para formatar documentos inteiros ou trechos de código selecionados:
Windows
- Shift + Alt + F: Formata o documento inteiro.
- Ctrl + K, Ctrl + F: Formata uma seção de código selecionada.
macOS
- Shift + Option + F: Formata o documento inteiro.
- Ctrl + K, Ctrl + F: Formata uma seção de código selecionada.
Ubuntu
- Ctrl + Shift + I: Formata o documento inteiro.
- Ctrl + K, Ctrl + F: Formata uma seção de código selecionada.
Alguns desses atalhos podem não funcionar caso você tenha personalizado seu VS Code.
Para verificar os atalhos, siga os seguintes passos:
- Abra o VS Code e clique em “Arquivo” no canto superior esquerdo.
- Acesse “Preferências”.
- Clique em “Atalhos de teclado” para visualizar todos os atalhos disponíveis.
Conclusão
A formatação automática economiza tempo. A escolha da extensão dependerá da linguagem de programação. Você pode utilizar vários formatadores no seu projeto. É fundamental consultar a documentação da extensão escolhida para obter o melhor resultado. Explore nosso artigo sobre as melhores extensões para desenvolvedores.