UI개발에 WebStorm을 사용하다 서버를 띄워 API를 호출할 일들이 생기면서 IntelliJ를 사용하여 로컬서버를 띄어놓고 개발을 하고있는데 기능이 풍부해서 매우 편하게 개발을 하고 있습니다. WebStorm과 차이는 정확하게는 모르겠지만 IntelliJ에 WebStorm 패키치를 설치하여 사용하면 동일한걸로 알고있습니다. 근데 이상하게 DSLR을 가지고도 똑딱이를 가지고 싶은 것 처럼 기능이 부족하더라도 좀 더 가볍고 심플한 에디터를 항상 찾게 되던데 Atom이 제격인 것 같습니다.

그래서 저같은 분들이나 jetBrain의 에디터를 쓰지 않는 분들을 위해 제가 사용하는 Atom 셋팅을 공유하려고 합니다. 참고로 Atom에 Terminal, Git관련한 유용한 플러그인도 많으나 아래 패키지 리스트에서는 제외하였습니다.
경험상 Terminal 플러그인을 사용하여 gulp, grunt를 돌리면 watch하면서 뭔가 점점 무거워 지는게 느껴지더라구요. 실제 프로세스는 기본 터미널에서 실행할 때와 동일 하겠지만 Atom 에서 UI상 표현에 무리가 가는 것 같았습니다.
Git도 브랜치가 많아지니 에디터에서 UI를 표시하는데 버벅임이 있어 사용하지 않고 있습니다만 검색 하시면 잘 만든 플러그인들이 꽤 있으니 사용에 참고해 주세요.

참고로 로컬 서버는 npm의 maven 플러그인을 설치하여 띄우고 Atom으로 UI개발 가능합니다.
* Atom 다운로드

Atom Plugin List

• atom-beautify
  https://atom.io/packages/atom-beautify
  HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript 등의 코드를 아릅답게 정렬해 주는기능
