Atom

Um editor open-source, feito em nodejs e compilado com eletronjs. Este editor garante total suporte as tecnologias necessárias para o desenvolvimento front-end descritas neste manual.

Packages obrigatórios:

Editorconfig

O editor config garante que todos utilizem o mesmo tamanho de indentação, além de solucionar vários problemas de padronização como a remoção de espaços indesejáveis.

Language Vue

Este pacote identifica e aplica o highlight em arquivos vue.

Stylus

Adiciona highlight nos arquivos .styl e nos components vue que utilizem style="stylus".

Language Pug

Adiciona highlight nos arquivos .pug e nos components vue que utilizem template="pug".

Packages recomendados:

Adiciona linhas verticais de acordo com a indentação. Por padrão, as guias de identação veem com uma cor sólida e muito pesada, para suavizar você pode adicionar o css abaixo indo no menu Edit > Stylesheet, você pode personalizar como quiser:

.indent-guide-improved {
  background-color: rgba(255, 255, 255, .1);
  &.indent-guide-stack {
    background-color:  rgba(255, 255, 255, .1);
    &.indent-guide-active {
      background-color:  rgba(255, 255, 255, .2);
    }
  }
}

Minimap

Adiciona um minimapa do arquivo atual do lado direito do editor para facilitar a navegação pelo código.

Packages opcionais:

Theme: Atom Material UI

Um tema para o atom que o deixa com uma ui inspirada no Material Design.

Theme: Dracula

Um tema dark para uma caralhada de editores.

File Icons

Adicona um ícone para cada tipo de arquivo, facilitando a identifação da tecnologia utilizada em cada um deles.

Atalhos

Alguns dos atalhos mais úteis do atom.

Instalar pacotes e temas (Ctrl + Shift + P)

Aperte as teclas Ctrl + Shift + P simultaneamente e digite "Install Package", navegue até Install Packages and Themes.

Auto Indentação

Você pode executar a auto indentação indo até o menu Edit > Lines > Auto Indent.

Caso queira criar um atalho para esta funcionalidade vá até o menu File > Settings > Keybindings > Keymap ou Edit > Keymap e digite o seguinte código:

'atom-text-editor':
    'ctrl-}': 'editor:auto-indent'

Sendo ctrl-} o atalho desejado, mas tome cuidado para não sobrescrever um atalho já existente.

Múltiplos Cursores (Ctrl + Click)

Este comando permite adicionares vários cursores e editar várias linhas simultaneamente.

Mover Linha para Cima ou para Baixo (Ctrl + Up / Ctrl + Down)

Este comando envia a linha atual para cima ou para baixo.

Duplicar Linha (Ctrl + Shift + D)

Este comando duplica a linha ou a seleção atual.

Selecionar os Próximos Caracteres Correspondentes (Ctrl + D)

Este comando permite selecionar palavras semelhantes e fazer uma edição massiva!

Desmarque os Próximos Caracteres Correspondentes (Ctrl + U)

Este comando permite remover a seleção de uma palavra semelhante.

Selecione todos os caracteres correspondentes (Alt + F3)

Este comando seleciona todos os caracteres correspondentes no arquivo atual.

Comentar / Descomentar Linha ou Seleção Atual (Ctrl + /)

Este comando comenta / descomenta a linha ou seleção atual.

julianobailao/tunando-seu-atom.md