Como criar trechos para o código VS

christoffer noring Blocked Desbloquear Seguir Seguindo 30 de dezembro de 2018

Este artigo é voltado para JavaScript e TypeScript para que os exemplos de código sejam escritos nos idiomas mencionados. No entanto, o artigo descreve a criação de snippets de maneira geral, portanto, mesmo que JavaScript ou TypeScript não sejam a sua escolha de idioma, você entenderá como funciona a criação de snippets .

Vamos falar sobre trechos em geral. Trechos são pedaços de código que podemos usar de novo e de novo em nossos projetos de código. Eles geralmente são criados para acelerar o nosso trabalho de desenvolvimento, para que possamos gastar tempo resolvendo problemas interessantes, em vez de digitar o _same old_ _boring code_ .

Nós tendemos a usar trechos que alguém criou para nós, ou criamos nossos próprios que se encaixam no nosso estilo de codificação.

Então, o que é um bom candidato para fazer um trecho de:

  • Classe , muitas vezes criamos muitas classes em nossa solução
  • Se , tendemos a escrever bastante se , se mais , if else if, else statements
  • Try-catch , esta é também uma construção muito comum. Não seria legal se houvesse um trecho que suportasse try, catch e finalmente ?
  • Função , nós criamos uma tonelada de funções, então algum tipo de função padrão com um número adequado de parâmetros faz sentido
  • Fazendo o log na tela , costumamos fazer isso com bastante frequência para fins de depuração
  • A sua escolha , você pode ter coisas que você faz com bastante frequência – como ler para / de um arquivo, acessar um banco de dados, etc. Quais snippets você precisa exatamente, é com você.

Snippets no código VS

Você pode criar dois tipos de trechos no código VS:

  • global , selecionável para todos os idiomas
  • linguagem específica , só é possível usar para um idioma específico

Criando nosso primeiro trecho

É quase fácil criar um trecho, então vamos fazer exatamente isso e explicar os conceitos à medida que os encontramos.

A primeira coisa que precisamos fazer é selecionar o tipo de snippet que estamos prestes a criar. Nossa escolha aqui é global vs language specific . Vamos para o menu e criar um snippet global . Selecione o seguinte no menu Código / Preferência / Trechos de Usuário

a imagem acima mostra várias coisas interessantes:

  • Fragmentos existentes , se você criou snippets antes, pode selecioná-los e carregá-los no código VS
  • Novo arquivo Global Snippets… , selecionar essa opção cria um arquivo global
  • Arquivos específicos de idioma , selecionando qualquer uma dessas opções, criará um arquivo de fragmento específico para esse idioma. Selecione html por exemplo irá criar o arquivo html.json

Como dissemos anteriormente, vamos criar um arquivo global para selecionar o novo arquivo Global Snippets , a segunda opção do topo. Vamos chamar de global , o show de resultados é assim:

Vale a pena notar que o global nomeou-se global.code-snippets . Este arquivo se colocou em / Users / <username> / Library / Application Support / Code / User / snippets , se você quiser vê-lo depois. Também vemos que tudo é comentado. Há algum código de interesse, embora começando com Exemplo: então vamos descomentar isso e dar uma olhada mais de perto, então é assim:

Agora estamos analisando um exemplo prático. Vale a pena notar como tudo começa com chaves, e a razão para isso é que estamos simplesmente editando um arquivo JSON. O próximo ponto de interesse é imprimir no console. Este é simplesmente o nome do trecho. Imprimir para o console define um objeto dentro de chaves, então vamos detalhar cada propriedade que ele define:

  • escopo , estes são os idiomas suportados para este snippet, os idiomas suportados aqui são javascript e typescript . Cada idioma suportado é separado por uma vírgula. Isso significa que, se estivermos dentro do arquivo .js ou .ts, esse fragmento seria possível usar
  • prefixo , isso é o que você precisa digitar na janela de código para o snippet para aparecer. No nosso caso, precisamos digitar log
  • corpo , este é o seu trecho. O tipo de dados é uma matriz e, para suportar um trecho com várias linhas, precisamos adicionar uma nova entrada à matriz. Nós vamos passar por isso mais tarde
  • descrição , este é um campo que nos permite descrever um pouco mais o que está acontecendo
  • $ 1 , $ 2 , isso é simplesmente onde o cursor acaba quando você aperta o botão de guia

Experimentando nosso trecho

Declaramos que o log é o que precisamos digitar para ativar o snippet e precisamos estar dentro de um arquivo que termine em .js ou .ts . Então vamos tentar:

Podemos ver acima que estamos sendo apresentados a uma lista enquanto digitamos log . O primeiro item da lista é o nosso trecho. Você pode ver que " Print to console" é o que escrevemos como o nome do snippet e " Log output to console" é o nosso campo de descrição. Nós atingimos a chave de return neste momento e acabamos com isso:

