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.