atom 사용하기

Atom Introducing Github for Atom

공식 홈페이지

아톰 에디터는 깃허브에서 만들어가는 오픈소스 텍스트 에디터입니다. 누군가 어떤 에디터를 추천한다고 해서 반드시 자기에게 적합할 수는 없을 것입니다. 만약 아톰 에디터가 자기에게 별로인 것 같다는 생각이 든다면 바로 지우시면 그만입니다.

Brackets
VS-Code
SublimeText

저는 깃허브 페이지를 위해서 사용하기 시작했는데 나름대로 괜찮은 에디터인듯 느껴지고 있습니다.

아톰 에디터의 단축키를 간단하게 알아볼까요?

어떤 에디터를 사용하든지 가장 중요한 것은 환경설정입니다. 아톰의 설정창을 열기 위해서는 File > Settings 또는 Ctrl + ,를 누르면 됩니다. 또 어떠한 것들을 제공해주고 있는지 살펴보려면 Settings > Keybindings로 가보면 여러가지 단축키로 설정된 목록을 보여줍니다. 또 이러한 단축키 설정을 keymap.cson로 변경하는 것도 지원하고 있습니다.

• 설정창 열기 Ctrl + ,
• 커맨드창 열기 Ctrl + Shift + P

  해당 명령이 단축키로 설정되어있는지도 보여주기 때문에 나중에 단축키로도 활용할 수 있습니다.

• 검색해서 파일열기 Ctrl + P
• 한줄 삭제 Ctrl + Shift + K
• 해당 라인넘버로 이동 Ctrl + G, [Number]
• 마크다운 파일에서 이미지 삽입하기 Ctrl + Shift + I

  이 단축키는 markdown-preview-enhanced 패키지를 설치해야만 지원합니다.

패키지라고 불리는 확장 플러그인들을 설치해볼까요?

이클립스 뿐만 아니라 서브라임 텍스트, 브라켓, VS-Code까지도 확장 플러그인을 제공합니다. 아톰 에디터라고 지원하지 않을 수는 없겠죠 패키지를 설치하기 위해서는 Settings > Install 에서 원하는 기능을 가지는 패키지를 검색하면 됩니다.

공식 홈페이지 > 패키지 에서도 인기항목을 보시거나 검색하실 수 있습니다.

emmet

Emmet을 아톰에서도 활용할 수 있도록 만들어진 패키지입니다.

beautify

보고자 하는 파일의 내용이 무분별하게 정렬되어 있는 것을 깔끔하게 정렬해서 보여줍니다. 다시 말해서 들여쓰기가 자동으로 맞춰진다는 이야기입니다.

file-icons

트리 뷰 또는 탭에 아이콘을 표시해줌으로써 좀더 내가 어떠한 종류의 파일을 보고있는가를 쉽게 파악할 수 있게 해줍니다. 아이콘도 꽤 이쁘장하게 생겼습니다.

linter

Linter는 내가 작성하는 코드의 규칙을 일정한 기준에 맞도록 체크해주는 정적 분석 도구입니다. 아톰에서는 이 패키지를 기반으로 하여 linter-jshint, linter-eslint와 같은 관련 패키지를 추가해서 사용합니다.

자세한 내용은 아톰에서 Linter를 사용해보자 에서 확인 합시다

pigments

프로젝트 또는 파일에서 사용중인 컬러값을 색상으로 보여주는 패키지입니다. 인터넷에 해당 컬러값을 찾지않아도 대략적으로 어떠한 색인지 인지할 수 있습니다.

tabs-to-spaces

탭을 공백으로 공백을 탭으로 바꾸는 것을 도와주는 패키지입니다. 만약 ESLint에 의해서 탭과 공백을 혼용해서 사용하지 않는 조건이 있다면 하나로 변환할 수 있게 도와줍니다.

trailing-spaces

라인의 끝에 공백이 생길 경우 색상으로 표현해주는 패키지입니다. 현재 커서가 위치한 라인은 색상이 아닌 기존의 공백 표시로 나타내주기 때문에 활용한다면 좋은 기능이 될 수 있습니다.

저는 이 패키지를 마크다운 개행을 위해 사용하고 있습니다.

markdown-preview-enhanced

이 패키지는 마크다운에 대해서 좀더 확장된 기능을 제공해줍니다. 아톰은 기본적으로 마크다운에 대해서 프리뷰를 제공해줍니다만 수정되는 마크다운을 실시간으로 어떤 위치를 수정하고 있는지 어떻게 수정됬는지를 확인하기 어렵습니다. 이 패키지를 활용하면 내가 수정하는 위치에 따라 프리뷰의 위치도 따라서 보여주기 때문에 굉장히 편리합니다.

아톰 에디터는 마크다운 작성할 때 좋은 것 같기도 합니다.

혹시 테마를 바꾸고 싶지는 않으신가요?

아톰 에디터를 설치하면 기본적으로 여러가지 테마를 지원해주기는 합니다. Settings > Themes를 살펴보면 됩니다.

추가적인 테마를 적용하고 싶다면 Install > Themes를 통해서 원하는 테마를 검색하고 설치하면 됩니다.

material ui

seti ui

함께 보면 좋은 관련된 글들을 소개합니다!

• 텍스트 에디터 아톰의 설치와 기본설정 
• 아톰 적응기 
• 생활코딩 - 아톰 
• 아톰 에디터 플러그인 정리 
• 아톰에서 Linter를 사용해보자 
• 무료 텍스트 에디터 추천 
• 아톰 필수 플러그인 리스트