🙅🏼 🧕🏼 🔵 Trabalho profissional em VS Code: 4 dicas 👨🏿‍🤝‍👨🏾 👨🏽‍🤝‍👨🏼 🥈

VS Code é um dos editores de código mais populares atualmente. Uma abordagem cuidadosa para usar este editor pode aumentar significativamente a produtividade do programador. Este artigo fornece algumas dicas para o uso profissional do VS Code. Felizmente, essas dicas são úteis.

1. Usando vários cursores

Pode acontecer que um programador precise inserir o mesmo texto em vários lugares ao mesmo tempo.

Por exemplo, no código a seguir, você adiciona um atributo class=«odd»ao primeiro, terceiro e quinto elementos <li>. E para o segundo, quarto e sexto elementos você precisa adicionar um atributo class=«even».

<ul>
  <li>Lorem, ipsum dolor.</li>
  <li>Lorem, ipsum dolor.</li>
  <li>Lorem, ipsum dolor.</li>
  <li>Lorem, ipsum dolor.</li>
  <li>Lorem, ipsum dolor.</li>
  <li>Lorem, ipsum dolor.</li>
</ul>

É assim que deve ser no editor.

Código no editor

Como resolver este problema? Eu costumava fazer assim:class=«odd»insiraalgo como textoem um lugar e, em seguida, copie para a área de transferência e cole onde quer que precise. No entanto, depois que aprendi sobre a capacidade de trabalhar com vários cursores no VS Code, parei de fazer isso. Isso aumentou muito a eficiência do meu trabalho.

Em particular, estamos falando sobre o seguinte. Para adicionar vários cursores ao texto, você precisa manter pressionada uma teclaAltno teclado (no macOS - a teclaOption) e clicar nos locais onde os cursores devem aparecer. Depois disso, tudo o que for digitado no teclado aparecerá simultaneamente onde houver cursores.

Usando vários cursores

Deixe-me lembrá-lo de que estamos falando sobre os seguintes atalhos de teclado:

Do Windows: Alt+ .
MacOS: Option+ .

2. Renomeando entidades e o comando Renomear Símbolo

Agora vamos aprender outro truque simples.

Ao inserir um código ou texto de um documento, você pode encontrar um erro na grafia de uma palavra. Ou talvez você precise aplicar uma nova convenção de nomenclatura de entidade em seu código. Em situações como essa, torna-se necessário processar várias linhas ao mesmo tempo.

Vamos imaginar que temos um código semelhante ao abaixo. Precisamos substituir todas as ocorrências foopor bar. Como fazer isso?

function foo(){
  // ...
}
foo();
foo();
foo();

Se você alterar manualmente cada linha, essa abordagem tem algumas desvantagens:

Muito trabalho manual.
Alta probabilidade de erros.

Para resolver este problema, você pode usar o comando do menu de contexto Rename Symbol.

Usando o

comando de menu Renomear Símbolo Este menu é chamado quando você clica com o botão direito do mouse no texto selecionado. Outra forma de invocar este comando é pressionar F2após selecionar o texto a ser editado.

3. Mova as linhas selecionadas para cima e para baixo

Às vezes, você precisa mover algum tipo de código de programa ou texto simples para cima ou para baixo no documento. Este problema pode ser resolvido assim:

Selecione o texto.
No Windows, usaremos um atalho de teclado Alt+ para mover o texto para cima. Para mover o texto para baixo, respectivamente, use o atalho do teclado Alt+ .
No macOS, a chave Alté uma chave Options.

Isto é o que parece.

Mover o texto para cima e para baixo

Com essa abordagem, você pode alterar a ordem do texto de forma rápida e fácil.

4. Snippets

Conforme escrevemos o código, temos que inserir constantemente as mesmas construções repetitivas no teclado.

Por exemplo, os arquivos HTML5 sempre contêm a seguinte estrutura básica de documentos:

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
</head>
<body>
</body>
</html>

E ao escrever loops for em JavaScript, sempre inserimos os seguintes snippets de código:

for(let i = 0; i < ; i++){
  
}

Existem muitos outros exemplos semelhantes. Se você tivesse que inserir esses trechos de código manualmente, sempre que precisar, seria muito ineficiente.

Felizmente, o VS Code nos fornece um mecanismo de preenchimento automático configurável. Isto é o que parece.

Preenchimento automático

Vamos falar sobre como configurar o VS Code e adquirir o que é mostrado na figura anterior.

▍ Criação de um arquivo de configuração

Para configurar o preenchimento automático no VS Code, você deve primeiro criar um arquivo de configuração apropriado. O editor lê este arquivo usando os mecanismos apropriados. Para criar este arquivo, é necessário acessar o menu, conforme mostrado na figura a seguir Code > Preferences > User Snippets.

Comando de menu de snippets do usuário O

painel a seguir aparecerá.

Painel para trabalhar com snippets

Aqui você pode selecionar arquivos de configuração existentes e editá-los. Você também pode criar um novo arquivo de configuração aqui. Nós vamos fazer exatamente isso.

Selecionar um comando aquiNew Global Snippets filecriará um arquivo de configuração que está disponível globalmente. Se você selecionar o comando de visualizaçãoNew Snippets file for 'test', será criado um arquivo que está disponível localmente na área de trabalho atual.

