Dicas de atalhos para otimizar a produtividade no VS CODE

Olá pessoal,

Em primeiro lugar, gostaria de expressar minha gratidão e parabenizar todos os professores que estão nos proporcionando uma grande aprendizagem nessa nova jornada.

Também quero agradecer aos meus colegas que estão trilhando essa jornada junto comigo. Como muitos de nós estamos no começo, cada dia é uma vitória.

Às vezes, quando assistimos alguns tutoriais, eles não mostram todos os jeitos rápidos e dicas usados no VS Code. Isso pode nos fazer sentir um pouco perdidos, principalmente se estamos começando. Então, quero compartilhar algumas dicas sobre atalhos no VS Code que pode nos ajudar no dia a dia. Se você tiver alguma dica ou sugestão para adicionar, por favor, compartilhe nos comentários.

Atalhos Úteis:

Alt + ↑ / ↓ (Move a linha para cima ou para baixo): Se você quiser mover uma linha inteira, esse comando torna isso muito fácil.

Shift + Alt + ↓ / ↑ (Copia a linha para cima ou para baixo): Em vez de selecionar todo o texto e usar Ctrl + c e Ctrl + v, use esse comando.

Ctrl + Shift + K (Deleta uma linha): Caso queira excluir uma linha.

Ctrl + / (Adiciona uma linha de comando ou comenta uma linha de código, e vice-versa).

Shift + Alt + A (Cria um bloco de comentário na linha entre o código): Se você quiser fazer um comentário sem comentar a linha inteira, utilize esse comando para comentar apenas uma parte.

Alt + ← / → (Navegar entre abas).

Ctrl + D (Seleciona o próximo elemento com o mesmo nome, podendo editar todos ao mesmo tempo).

Ctrl + ` (Abre o terminal no VS Code).

Dica Adicional:

Uma dica útil é criar elementos HTML com classes ou ID de forma eficiente.

Para classes utilizamos o elemento seguido de . + o nome que deseja nomear;

Para ID utilizamos o elemento seguido de #(Hashtag) + o nome que deseja nomear;

Segue alguns exemplos :

span.nome-da-classe

span.classe-a.classe-b (Para várias classes no mesmo elemento, use outro ponto)

span#nome-do-id

span.classe#id (para criar uma classe e um ID juntos no mesmo elemento)

Se você quiser criar elementos dentro de outros elementos, pode usar o sinal > (maior que) para criar elementos aninhados. Por exemplo:

div>span - Cria uma div e um span dentro dela.

div#id>span.classe - Cria uma div com um ID e um elemento span com uma classe.

Para criar vários elementos rapidamente, use o * (asterisco) seguido pela quantidade desejada:

ul>li.lista*10 - Cria uma lista não ordenada (ul) com 10 itens de lista (li) dentro dela.

Esses são apenas alguns que achei legal trazer. Essas informações foram retiradas no site do VS CODE, o link está logo abaixo. Entre para conhecer outros comandos e evoluir cada dia mais.

Ah, compartilhe dicas e sugestões de atalhos, extensões, temas para ajudar todos nós que estamos iniciando nessa jornada.

Muito obrigado pelo seu tempo.

Que a força esteja com todos vocês :)

Links :

# Documentação VS CODE : https://code.visualstudio.com/docs/getstarted/tips-and-tricks

# Arquivo PDF de atalhos : https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf