[Web] 아톰(Atom) 에디터 사용 플러그인

사실 설치는 이전에 해놨는 데 이번 학기부터 본격적으로 잘 사용하는 아톰(Atom) 에디터입니다.

 

보통 웹페이지 개발과 깃허브 자료 관리용으로 많이 쓰고 있습니다.

 

제가 아톰에서 사용하고 편리하다고 느끼는 플러그인과 패키지를 소개해드리겠습니다.

---

테마 관련 사항입니다.

 

패키지나 플러그인이라기보단 좀 더 아톰을 예쁘게 해주는 것입니다.

 

사실 예쁜 것보단 작업 파일 구분이 확실하다는 장점이 돋보이는 것 같습니다.

 

 

1. seti-ui (UI Theme)

 

seti-ui는 확장자명에 따라서 파일 아이콘을 보여줍니다.

 

예를 들면 아래처럼 볼 수 있습니다.

굉장히 많은 아이콘을 지원해줍니다. 처음보는 것도 있네요....

2. atom-material-syntax-dark (Syntax type)

 

seti-ui가 전체적인 인터페이스 디자인이라면 atom-material-syntax-dark는 코드의 디자인을 바꿔줍니다.

 

언어별로 디자인도 조금씩 다릅니다.

---

플러그인과 패키지는 아톰의 활용도를 200% 높여주는 시스템들입니다.

 

제가 자주 사용하는 것은 깃, 깃허브 관련, 웹 프로그래밍 관련입니다.

 

< Git, GitHub >

1. git-plus / git-plus-plus

 

제 블로그 글에서도 깃을 터미널로 깃허브와 연결시킬 수 있는 사항들이 있습니다.

 

터미널은 사실 익숙하지 않으면 사용자 입장에서는 불편한 사항이 많습니다. 직관적인 면이 좀 떨어지는 것이죠.

 

git-plus를 사용하면 깃허브 push도 편리해집니다.

 

저 같은 경우는 기본 창으로 좌측에 project 카테고리들을, 우측에는 git 토글 창을 켜 두고 작업을 하는 편입니다.

 

git-plus-plus는 git-plus의 확장 버전입니다.

 

2. git-clone

 

git-clone은 깃허브를 직접적으로 관리하면서 사용하는 것보단 원격으로 관리하는 저에게 굉장히 편리한 사용을 주는 패키지입니다.

 

패키지를 설치하게 되면 clone을 하고자 하는 깃허브 링크를 연결해주면 자동으로 컴퓨터 폴더로 클론을 해줍니다.

 

설치 후 setting에서 기본 클로닝 위치를 설정해주면 더욱 편합니다.

 

사용은 메뉴에서 Packages > Toggle > GitHub : Clone을 검색해주고 링크를 입력해주면 됩니다.

---

< Web >

1. open-html-in-preview

 

open-html-in-preview는 html 파일을 아톰에서 직접적으로 브라우저로 연결을 해주는 패키지입니다.

 

다운로드 후 바로 사용하시면 안 되고요. 기본 keymap을 설정해줘야 합니다.

 

설치 후 네모칸 부분 클릭하시고 맨 아래로 내려주시면 됩니다.

 

파란색으로 된 박스에 있는 코드를 모두 복사해주세요. 그리고 메뉴에 keymaps를 눌러주세요.

 

복사해준 것을 적당한 위치에 위에 사진처럼 붙여 넣어 주시고 ctrl-shift-q를 F12로 변경해주시면 더 편합니다.

 

 

2. atom-html-preview

 

아톰에서 제작하는 html을 미리보기로 볼 수 있습니다.

 

사실 open-html-in-browser로 보는 것도 좋지만 귀찮잖아요? 그럴 땐 바로바로 변경사항이 보이는 것을 확인하는 게 좋습니다.

 

이를 위해서 사용하는 게 atom-html-preview입니다.

 

옆에 페이지가 깨져보이는 이유는 제가 잘 못만들어서 입니다....ㅠㅠ

 

3. pigments

 

사실 있어도 그만 없어도 그만인 패키지입니다.

 

CSS작업을 할 때 blue, yellow처럼 직접적인 단어로 명시를 해주는 방법도 있지만 컬러코드로 작성을 하는 경우가 많습니다.

 

사실 컬러코드는 사람이 봐서는 무슨 색인지 알기가 쉽지 않죠....

 

이런 컬러코드를 직접적인 색으로 직관적이게 볼 수 있게 해 줍니다.

 

색을 직관적이게 볼 수 있습니다.

 

4. emmet

 

emmet은 웹 개발할 때의 불편함을 간소화시켜주는 패키지입니다.

 

웹 개발을 할 때 div, p, a, ul 등등 수많은 태그들을 사용하게 됩니다. 반복적인 형태를 많이 사용하기도 하죠.

 

그럴 때마다 코드를 다 입력하기는 너무 번거로우니 간소화해서 입력을 할 수 있게 해 줍니다.

div.name <!--class가 name인 div태그 형성-->

<div class="name"></div>

저렇게 명령어를 입력 후 ctrl+shift+e를 누르면 자동완성으로 바뀝니다.

 

제가 사용하는 맥북은 ctrl대신 command로 하시면 됩니다.

 

사실 전 잘 안 씁니다....ㅎㅎ;;

---

< etc Programming >

기타 프로그래밍의 도움을 주는 패키지들입니다.

 

1. atom-beautify

 

전체적인 코드를 미관상 예쁘게 자동 형성해줍니다.

 

언어에 따라서 알아서 해주는 듯합니다.

 

 

2. highlighted-selected

 

자신이 코딩하고 있는 행을 표시해줍니다. 다른 개발 툴들은 기본적으로 지원해주는 기능이죠.

 

 

3. minimap

 

제가 사용하는 Xcode에서는 얼마 전부터 기본적으로 지원해주는 코드 맵 기능입니다.

 

설치 후 뭐가 문제인지 모르겠는데 minimap-lens를 설치하지 않으면 자꾸 에러코드가 나네요;;;

 

 

4. markdown-preview-enhanced

 

저 같은 경우는 깃허브 블로그 포스팅을 위해서 마크다운을 활용하는데요.

 

마크다운도 html을 간단하게 사용해주는 기능이라 직접적으로 어떻게 보이는 지 잘 몰라서 좀 답답합니다.

 

이때 markdwon-preview-enhanced를 사용하면 미리보기로 마크다운이 적용되는 것을 바로 볼 수 있습니다.