10 Dicas Essenciais de Produtividade para o Visual Studio Code

O Visual Studio Code explode editores de texto de programação fora da água. É gratuito, de código aberto, rápido e cheio de recursos de produtividade.

O Visual Studio Code explode editores de texto de programação fora da água.  É gratuito, de código aberto, rápido e cheio de recursos de produtividade.
Propaganda

O Visual Studio Code é facilmente o melhor editor de texto de programação. Ele substituiu o Sublime Text como meu editor de código de escolha e nunca mais vou voltar. É um aplicativo JavaScript baseado em elétron (como o Atom, outro editor de texto altamente elogiado), mas é muito rápido e não sofre problemas de desempenho, como a maioria dos aplicativos JavaScript.

E caso você esteja se perguntando, sim: VS Code é código-fonte aberto e disponível no GitHub 10 Ferramentas Open Source gratuitas do Windows hospedadas no GitHub 10 Ferramentas Open Source gratuitas do Windows hospedadas no GitHub A Microsoft é a organização com os contribuidores mais abertos no GitHub. Para celebrar essa conquista, compilamos uma lista das melhores ferramentas gratuitas do Windows que você pode baixar do GitHub. Consulte Mais informação . Dez anos atrás, se eu tivesse dito a você que a Microsoft adotaria o software de código aberto, você teria rido. Olha o quão longe nós chegamos!

De qualquer forma, vamos ao assunto. Aqui estão algumas dicas essenciais do Visual Studio Code que você deve aprender se quiser aumentar sua produtividade e fluxo de trabalho para o próximo nível.

1. Domine a paleta de comandos no código VS

visual-studio-code-command-palette

Assim como o Sublime Text (e o TextMate antes dele), o VS Code tem algo chamado paleta de comandos . Esse recurso permite que você acesse vários comandos digitando-os em vez de ser forçado a navegar pelos menus usando o mouse.