Vamos criar um arquivo local.

Após selecionar o comando, oNew Snippets file for 'test'sistema solicitará o nome do arquivo.

Inserindo o nome do novo

arquivo Criamos um arquivo de configuração, mas até agora está vazio.

Novo arquivo de configuração vazio

Para sua conveniência, gravei todo o processo descrito acima e o apresentei aqui como um arquivo gif animado.

Criação de um novo arquivo de configuração

▍ Criação de snippets

O arquivo de configuração armazena dados no formato JSON. Aqui está um exemplo de seu conteúdo.

Conteúdo do arquivo de configuração

Aqui é o mesmo, mas em texto simples:

{
 "html5 autocomplete": {
  "prefix": "html5",
  "body": [
   "<!DOCTYPE html>",
      "<html lang=\"en\">",
      "<head>",
      "  <title></title>",
      "</head>",
      "<body>",
      "</body>",
      "</html>"
  ]
 }
}

Primeiro, vamos dar uma olhada no campo «html5 autocomplete». O significado deste campo é apenas informar o programador sobre o propósito do snippet. Você pode adicionar qualquer coisa aqui.

Vamos lidar com o campo agora «prefix»: «html5». A intenção é descrever a abreviatura que definimos, que o editor expande em um fragmento de código. Quando inserimos texto no editor html5, o editor o substitui automaticamente pelo que está especificado no elemento «body».

Elemento«body»: […]contém o código que o editor deve inserir no documento em vez do prefixo que inserimos. Como esse código pode consistir em várias linhas, esse campo é representado por uma matriz. Cada elemento da matriz é uma linha de código. Se "traduzirmos" a construção que acabamos de considerar para a linguagem do código HTML comum, descobrimos que é equivalente ao seguinte:

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
</head>
<body>
</body>
</html>

Agora que temos um arquivo de configuração simples à nossa disposição, vamos testá-lo.

Testando o arquivo de configuração

▍Scope snippets

Certificamo-nos de que nosso arquivo de configuração permitia o preenchimento automático. Mas tem uma desvantagem. O fato é que a construção representada pelo prefixo html5é utilizada apenas em arquivos HTML. Não precisamos dessa construção em arquivos JavaScript.

Nesses casos, a capacidade de especificar o escopo dos snippets é muito útil. Ou seja, estamos falando sobre um campo «scope»: «html»que precisa ser adicionado à descrição do snippet.

Limitando o escopo de um snippet a arquivos HTML

Vamos tentar nosso sistema novamente. Vamos tentar o prefixohtml5no arquivo HTML e no arquivo JS.

Testando o snippet no arquivo HTML e JS

No arquivo JS, como você pode ver, a entradahtml5não leva a nada de especial. E é exatamente disso que precisamos.

▍Cursor

Vamos tentar o preenchimento automático no arquivo que acabamos de criar novamente. Vamos dar uma olhada nisso. Existe alguma falha nisso?

Investigação do preenchimento automático da entrada Você

pode ver que depois de inserir um bloco de código no editor, o cursor entra automaticamente no final deste bloco. Mas o bloco de código que é inserido automaticamente no documento é apenas um espaço em branco que ainda precisa ser trabalhado. Em particular, você precisa inserir o conteúdo da tag <title>.

Seria muito mais conveniente usar nosso mecanismo de conclusão de entrada se o cursor fosse posicionado automaticamente entre as partes de abertura e fechamento da tag <title>.

Para fazer isso, podemos usar uma construção especial no arquivo de configuração $0. Isto é o que parece.

Definindo a localização do cursor

Agora, depois que o código está no documento, o cursor é automaticamente posicionado onde está no arquivo de configuração$0.

O cursor está posicionado no local desejado

▍ Exemplo

Agora, para reforçar o que acabamos de aprender, vejamos um novo exemplo.

Gostaríamos que foria seguinte construção aparecesse automaticamente após inserir o texto em um arquivo JavaScript ou TypeScript :

for(let i = 0; i < ; i++){
}

E também - para que o cursor fosse posicionado automaticamente depois i <.

Você não precisa procurar a solução para esse problema por enquanto. Tente resolver sozinho.

Em geral, a solução para este problema pode ser representada pelo seguinte arquivo de configuração:

{
 "for-i loop": {
    "prefix": "fori",
    "scope": "javascript, typescript",
    "body": [
      "for(let i = 0; i < $0; i++){",
      "}"
    ]
 }
}

Aqui está uma demonstração.

Usando o snippet fori Os

snippets são usados dessa maneira. Já falei muito sobre isso, já que os snippets são um dos meus recursos favoritos do VS Code. Acho que será útil para você também. Anteriormente, quando encontrava partes duplicadas de código, eu precisava copiá-las de arquivos que já as continham. É um processo lento e sujeito a erros. E agora, graças à capacidade de formatar fragmentos de código como snippets, a tarefa de inserir fragmentos de código repetidos se tornou muito mais fácil.

Quais recursos o VS Code possui para ajudá-lo no seu dia a dia de trabalho?

Trabalho profissional em VS Code: 4 dicas