Atom은 google에서 만든 edit 프로그램이며, git과 바로 연동할 수 있다는 가장 큰 장점을 가진 프로그램이다.
1. 홈페이지 접속하여 해당 OS에 맞는 프로그램 다운로드
https://atom.io/ 사이트 접속 > 홈 화면에 나와 있는 window download 클릭
2. 다운로드 받은 파일 실행
해당 경로에 다운로드 된 파일을 실행한다.
아톰은 그간 사용했던 이클립스에 비해 굉장히 경량의 프로그램이기 때문에 다운로드 시간도 오래 걸리지 않는다.
다운로드 받은 파일을 실행하면 가장 처음으로 실행되는 화면은 이렇게 나올 것이다.
3. 패키지 추가
Atom 상단의 File > Settings > Pasckages 에 접속하여 각자의 취향에 맞는 패키지(플러그인)을 설치할 수 있다.
* 추천하는 패키지
패키지명 |
쓰임 |
angularjs |
AngularJS 개발시 태그를 자동 완성 |
atom-beauty |
HTML, CSS, JS, PHP, Python, Ruby, Java, C 등의 언어를 사용시 indentation을 정리해주는 패키지 |
atomic-chrome |
|
code-peek |
선택한 함수가 정의되어 있는 파일을 열어 자동으로 대조 |
emmet |
HTML, CSS 등 언어 구조, 여러 개의 구조를 가진 태그 자동 완성 (!html 입력시 기본 html 코드 구조 자동 완성) |
file-icons |
파일명 앞에 파일 확장자에 따른 아이콘을 붙여줌 |
highlight-selected |
선택한 코드를 강조 |
linter |
HTML, CSS, Javascript, TypeScript 등의 코드를 분석하여 문법 및 유효성을 검증 |
linter-csslint |
linter css 버전 |
linter-eslint |
linter JavaScript 버전 |
linter-sass-lint |
linter Sass / SCSS 버전 |
minimap |
전체 코드의 프리뷰 기능을 제공하고 툴의 오른쪽에서 코드 전체 윤곽을 확인하거나 위치를 확인 |
pigments |
CSS 파일의 #FF530D 형태의 컬러 값을 직관적으로 표시 |
tool-bar |
툴바의 아이콘 중 커피스크립트 등의 파일들을 구분이 쉽도록 파일의 특징을 나타낸 아이콘으로 표시 |
atom-html-preview |
해당 html 화면을 미리 보여줌 |
docblockr |
작성한 스크립트에 대해 설명 추가시 가독성을 높임 |