Você pode abrir a paleta de comandos com o atalho de teclado Ctrl + Shift + P. Basta começar a digitar o que você deseja fazer (por exemplo, "fechar") e as opções serão atualizadas em tempo real. Alguns comandos são categorizados (por exemplo, "Arquivo", Git ", " Terminal ", etc.), para que você possa usá-los para localizar comandos que parece não encontrar.

2. Definir uma pasta de projeto de trabalho

pasta de trabalho-código-estúdio-visual

Se você clicar em Explorer na barra lateral de navegação, verá um novo sub-painel aberto. Este subpainel é dividido em duas seções: Open Editors (ou seja, arquivos e documentos atualmente abertos) e No Folder Opened. O último é o que nos interessa.

Clique em Abrir Pasta (ou você pode navegar para Arquivo> Abrir Pasta na barra de menus) e selecione qualquer pasta em seu sistema. Isso carregará essa pasta no VS Code como o “projeto de trabalho atual”, permitindo fácil acesso a todos os arquivos e subpastas, para que você não precise continuar alternando para o File Explorer.

3. Visualizar vários arquivos de uma só vez

visual-studio-code-side-by-side

A maioria dos editores de texto modernos pode suportar vários arquivos de uma só vez, permitindo que você alterne entre arquivos abertos por meio de algum tipo de interface baseada em guias. Editores de texto mais avançados podem até mesmo suportar edição de texto lado a lado, o que faz o VS Code (embora apenas horizontalmente).

Mas a edição lado-a-lado é difícil em telas menores, quer isso signifique em um laptop ou em um monitor mais antigo - e é aí que o VS Code brilha.

Ele tem algo chamado de painéis dinâmicos, onde se um dos painéis de documentos abertos for muito estreito, ele aumentará automaticamente quando você ativar esse documento (ou seja, colocar o cursor nele). Se você ainda estiver usando uma resolução próxima a 720p, vai adorar esse recurso.

4. Edite várias linhas de uma só vez

visual-studio-code-multiple-cursors

Se você precisar inserir ou excluir várias instâncias de texto em um documento, tudo o que você precisa fazer é criar vários cursores . Você pode fazer isso pressionando Alt (ou Option no Mac) e clicando em qualquer lugar no texto. Cada clique cria um novo cursor.

Isso é particularmente útil para coisas como HTML, onde você pode querer adicionar muitas instâncias da mesma classe ou alterar o formato de vários hiperlinks. Aprenda e ame.

5. Vá para Definição

visual-studio-code-definition

Quando você está programando ou criando scripts, muitas vezes você encontrará uma variável ou método que não reconhece. Então, o que você faz? Você pode passar vários minutos pesquisando o arquivo correto, ou pode selecionar a variável / método com o cursor e pressionar F12 para pular imediatamente para sua definição.

Ou você pode usar o atalho de teclado Alt + F12 para simplesmente dar uma olhada na definição, que mostra a definição na linha onde o cursor está, em vez de abrir o arquivo de origem.

visual-studio-code-inline

Para ir na direção oposta, você pode selecionar uma variável definida / método e usar o atalho de teclado Shift + F12 para encontrar todas as referências a ele. Isso também aparece na linha do seu cursor.

Para que esses recursos funcionem, você precisa garantir que a pasta apropriada seja aberta como o “projeto de trabalho atual” (consulte a dica nº 2).

6. Renomeie todas as ocorrências

refactor de código de estúdio visual

Refatoração é um aspecto necessário de escrever e manter o código limpo 10 Dicas para escrever mais limpo e melhor Código limpo parece mais fácil do que realmente é, mas os benefícios valem a pena. Veja como você pode começar a escrever códigos mais limpos hoje. Leia mais, mas isso pode ser uma grande dor de cabeça - especialmente quando você está refatorando um módulo grande ou um grande pedaço de código. Então, em vez de procurar dezenas de arquivos apenas para renomear uma variável ou método, deixe o VS Code fazer isso por você.

Se você selecionar uma variável / método e clicar em F2, poderá editar o nome e ele mudará todas as instâncias do nome da variável ao longo de todo o projeto atual.

Se você quiser apenas alterar dentro do arquivo atual, use o atalho de teclado Ctrl + F2 e o VS Code gerará um cursor em todas as instâncias do arquivo atual.

7. Pesquise em muitos arquivos

pesquisa de código de estúdio visual

Se você estiver trabalhando com arquivos que não são código-fonte, os recursos de localização de símbolos acima (na dica nº 5) não serão utilizáveis. Então, o que você pode fazer quando precisa encontrar uma frase ou palavra, mas não sabe em qual arquivo está? Você volta para a função básica de busca .

Ctrl + F permite pesquisar dentro do arquivo atual, enquanto Ctrl + Shift + F permite pesquisar em todos os arquivos em todo o projeto atual, incluindo todas as subpastas recursivamente.

8. Use a linha de comando no código VS

terminal de código de estúdio visual

O VS Code vem com um terminal integrado . No Windows, este terminal aparece como Prompt de Comando. No Mac e no Linux, aparece como um prompt Bash. De qualquer maneira, o terminal começa no diretório atual do projeto de trabalho (se houver um carregado) ou na sua pasta pessoal (se nenhum projeto estiver carregado).

Também suporta a capacidade de ter múltiplos terminais separados. Basta clicar no + no canto superior direito para gerar mais instâncias de terminal ou clicar na Lixeira para fechar o terminal atual. O menu suspenso facilita a alternância entre eles (e não desperdiça o mesmo espaço de tela que uma interface baseada em guias).

9. Instale um novo tema no código VS

temas de códigos de estúdio visual

Como seria de se esperar, o VS Code permite que você tema o realce de sintaxe do texto e do código-fonte. Infelizmente, ele não permite o uso da própria interface, mas o destaque da sintaxe é o importante. Você ficaria surpreso com o quanto um bom tema pode aumentar sua produtividade.

Você pode encontrar novos temas no mercado de códigos VS (eles são gratuitos) ou você pode procurá-los diretamente no código VS.

10. Instalar extensões de terceiros no código VS

extensões de código de estúdio visual

O último recurso essencial a destacar é a extensibilidade do VS Code por meio de extensões de terceiros . Tal como acontece com os temas, você pode encontrá-los no mercado de código VS (sim, estes são livres também) ou você pode procurá-los no código VS. Acesse o painel Extensões com o atalho de teclado Ctrl + Shift + X.

Extensões são a chave para maximizar sua produtividade. Você encontrará todos os tipos de ferramentas aqui, como linters, depuradores, trechos, melhorias de qualidade de vida para o próprio VS Code, ferramentas de construção e até mesmo um que implemente a emulação Vim As 7 principais razões para dar ao editor de texto Vim uma chance As 7 principais razões para dar ao editor de texto Vim uma chance Por anos, eu tentei um editor de texto após o outro. Você nome, eu tentei. Eu usei cada um desses editores por mais de dois meses como meu principal editor do dia-a-dia. De alguma forma, eu ... Leia mais.

Código do Visual Studio é o melhor editor de texto

Por mais que eu ame, serei o primeiro a admitir que o VS Code não é perfeito para ninguém - nada é - e pode não ser o que você está procurando. Ou talvez seja exatamente o que você precisa!

Experimente e entre com a mente aberta. Eu acho que você ficará surpreso com o que você encontra. Note que o VS Code é apenas um editor de texto, não um IDE! (Saber mais sobre as diferenças entre editores de texto e editores de texto IDEs vs IDEs: Qual é o melhor para programadores? Editores de texto vs IDEs: Qual é o melhor para programadores? Escolher entre um IDE avançado e um editor de texto mais simples pode ser difícil Oferecemos algumas dicas para ajudá-lo a tomar essa decisão. Leia mais.)

In this article