(atom) 사용법 및 설치법

이번 node.js 공부에 사용을 atom으로  채택하였다 간단하게 개념부터 알아보도록하자

 

 

아톰이란?

 

우리가 기존에 사용하던 프로그래밍 언어의 편집이 가능한 편집기중에 하나이다.

(eclipse,vs,vscode 등등...)

 

아톰을 사용하는 이유

 

무료 웹 에디터에 속한다

플러그인으로 기능을 확장이 용이하다

화면 분할기능

HTML, CSS, JavaScript 사용자 편의에 맞게 개발 가능하다.

 

즉 프론트개발의 엄청난 기능을 지원해준다!!!

 

 

atom.io/

A hackable text editor for the 21st Century

설치법은간단하다 해당사이트 접속후

다운로드후 설치해 주면된다.

 

위와 같은 설치가 끝나면 기초는 끝이났다고 보면된다.

 

그러면 이제 내가 이번에 atom을 사용하려는 가장큰이유! 패키지 설정으로 넘어가도록하자.

 

 

file ->setting으로 이동

 

 

 

instrall을클릭해주면

 

위처럼 사용할 패키지를 검색할 수 있는 기능이있다.

 

package	기능
emmet	html과  css 자동완성
aligner	key -value 정렬을 해준다.
atom-html-preview	html css 입력후 바로 확인이 가능하게하는 패키지 기능실행 단축기는 (ctrl +shift+h)
atom-ternjs	js의 자동완성기능을 제공 node.js , jquary ,anguer.js,se6 지원
atom-beauify	소스코드정렬(언어별로 정리가능)
git-control	프로젝트 별로  git을 GUI 형태로 관리할 수 있다고 한다.
git-time-mcachine	현재파일의 git history를 볼 수있다.
goto-definition	현재 커서 위치의 함수/메소드 위치로 이동.
highlight-line	현재 작업중인 줄의 배경색을 바꾸어준다.
minimap	서브라임 처럼 우측에 미니맵을 보여준다.
minmap-hide	포커스된 패널만 미니맵을 보여준다.
open-in-browser	작업물 브라우저로 작업을 바로 띄워준다.(html만)
pigments	색상에 관련한 정보가 있으면 그줄에 색상을표시(편리할거 같다)
project- plus	패키지를 설치하면 프로젝트를 여러개 다녀와도 프로젝트의 현재상태를 정확하게 재현해주고  프로젝트의 history또한 기억해 cmd+z 및 cmd+shift+z로 이동이 가능하다.
swackets	매칭되는 중괄호 세트별로 각각 다른 색상을 부여해준다(이건정말 좋을 거같다.)
sync-settings	atom의 설정 파일을 git에 백업하거나 복원한다.
seti-icons	트리바를 보기 편하게 아이콘 으로 표시해준다.

필자는 일단 이정도 추가한뒤 추가적으로 필요한 패키지가 생긴다면 추가 하도록하겠다.

 

 

검색후 install 해주면 된다.