Nós vemos nosso trecho sendo colocado na janela de código, e também vemos como nosso cursor acabou dentro do método log () . Por que é que? Isso tem uma explicação muito simples, foi aí que dissemos que o cursor deveria acabar, decidimos que aqui:

Então você vê onde nós colocamos questões de $ 1 ou $ 2 e, corretamente, isso pode realmente acelerar a experiência do desenvolvedor.

Segundo trecho – uma classe

Ok, então saibamos que entendemos o que acontece e a anatomia interna de um fragmento. Vamos criar nosso próprio trecho do zero agora:

Temos um segundo snippet e um snippet de várias linhas. Vamos acabar com isso.

Suportamos javascript e typescript definindo isso como valores para o escopo .

Dizemos para ativar o snippet digitando cc .

Então chegamos ao trecho real – nossa propriedade corporal , que é multilinha. Podemos ver que é multilinha, pois adicionamos um número x de itens em nossa propriedade de matriz de corpo . O valor do corpo é simplesmente o que podemos esperar de uma definição de classe, com um construtor. Nós adicionamos alguns pedaços interessantes aqui, embora $1 e $2 . Aqueles são colocados depois da propriedade de classe e dentro do construtor. Isso é feito de propósito para que o usuário tenha que digitar o mínimo possível. A primeira coisa que você normalmente faz como desenvolvedor é nomear a classe e, em segundo lugar, adicionar algum código de inicialização ao seu construtor. Se essa não for a ordem na qual você faz as coisas, sinta-se à vontade para mover $ 1 e $ 2 para onde eles fizerem sentido para você.

Experimentando nosso trecho

Agora digitamos cc para ativar nosso snippet e nos deparamos com seu nome e descrição. Ao selecionar o trecho pressionando a tecla de retorno , acabamos com isso:

Como você pode ver acima, somos mostrados onde o cursor primeiro termina em $ 1 , que é logo após a aula . Apertando a tecla tab novamente, devemos ir para o ponto da segunda etapa da tabulação, $ 2 . Então vamos ver o que parece:

Nós vemos que nós demos à classe um nome Test e nós batemos em tab e acabamos com o nosso cursor dentro da função constructor.

Snippet específico de idioma

Desta vez, queremos criar um snippet específico do idioma. Então, vamos ao menu e selecionamos Code / Preferences / User Snippets. Uma vez lá, selecionamos Typescript e nos é apresentado o seguinte resultado:

Podemos ver que o nome do arquivo é um pouco diferente desta vez. Em vez de ser chamado de <something> .code-snippets , é chamado de typescript.json . Então, quando o arquivo termina com .json , estamos lidando com um arquivo específico da linguagem. Vale a pena ressaltar que um trecho específico do idioma só funcionará para esse trecho, portanto, se estivermos dentro de um arquivo que termina em .js, digitar nosso valor de prefixo não o ativará. Em vez disso, precisamos estar dentro do arquivo .ts para que nosso snippet seja selecionável.

Ok, vamos pensar por um segundo, nós escolhemos o Typescript como a linguagem específica, então é tudo o que vamos apoiar. Isso significa que estamos prestes a criar snippets usando construções específicas da linguagem, como tipos e outras coisas. Vamos recriar nosso snippet de classe, mas para o Typescript:

Acima nós criamos um snippet que utiliza alguns recursos específicos da linguagem do Typescript, como enum e private usados em um construtor (que cria os campos de apoio para nós) e, para finalizar, criamos um tema bem legal, um ambiente de fantasia. Então, se você tivesse alguma criação de jogo em mente, esse trecho está pronto para ação 🙂

Experimentando nosso trecho

Ok, então configuramos o prefixo para tc, então precisamos digitar tc para ativar nosso trecho. O resultado final é semelhante ao seguinte:

Acima, podemos ver nossa construção enum CharacterTypes está sendo criada e também nosso snippet de classe. Agora podemos criar facilmente um objeto a partir disso digitando, por exemplo:

 const hero = novo herói ('hero', 18, CharacterTypes.Healer); 

É isso aí. Criar um trecho específico de idioma não era tão diferente. A terminação do nome do arquivo parece diferente e é direcionada para um idioma específico.

Resumo

Nós olhamos para trechos no Código VS. Nós mostramos como podemos

  • carregar snippets existentes em nosso ambiente de codificação
  • criar um snippet global / específico de idioma
  • explicar as diferentes partes que compõem um trecho e como usá-lo

Espero que você, com esse novo conhecimento, possa usar os snippets existentes, criar seus próprios snippets e aumentar sua produtividade.

Leitura adicional

Nós apenas arranhamos um pouco o que é possível fazer com um trecho, mas isso deve ser suficiente para você seguir em frente. Para mais informações sobre os snippets, consulte a documentação oficial de Snippets .

Qual é o próximo?

No próximo artigo, abordaremos como podemos empacotar nosso snippet em uma extensão e informar o mundo sobre isso. Por que não deixar toda a comunidade de código se beneficiar da sua criação? 🙂 Fique ligado.