• docblockr
  https://atom.io/packages/docblockr
  메소드 작성 완료 후 윗라인에 “/**”을 치고 엔터를 치면 함수명, 파라미터명, 리턴타입등 깔끔한 주석 포멧을 제공해준다.
  설명과 파라미터, 리턴타입등에 대한 추가 정보만 입력하면 된다. javascript 외에도 많은 언어를 지원한다.
• emmet
  https://atom.io/packages/emmet
  흔히 젠코딩이라 불리는 플러그인이다. 손가락 관절에 무리를 줄여주고 커피시간을 벌어주는 편리한 플러그인.
• minimap
  https://atom.io/packages/minimap
  작업중인 파일에 대한 미니맵 제공, 미니맵은 미니맵에 diff표시, 선택영역 하이라이트등 다양한 플러그인이 있지만 그닥 유용하지 않아
  해당 플러그인만 사용중. 미니맵을 드래그하여 페이지 상하 이동이 가능하여 긴 내용의 코드 작성시 유용하다.
• open-in-browser
  https://atom.io/packages/open-in-browser
  아톰에서 작업중인 html파일을 브라우저에서 열어보는 플러그인.
  가장 무난하고 깔끔해서 계속 사용중.
• run-in-atom
  https://atom.io/packages/run-in-atom
  아톰 에디터에서 바로 스크립트를 돌려볼 수 있는 플러그인.
  사실상 크롬 개발자도구에서 작성한 js파일을 실행하는 방식이지만 생각보다 유용하다.
• seti-icon
  https://atom.io/packages/seti-icons
  아톰 아이콘 패키지로 개인취향이다. 해당 아이콘팩에 아톰 style.less를 조금 수정하여 사용한다.
  참고로 다운로드 수는 file-icons(https://atom.io/packages/file-icons)가 20배이상 높다 ㅋ
• split-diff
  https://atom.io/packages/split-diff
  원래는 간단하게 diff확인할 경우 https://www.diffchecker.com/ 통해서 확인햇었는데
  아톰에서 바로 확인할 수 있는 심플한 플러그인이라 애용중이다.
  diff확인 및 변경이력 적용도 가능하다.
• color-picker
  https://atom.io/packages/color-picker
  컬러피커로 rgb, rgba, hex등 다양한 색상값을 바로 얻을 수 있다.
• markdown-preview-plus
  https://atom.io/packages/markdown-preview-plus
  아톰에는 markdown-preview가 기본으로 탑재되어 있다. 해당 플러그인을 사용할러면 기본 플러그인을 disable처리해 줘야한다.
  아니면 설정값을 두번씩 해주면 되긴하다. 실시간으로 마크다운 프리뷰를 확인할 수 있으며 프리뷰 창에서 우클릭하여 브라우저로 확인하거나 export to disk를 누르면 html, pdf, ebook로 내보낼 수 있다. 문서 내용이 길어지면 약간 버벅이지만 유용한 플러그인

Theme Setting

• Preferences의 Theme 메뉴에서 테마설정이 가능합니다. UI, Syntax Theme 두가지를 설정할 수 있는데 아래와 같이 사용하고 있습니다.
  jsonUI : One DarkSyntax : Base16 Tomorrow Dark *추가로 검색해보면 수 많은 테마가 있고 마음에 드는 테마를 설치하여 사용할 수 있습니다.

Additional Setting

Preferences에서 좌측 하단에 있는 Open Config Folder를 클릭하면 Atom 설정파일이 들어있는 폴더를 볼 수 있다.
*.atom이라서 디렉토리 상에 숨김처리 되어있다.

1. markdown-preview-plus의 단축키가 제대로 동작하지 않는다면 .atmon/keymap.cson파일에 아래와 같이 마크다운 토글 단축키 추가해 줍니다.
   
   JavaScript

   [crayon-64833188c28b7194072222 inline="true" class="json"]'atom-workspace, atom-workspace atom-text-editor': 'cmd-shift-m': 'markdown-preview-plus:toggle'

   1 2	[crayon-64833188c28b7194072222 inline="true"  class="json"]'atom-workspace, atom-workspace atom-text-editor': 'cmd-shift-m': 'markdown-preview-plus:toggle'

   [/crayon] *추가 후 Preferences에서 Keybindings를 선택하면 현재 키맵을 확인할 수 있습니다.
2. style.less 스타일 추가
   *아래는 제가 사용하는 커스텀 less파일 입니다. seti-icon팩이 폴더를 흑백으로 표시해줘서 tree-view만 커스텀하여 사용하고 있습니다.
   
   JavaScript

   [crayon-64833188c28c7695061589 inline="true" class="less"]// Theme Custom css ol.tree-view>.directory>.header{ color:#A2A2A2; font-size:12px; font-weight:bold; } ol.tree-view>.directory>.header:hover{ color:#FFA022 !important; } ol.tree-view li{ cursor:pointer; } .list-group li:not(.list-nested-item).selected, .list-tree li:not(.list-nested-item).selected, .list-group li.list-nested-item.selected > .list-item, .list-tree li.list-nested-item.selected > .list-item{ font-weight:bold; font-size:12px; color:#A2A2A2; } [theme-one-dark-ui-layoutmode="auto"] .theme-one-dark-ui .tree-view .project-root.project-root::before{ background-color:#111; width:100%; margin-left:-5px; } [theme-one-dark-ui-layoutmode="auto"] .theme-one-dark-ui .tree-view .project-root.selected::before{ width:102%; background-color:#111; } .list-group .icon::before, .list-tree .icon::before{ color:#cca763; }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

   [crayon-64833188c28c7695061589 inline="true"  class="less"]// Theme Custom css ol.tree-view>.directory>.header{   color:#A2A2A2;   font-size:12px;   font-weight:bold; } ol.tree-view>.directory>.header:hover{   color:#FFA022 !important; } ol.tree-view li{   cursor:pointer; } .list-group li:not(.list-nested-item).selected, .list-tree li:not(.list-nested-item).selected, .list-group li.list-nested-item.selected > .list-item, .list-tree li.list-nested-item.selected > .list-item{   font-weight:bold;   font-size:12px;   color:#A2A2A2; } [theme-one-dark-ui-layoutmode="auto"] .theme-one-dark-ui .tree-view .project-root.project-root::before{   background-color:#111;   width:100%;   margin-left:-5px; } [theme-one-dark-ui-layoutmode="auto"] .theme-one-dark-ui .tree-view .project-root.selected::before{   width:102%;   background-color:#111; } .list-group .icon::before, .list-tree .icon::before{   color:#cca763; }

   [/crayon]

Shortcut Key

• 설정 창 : cmd-,
• 같은 단어 선택 : cmd-D
• 창이동 : cmd-1, 2, 3…
• 프로젝트 패널 토글 : cmd-\
• 파일 찾기 : cmd-p
• 현재 파일에서 찾기 : cmd-f
• 프로젝트에서 찾기 : cmd-shift-F
• split-diff : ctrl-alt-T
• color-picker : cmd-shift-C
• markdown-preview-plus : cmd-shift-M
• markdonw-pdf : ctrl-shift-C

다른 PC에서 빠르게 Atom 개발환경 셋팅하기

위에서 셋팅한 아톰 패키지를 빠르게 셋팅하기 위해서는 아래 4가지를 해줘야 합니다.

• Package 설치
• style.less 스타일 수정
• keymap.cson에 키맵 추가
• Theme 셋팅

style.less, keymap.cson파일은 수정해놓은 파일을 따로 받을 수 있도록 준비하여 .atom에 파일에 엎어치기하고 Theme는 직접 셋팅하는데 오래 걸리지 않습니다. 하지만 패키지는 일일이 검색하여 설치하기가 번거롭기 때문에 아톰에서 패키지를 추출하고 추출한 패키지 리스트로 다시 패키지를 설치할 수 있도록 명령어를 제공해줍니다.

• 패키지 리스트 추출
  • app list —installed —bare > package-list.txt
• 패키지 설치
  • apm install —packages-file package-list.txt