Skip to content

Instantly share code, notes, and snippets.

@julianobailao
Last active June 22, 2020 01:12
Show Gist options
  • Save julianobailao/c8660155a9af759dea5dfe389b29dad4 to your computer and use it in GitHub Desktop.
Save julianobailao/c8660155a9af759dea5dfe389b29dad4 to your computer and use it in GitHub Desktop.
Tunando seu 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:

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.

Este pacote identifica e aplica o highlight em arquivos vue.

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

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);
    }
  }
}

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

Packages opcionais:

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.

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.

InstallPackage

Auto Indentação

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

AutoIndent

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.

MultipleCursor

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

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

SendLineToUpOrDown

Duplicar Linha (Ctrl + Shift + D)

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

DuplicateLine DuplicateLineMultiple

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

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

CTRLD

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

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

CTRLU

Selecione todos os caracteres correspondentes (Alt + F3)

Este comando seleciona todos os caracteres correspondentes no arquivo atual.

AltF3

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

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

ToggleComments

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment