No cenário de desenvolvimento web em 2023, não há ferramenta mais aclamada do que o VSCode. No entanto, se você é um iniciante, talvez ainda não o conheça.
O desenvolvimento de software exige um editor poderoso com recursos de destaque de código, completude de código, verificação de código, suporte para quase todas as linguagens e muito mais.
Atualmente, o VSCode é a escolha preferida para quase todo o desenvolvimento web.
O que é o VSCode?
VSCode é a abreviação para Visual Studio Code, um editor de código fonte desenvolvido pela Microsoft em 2015. É amplamente utilizado por desenvolvedores de software para escrever, depurar e editar código em várias linguagens de programação. O VSCode é conhecido por sua interface leve, extensibilidade e integração com diversas ferramentas e extensões, o que o torna uma escolha popular para programadores que trabalham em uma variedade de projetos. Sua versão mais recente foi lançada em julho de 2023 com o número de versão 1.81.
Por que Usar o VSCode?
A principal vantagem desse editor de código é sua capacidade extensível. Existem extensões para quase todos os propósitos do desenvolvimento de software.
Outra grande vantagem é a habilidade de customizar várias configurações do editor.
Além disso, o VSCode é um excelente editor para diversas linguagens, como JavaScript, Python, Java, C#, HTML, CSS e muitas outras.
Outra vantagem é a função de IntelliSense no editor. Essa função é incrível porque ela permite que você:
- Autocompletação: O IntelliSense sugere automaticamente palavras, variáveis, funções e métodos enquanto você digita, economizando tempo e reduzindo erros de digitação.
- Sugestões de Métodos e Propriedades: Ele exibe opções disponíveis para métodos e propriedades de objetos, facilitando a descoberta de funcionalidades.
- Detecção de Erros em Tempo Real: O IntelliSense pode destacar erros de sintaxe e problemas relacionados a tipos à medida que você escreve, ajudando a identificar problemas antes de executar o código.
- Documentação Integrada: Informações sobre parâmetros de função, descrições de método e exemplos podem ser exibidos diretamente no editor, auxiliando na compreensão de APIs.
- Exploração Rápida de APIs: O IntelliSense permite que você explore rapidamente bibliotecas e frameworks, oferecendo insights sobre recursos disponíveis enquanto você digita.
- Produtividade Aprimorada: Ao acelerar a escrita de código e fornecer insights contextuais, o IntelliSense aumenta a produtividade do desenvolvedor.
- Redução de Erros: Ao fornecer sugestões precisas e informações úteis, o IntelliSense ajuda a evitar erros comuns e a melhorar a qualidade do código.
IntelliSense é um termo geral para diversos recursos de edição de código, incluindo completude de código, informações de parâmetros, informações rápidas e listas de membros. Os recursos do IntelliSense às vezes são chamados por outros nomes, como "completude de código", "assistência de conteúdo" e "dica de código". (Fonte: Microsoft)
Gostou? Veja mais em IntelliSense na Documentação do VSCode.
Mas isso não é tudo.
Este editor de código é open-source, completamente gratuito, multiplataforma (funciona no Windows, Linux e Mac). Ele oferece suporte a múltiplas linguagens (você pode trabalhar em Português, Inglês, Espanhol ou qualquer outro idioma) e é leve (utiliza recursos de hardware mínimos, exceto memória RAM).
Desvantagens do VSCode
A desvantagem mais notável é o consumo de memória RAM, principalmente se você instalar muitas extensões. No entanto, esse problema é causado pela base Electron. Electron é um framework usado para criar aplicativos de desktop usando tecnologias web, semelhante a um navegador, assim como a reputação do Google Chrome. (Veja a Figura 1).
Figura 1. Piada sobre o Google Chrome. Fonte: Tecmundo
Pessoalmente, eu prefiro desenvolver apenas em tecnologias front-end usando o VSCode, mas isso é uma preferência pessoal.
Instalação
O VSCode pode ser baixado na Página de Download do VSCode. Alternativamente, você pode usar a versão web em vscode.dev. A tela de inicialização do VSCode é mostrada na Figura 2.
Figura 2. Tela de inicialização do VSCode.
Extensões para Engenheiros de Front-End
Eu dividi esta seção em três partes: extremamente essenciais, essenciais e não essenciais. Sinta-se à vontade para instalar apenas as extensões extremamente essenciais no primeiro momento.
Extensões Extremamente Essenciais
1. Live Preview
O campeão entre as extensões do VSCode é o Live Preview, pois essa extensão permite a visualização do seu código web, incluindo HTML, CSS, JavaScript e mais.
Para usar essa extensão, instale-a e, em seguida, crie um arquivo HTML. Um ícone aparecerá no canto superior direito do VSCode. (Veja a Figura 3).
Figura 3. Extensão Live Preview. Fonte: Marketplace do VSCode.
2. Shortcut Menu Bar
É possível expandir a barra de menu do VSCode com funcionalidades úteis usando a extensão Shortcut Menu Bar. Eu recomendo os seguintes menus:
- Beautify: Corrige a indentação do código
- Compare with save: Mostra as diferenças entre o estado atual do arquivo e o estado salvo anteriormente.
- New file: Cria um novo arquivo
- Toggle Terminal: Abre e fecha o terminal
Para personalizar essa extensão, acesse as Preferências/Configurações do VSCode, em seguida, procure por Shortcut Menu Bar na seção de extensões. (Veja a Figura 4).
Figura 4. Minha barra de menu com a extensão Shortcut Menu Bar.
3. Highlight Matching Tag
Similar à nossa recomendação anterior (Etiquetas de Fim de Tag HTML), a extensão Highlight Matching Tag destaca tanto as tags de fechamento quanto as de abertura de elementos/componentes. (Veja a Figura 4).
Figura 4. Captura de tela da extensão Highlight Matching Tag. Fonte: Marketplace do VSCode.
4. IntelliSense para Nomes de Classes CSS em HTML
Ao desenvolver em HTML ou linguagens similares como JSX (como ReactJS), é comum usar classes e frameworks CSS com várias classes. Para auxiliar nisso, a extensão IntelliSense para Nomes de Classes CSS em HTML oferece auto-completar para classes em seu código HTML. (Veja a Figura 5).
Figura 5. Captura de tela da extensão IntelliSense para Nomes de Classes CSS em HTML. Fonte: Marketplace do VSCode.
Extensões Essenciais
5. HTML End Tag Labels
Ao trabalhar com HTML ou JSX (HTML em JS, comum no ReactJS), muitas vezes é desafiador determinar onde uma tag de elemento termina. A extensão HTML End Tag Labels exibe a classe de cada tag de fechamento de elemento. (Veja a Figura 6).
Figura 6. Captura de tela da extensão HTML End Tag Labels. Fonte: Marketplace do VSCode.
Recomenda-se alterar a cor da extensão para #555 ou outra cor que complemente seu tema.
6. Indent-rainbow
Outra extensão que você deve considerar usar é a Indent-rainbow. Esta extensão colore a indentação do código para qualquer linguagem. (Veja a Figura 7).
Figura 7. Captura de tela da extensão Indent-rainbow. Fonte: Marketplace do VSCode.
7. Color Highlight
Uma extensão útil para cores em HTML, CSS e outras linguagens é Color Highlight. Com esta extensão, todas as cores, seja em texto simples (como azul, vermelho), hexadecimal (como #ccc) ou RGB/RGBA (como RGB(200, 100, 80)), aparecerão coloridas com a cor correspondente. (Veja a Figura 8).
Figura 8. Captura de tela da extensão Color Highlight.
8. Web Accessibility
A Acessibilidade na Web garante que os sites sejam utilizáveis por pessoas com deficiência. Apesar de essencial, iniciantes podem negligenciar isso. A extensão Web Accessibility ajuda a desenvolver sites acessíveis e entender as diretrizes WCAG. (Veja a Figura 9).
Figura 9. Captura de tela da extensão Web Accessibility. Fonte: Marketplace do VSCode.
Extensões Não Essenciais
9. Error Lens
A extensão Error Lens apresenta erros de código com cores e os destaca ao lado do código incorreto, auxiliando os desenvolvedores com uma melhor visibilidade. (Veja a Figura 10).
Figura 10. Captura de tela da extensão Error Lens. Fonte: Marketplace do VSCode.
10. Active File In Status Bar
Para projetos com muitos arquivos que possuem o mesmo nome, mas estão em diretórios diferentes, a extensão Active File In Status Bar exibe o caminho completo do arquivo atualmente editado na barra de status. (Veja a Figura 11).
Figura 11. Captura de tela da extensão Active File In Status Bar. Fonte: Marketplace do VSCode.
11. Project Manager
A extensão Project Manager permite gerenciar seus projetos diretamente na interface do VSCode. (Veja a Figura 12).
Figura 12. Meus projetos no Project Manager.
12. VSCode Highlight Matching Tag
A extensão VSCode Highlight Matching Tag realça as tags de abertura e fechamento correspondentes, facilitando a identificação de pares de tags. (Veja a Figura 13).
Figura 13. Captura de tela da extensão VSCode Highlight Matching Tag. Fonte: Marketplace do VSCode.
13. Auto Import - ES6, TS, JSX, TSX (Extensão VSCode)
A extensão Auto Import - ES6, TS, JSX, TSX encontra, analisa e oferece ações de código e conclusão de código para importações em arquivos JavaScript e TypeScript. (Veja a Figura 14).
Figura 14. Captura de tela da extensão Auto Import - ES6, TS, JSX, TSX (Extensão VSCode). Fonte: Marketplace do VSCode.
14. Case Change
A extensão Case Change facilita a alteração da caixa das variáveis dentro do seu código. (Veja a Figura 15).
Figura 15. Captura de tela da extensão Case Change. Fonte: Marketplace do VSCode.
15. ESLint
Se você deseja se tornar um desenvolvedor Front-end, é muito importante saber o que é o ESLint. Ele é um analisador de código estático para manter o seu código dentro de um padrão. Esta extensão integra o ESLint ao VSCode.
16. Prettier
O Prettier é um formatador de código para todas as linguagens e é interessante utilizá-lo em seus projetos. Para integrá-lo ao VSCode, utilize a extensão Prettier.
17. Stylelint
Existe um analisador de código estático para CSS chamado Stylelint. Se você precisa integrar o Stylelint e o VSCode, instale esta extensão.
18. JavaScript and TypeScript Nightly
Esta extensão da Microsoft chamada JavaScript and TypeScript Nightly permite o uso da versão mais recente do JavaScript (JS) e TypeScript (TS).
19. Template String Converter
A extensão Template String Converter auxilia na conversão de strings JavaScript para literais de template, um recurso introduzido no ECMAScript 2015 (ES6).
20. TypeScript Importer
A extensão TypeScript Importer fornece auto-completar para importações em arquivos TypeScript. (Veja a Figura 16).
Figura 16. Captura de tela da extensão TypeScript Importer. Fonte: Marketplace do VSCode.
21. Atualização do Package Json
A extensão Atualização do Package Json ajuda você a identificar as atualizações de pacotes em seu arquivo package.json. (Veja a Figura 17).
Figura 17. Captura de tela da extensão Atualização do Package Json. Fonte: Marketplace do VSCode.
Vamos Além
Nos próximos artigos, você mergulhará no mundo do HTML. Até breve!"
Top comments (0)