10 pacotes Atom mais úteis para desenvolvedores da Web

Você já tentou Atom? Embora seja bastante novo, muitos se apaixonaram pelo Atom, um editor de texto feito pelo GitHub que oferece muitas vantagens e, acima de tudo, é gratuito para uso. O Atom vem com alguns pacotes integrados, como a integração com o Git e a visualização em árvore. No entanto, para fins de desenvolvimento, você definitivamente precisará de outros pacotes.

Neste post, escolhemos alguns pacotes que um desenvolvedor da Web deve ter. Alguns são ótimos para ajudar a organizar seu código bagunçado, outros para ajudar você a ter melhor acesso aos seus arquivos sem sair do Atom. Aqui estão os seus 10 pacotes obrigatórios do Atom.

Seletor de cores

Como o nome indica, este pacote permite escolher cores, e é tão fácil quanto clicar com o botão direito do mouse e escolher 'Color Picker'. Alternativamente, isso pode ser feito pressionando CMD / CTRL + SHIFT + C. O Color Picker funciona se o seu cursor estiver no texto em arquivos CSS / SASS / LESS que contenham um dos seguintes formatos de cor: HEX, HEX, RGB, RGB, HSL, HSL, HSV, HSVa, VEC3 e VEC4, ou variável de cor SASS ou MENOS. Também tem a capacidade de converter entre os formatos.

Emmet

Emmet parece ser um plugin que você precisa instalar, seja qual for o seu ambiente de edição de texto. As principais características do Emmet, como a expansão de abreviações e o encapsulamento com abreviações, permitem que você trabalhe rapidamente ao escrever sintaxes HTML, CSS, Sass / SCSS e LESS. Por exemplo, em HTML, digite p> a.mylink em seguida, toque na tecla TAB para obter uma tag HTML completa

. O Cheat Sheet ajudará você a aprender rapidamente a sintaxe da abreviação de Emmet.

Minimapa

Se você está acostumado com o Sublime Text, você pode estar familiarizado com a mini visualização na janela do lado direito. Esse recurso é útil para percorrer rapidamente códigos-fonte muito longos para a altura da janela. Com Minimapa, você obtém isso para o Atom. Você pode até mesmo definir a posição para a esquerda ou para a direita, ativar / desativar os realces do código e muito mais. O Minimap ainda vem com alguns plugins para estender sua funcionalidade, como o marcador de cores.

Embelezar

Embelezar vai tornar o seu código bagunçado mais puro e mais legível. Tem grande suporte para linguagens de programação, como HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C + +, C #, Objective-C, CoffeeScript, typescript e SQL. Depois de instalar este pacote, para executá-lo, basta clicar com o botão direito e escolher 'Embelezar conteúdo do editor', ou via Pacotes> Atom Embelezar> Embelezar.

Atom Linter

Atom Linter vem como uma 'casa' de plugins de linting para os principais idiomas, fornecendo a API de nível superior para linters. Existem linters disponíveis para JavaScript, CoffeeScript, CSS / SASS / SCSS / LESS / STYLUS, Ruby, Python. Em um idioma, pode haver mais um plugin disponível, como JSHint, JSCS e JSXHint para JavaScript.

Depois de instalar este pacote principal, você precisa instale o linter específico para o idioma em que você trabalha, por exemplo, se você estiver em JavaScript e escolher JSHint para linter, então você pode instalá-lo executando $ apm install linter-jshint no terminal.

Ícones de arquivo

Ícones de arquivo adicione ícones a um nome de arquivo com base no tipo de arquivo correspondente. Ele adicionará melhorias visuais quando você abrir um arquivo na guia ou na exibição em árvore. Os ícones de arquivo são personalizáveis: você pode adicionar seu próprio ícone e alterar a cor através dos arquivos LESS no packages / file-icons / styles diretório. O ícone padrão vem em 8 cores e 3 variantes (claro, médio e escuro).

Snippets de JavaScript

Snippets de JavaScript permite escrever rapidamente uma parte do código-fonte do JS. Com a abreviação definida, você não precisa escrever código palavra por palavra, por exemplo, apenas digitar cl fazer console.log e gi para getElementById. Essa funcionalidade é semelhante ao Emmet, mas é executada em código JavaScript. Esse pacote Atom fornece muitas das sintaxes JavaScript, como a função, o console e o loop.

Pente de CSS

Pente de CSS torna o código da folha de estilo formatado de forma consistente, com aparência simples e bonita. Você pode usar preferências de classificação pré-feitas com base no próprio Yandex, Zen ou CSSComb, ou você pode até usar sua própria preferência para criar regras de classificação. Depois de instalar este pacote, o trabalho de classificação pode ser feito pressionando CTRL + ALT + C ou acessado a partir do menu de contexto via Pacotes> CSS comb> Comb.

Git Plus

Git Plus permite que você trabalhe com o Git sem sair do Atom Editor. Dentro do editor você pode fazer um comando Git commit, checkout, push / pull, diff e outros comandos git. Você precisa configurar o seu user.name e user.email no seu arquivo de configuração do git para fazer todas as funções funcionarem. Para acessar todo o comando git, abra a paleta com CMD + SHIFT + H ou escolha Pacote> Git Plus.

Edição Remota

Edição Remota ajuda você a ver e editar seus arquivos remotos sem sair do editor ou com o uso de outros aplicativos ftp. Para começar, primeiro crie um novo host e adicione o menu via Pacotes> Edição Remota> Incluir Novo Host e insira suas informações de login. Agora você pode navegar para seus arquivos remotos, usar CTRL + ALT + B para navegar pelo host registrado e ver os arquivos.