O
Visual Studio Code é um editor de código-fonte desenvolvido pela
Microsoft, que oferece suporte a várias linguagens de programação e recursos poderosos. Neste artigo, apresentaremos alguns dos principais plugins, atalhos e comandos que você pode usar no Visual Studio Code para melhorar sua produtividade.
Criando a estrutura básica de um arquivo HTML5
Sem nenhum plugin HTML5 instalado, você pode digitar "
html" e selecionar uma das opções sugeridas, como:
html:5
html:xml
! (cria toda a estrutura HTML5)
ou
!!! (cria o cabeçalho do documento HTML5)
Plugins e extensões úteis
Java IDE (vscode-java-saber)
O Java IDE (versão 0.1.2) é uma extensão que oferece suporte à linguagem Java no Visual Studio Code.
JavaScript Debugger
O JavaScript Debugger (versão 1.76.1) é uma extensão integrada que permite depurar código JavaScript no Visual Studio Code.
Live Server (Five Server)
O Live Server (versão 0.1.12) permite visualizar as alterações feitas em páginas HTML em tempo real no navegador. Para usá-lo, clique com o botão direito do mouse em um arquivo HTML e selecione "Open with Live Server".
Auto Import - ES6 & TS
Esta extensão adiciona suporte a importações automáticas para JavaScript (ES6) e TypeScript.
Auto Complete Tag
Esta extensão completa automaticamente tags de abertura e fechamento no HTML.
Auto Close Tag
Esta extensão fecha automaticamente tags HTML quando você as digita.
Auto Rename Tag
Esta extensão renomeia automaticamente tags de abertura e fechamento no HTML sem precisar renomear uma por uma.
Auto File Name
Esta extensão completa automaticamente nomes de arquivos.
Class Autocomplete for HTML
Esta extensão oferece sugestões de classes CSS para tags HTML.
IntelliSense for CSS Class Names in HTML
Esta extensão oferece suporte ao IntelliSense para nomes de classes CSS em arquivos HTML.
HTML Boilerplate
Esta extensão cria uma estrutura básica em HTML5. Alguns dos comandos disponíveis incluem html:5, html5-boilertemplate, html5-start, html5-start-optimized, html5-bootstrap, html-table e html-form.
Tabnine AI Autocomplete
O Tabnine AI Autocomplete oferece suporte a autocompletar para JavaScript, Python e TypeScript, incluindo esqueletos HTML5.
HTML Snippets SKA
Esta extensão oferece atalhos para criar estruturas de código HTML5, como tabelas, formulários e otimizações de código. Alguns dos atalhos incluem:
- CTRL+SHIFT+H: Cria toda a estrutura de códigos HTML5
- CTRL+SHIFT+T: Cria toda a estrutura de uma tabela
- CTRL+SHIFT+F: Cria toda a estrutura de um formulário
- CTRL+SHIFT+O: Otimiza o código HTML5
- CTRL+ALT+R: Cria todas as classes e IDs no CSS
h2.Trabalhando com seleções e edições múltiplas
O Visual Studio Code permite trabalhar com seleções e edições múltiplas, facilitando a manipulação de código em várias linhas ou blocos de uma só vez. Algumas dicas úteis incluem:
Criando várias divs, listas ou elementos HTML
Para criar várias divs, listas ou outros elementos HTML de uma só vez, você pode usar a notação de multiplicador do Emmet. Por exemplo:
- div*10: cria 10 divs
- ul>li*10: cria 10 itens de lista (li) dentro de uma lista não ordenada (ul)
- div.minha_classe*10: cria 10 divs com a classe "minha_classe"
- div#myId*10: cria 10 divs com o ID "myId"
Selecionando e editando várias tags ou ocorrências
- CTRL+D: Selecione a tag atual e pressione CTRL+D para selecionar outras tags iguais. Em seguida, você pode renomeá-las simultaneamente.
- CTRL+F2: Selecione uma ocorrência ou tag e pressione CTRL+F2 para selecionar todas as ocorrências iguais. Digite um novo nome, ID ou classe e todas as linhas com a mesma ocorrência serão alteradas para a nova ocorrência digitada.
- SHIFT+ALT+SETA para CIMA/BAIXO: Selecione várias linhas e altere todas as linhas de uma só vez. Use SHIFT+SETA para DIREITA/ESQUERDA para selecionar a ocorrência que deseja substituir.
Movendo linhas de código
- ALT+SETA para CIMA/BAIXO: Selecione uma linha de código e use ALT+SETA para CIMA/BAIXO para mover a linha na posição desejada.
Conclusão
O Visual Studio Code é um editor de código poderoso e altamente personalizável. Com os plugins, atalhos e comandos apresentados neste artigo, você pode melhorar sua produtividade e tornar o processo de desenvolvimento muito mais eficiente. Explore essas dicas e extensões para otimizar ainda mais sua experiência com o Visual Studio Code.