Como adicionar trechos de código personalizados ao Atom
Não é uma coincidência que Átomo, O editor de código fonte criado pelo Github é popular na comunidade de desenvolvimento web. Não é só facilmente extensível com milhares de pacotes Atom e tem um suporte amplo a idiomas, mas quase toda a sua parte é Customizável pelo usuário.
Ao alavancar o Atom Recurso de trechos, você pode tornar seu fluxo de trabalho de codificação mais produtivo, como por reutilizando snippets de código recorrentes você pode reduzir a parte repetitiva do seu trabalho. Neste post, vou mostrar como você pode usar trechos de código internos do Atom, e crie seus próprios snippets personalizados.
Use trechos de código embutidos
Por padrão, o Atom vem com trechos de código internos, cada um dos quais é ligado a um escopo pertencente a um determinado tipo de arquivo. Por exemplo, se você estiver trabalhando em um arquivo com .js extensão, apenas os fragmentos pertencentes ao escopo de JavaScript estarão disponíveis para esse arquivo.
Ver todos os trechos disponíveis para o seu tipo de arquivo atual, pressione Alt + Shift + S. Se você escolher um snippet na lista suspensa e clicar nele, o Atom inserirá o snippet completo no editor sem mais problemas.
Se você já conhece as opções, não precisa necessariamente carregar a lista inteira. Quando você começa a digitar, Atom aparece caixa de resultados de autocompletar up, que contém os trechos de código disponíveis que pertencem ao determinado escopo e a string que você digitou até agora.
Por exemplo, se você digitar o h personagem em um .html arquivo, uma lista suspensa com todos os snippets HTML incorporados que começam com h vai aparecer.
Ao clicar em qualquer opção, o Atom cole a tag HTML completa (por exemplo. ) e posicione o cursor dentro da tag de início e de fechamento.
Se você não quer se preocupar com a lista suspensa, você pode obter o mesmo resultado digitando h1, e apertar Tab ou Enter - ambas as chaves insira o snippet de código completo pertencente ao prefixo do trecho.
Adicionando seus trechos de código personalizados
1. Encontre o arquivo de configuração
Para adicionar seus próprios trechos de código personalizados ao Atom, primeiro você precisa encontrar o arquivo de configuração chamado snippets.cson Aquilo é um Notação de objetos CoffeeScript Arquivo.
Clique no Arquivo> Trechos… menu na barra superior, e Atom irá abrir o snippets.cson arquivo ao qual você pode adicionar seus próprios snippets personalizados.
2. Encontre o escopo certo
Você vai precisar quatro coisas Para adicionar seu snippet personalizado:
o nome do escopo
o nome do trecho
o prefixo que funcionará como o identificador do trecho
o corpo do trecho
O nome, o prefixo e o corpo do snippet (2-4) dependem unicamente de você, mas você deve encontre o nome do escopo (1) antes de adicionar seus snippets personalizados.
Para encontrar o escopo que você precisa, clique no Arquivo> Configurações menu na barra de menu superior, em seguida, localize o Pacotes aba entre as Configurações. Aqui, execute uma pesquisa para o escopo que você precisa, por exemplo, se você quiser adicionar trechos de código à linguagem HTML, digite HTML na barra de pesquisa.
Clique no pacote de suporte a idiomas do idioma escolhido e abra suas próprias configurações. Entre o Configurações gramaticais, você pode encontrar rapidamente o nome do escopo, como você pode ver na imagem abaixo.
Aqui estão alguns escopos que você pode querer usar em seus projetos Atom:
Texto simples: .text.plain
HTML: .text.html.basic
CSS: .source.css
Sass: .source.sass
MENOS: .source.css.less
JavaScript: .source.js
PHP: .text.html.php
Python: .source.python
Java: .source.java
Não esqueça que você precisará adicione um ponto (.) em frente ao nome do escopo a fim de usá-lo no snippets.cson Arquivo.
3. Criar trechos de código de linha única
Para criar um snippet de código de linha única, você precisa adicionar o escopo, o nome, o prefixo e o corpo do snippet ao snippets.cson arquivo, usando a seguinte sintaxe:
'.text.html.basic': 'Título do Widget': 'prefixo': 'wti' corpo ':''
Este snippet de exemplo adiciona um tag com o widget-título classe para o escopo HTML. Você pode adicionar qualquer outro snippet de código de linha única ao seu editor Atom seguindo esta sintaxe.
Depois de salvar o arquivo de configuração, sempre que digite o prefixo e pressione a tecla Tab, O Atom colará o corpo do snippet de associação em seu editor de código. O nome do fragmento (no exemplo Título do Widget) será exibido na caixa de resultados do preenchimento automático.
4. Criar snippets de código de várias linhas
Snippets de código de várias linhas use uma sintaxe um pouco diferente. Você precisa adicionar os mesmos dados que os snippets de linha única: o escopo, o nome, o prefixo e o corpo do snippet.
O que é diferente aqui é que você precisa colocar o corpo do trecho dentro de um par de "" " (três aspas duplas).
Se você quiser adicionar mais de um snippet personalizado para o mesmo escopo, adicione o nome do escopo apenas uma vez, em seguida, liste os fragmentos um por um:
'.text.html.basic': 'Título do Widget': 'prefixo': 'wti' corpo ':'"Image Link ':' prefixo ':' iml" corpo ': "" " "" "
5. Adicionar paradas de tabulação
Você pode facilitar ainda mais o uso de seus snippets de código personalizados adicionando paradas de tabulação para o corpo de trechos. As paradas de tabulação indicam os pontos em que o usuário pode navegar usando a tecla Tab. Com paradas de tabulação você pode economizar o tempo que a navegação no texto requer.
Você pode adicionar paradas de tabulação usando o $ 1, $ 2, $ 3,… sintaxe. Atom posicionará o cursor no local que encontrar US $ 1, então você pode pular para US $ 2 com a tecla Tab, então para US $ 3, e assim por diante.
Atom permite que você adicionar informação extra para seus trechos usando parâmetros opcionais. Esse recurso pode ser útil se outra pessoa também usar seu editor e você quiser que ele saiba a finalidade do snippet ou, se você tiver snippets personalizados tão complicados, precisar adicionar anotações a eles.
Os valores dos parâmetros opcionais são exibido na caixa de resultados do preenchimento automático que surge quando você começa a digitar um prefixo. No exemplo abaixo, adicionei uma descrição e um Mais… link para o anterior Título do Widget snippet personalizado:
'.text.html.basic': 'Título do Widget': 'prefixo': 'wti' corpo ':'"description": "Você pode adicionar um título de widget com este snippet ao seu widget da barra lateral." descriptionMoreURL ':' http://hongkiat.com '
Quando o usuário começa a digitar o prefixo wti, as informações extras (descrição + link) serão exibidas na parte inferior da caixa de resultados do preenchimento automático. Dê uma olhada no outros parâmetros opcionais você pode usar para adicionar informações extras aos seus snippets personalizados.
