Atom 필수 플러그인 리스트 (Can’t live without it)

Atom Editor 는 무엇인가요?

  • Github 에서 제작한 hackable 코드 에디터로 뛰어난 접근성과 현대적이고 유용한 기능들을 제공하는 것이 특징
  • 개인적으로 필요한 기능들에 대해 추가적으로 제작할 수 있고, 이를 패키지로 배포하여 서로 공유할 수 있다.

atom_editor

Atom Editor 를 쓰게된 계기?

  • 오픈소스로 관리되고, 100% 무료인 Code Editing Tool
  • 코드 개발과 소스 관리에 특화된 Github 이 지원하고 있는 Editing Tool

Github has a lot of resources to put in the process of developing an application. It has the ability to create a stable product fast and improve it over time.

  • 테마부터 코드 동기화까지 모두 개인화가 가능한 맞춤형 툴
  • Chrome 요소 검사로 에디팅 툴을 접근할 수 있는 것도 장점

Atom 의 유용한 플러그인 리스트

Seti UI

  • Backbone.js 의 제작자 Addy Osmani 도 추천하는 코드 테마. 색깔 조합이 수려해서, 개인적으로 코딩할 때 질리지 않는 colorful 한 테마다.

seti ui

Beautify

  • 들여쓰기나 코드 간격이 일정하지 않은 복잡한 코드를 보기 좋게 정리해준다.

beautify

Pigments

  • CSS 파일의 #FF530D 형태의 컬러 값을 직관적으로 표시해준다.
    pigments

Code peek

  • 선택한 함수가 정의되어 있는 파일을 자동으로 열어 대조해준다. (이클립스의 Alt+마우스 왼쪽 클릭 과 동일한 기능)

color peek

Highlight selected

  • 선택한 코드를 강조해주는 유틸리티

highlight selected

Auto close HTML

  • HTML 태그 이름만 입력하면 시작 및 종료 태그를 알아서 붙여준다.

auto close html

Package sync

  • 서로 다른 컴퓨터 간에 Atom Package 를 동기화 시켜준다. 다른 컴퓨터에서 작업환경을 동일하게 구성할 때 유용하다

package sync

Minimap

  • 전체 코드의 프리뷰 기능을 제공하고, 툴의 오른쪽에서 코드 전체 윤곽을 확인하거나 위치를 확인하기 편리하다
    minimap

Minimap cursorline

  • 현재 선택한 라인이 Minimap 에서 어디에 위치하는지 구체적인 Line Highlighting 지원

Color Picker

  • CSS 스타일 작성시 색상 팔레트를 에디팅 위에서 볼 수 있어 쉽게 변경할 수 있다.

color picker

Emmets

  • Emmets 에서 제공하는 특정 Syntax 로 반복적인 코드를 쉽게 작성할 수 있다. 예를 들어, ul>li*3>p 는 아래와 같은 결과

emmet

Linter

  • HTML, CSS, Javascript, TypeScript 등의 코드를 분석하여 문법 및 유효성을 검증해주는 유틸리티

linter

Fuzzy Finder

  • 단축키 Ctrl-TCmd-T 로 파일을 쉽게 찾고 연다.

fuzzy finder

Sort Lines

  • 선택한 라인의 내용을 알파벳 순서로 정렬해준다.

sort lines

WakaTime

  • 프로젝트에서 사용한 언어, 작업 시간, 로그인 타임 등을 분석해서 가시화 해주는 그래프 유틸리티

wakatime

 

Advertisements

Author: Josh Jang

Mobile & Web Enthusiast, calling myself a geek. Interested in developing stuffs to make it easier for people and increasing productivity in what people have to do. True Beer Geek.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s