ATOM 에 emmet and open-in-browsers 설치 및 설정하기

ATOM 에서 emmet 및 각종 플러그인 패키지를 설치하는 방법은 간단하다.

 

1. 시작화면 Welcome Guide 에서 Install a Package 클릭하거나

2. Cmd + Shift + P 클릭 후, install 을 검색했을때 Settings View: Install Packages And Theme를 클릭하거나

3. 작업바 ATOM - Preferences 클릭 후, Install 클릭

 

방법1

방법2

방법3a

방법3b

 

1. emmet 설치 및 설정 방법

- emmet 검색하여 emmet을 설치한다.

- 설치 정보는 Packages의 설치 패키지의 Settings 를 클릭하면 단축키를 포함하여 일반적인 정보를 확인할 수 있다.

2. Open-in-Browsers 설치하기

- 코딩 내용을 브라우저에서 바로 확인하기 위한 용도

- Packages 또는 Install 부분에서 open in 등으로 패키지를 검색해서 설치한다.

- Packages > Open-in-browsers > Settings 클릭하여 View Code 클릭 후

- keymaps > open-in-browsers.cson 클릭해서 ctrl-alt-o 되어 있는 부분을 f12로 변경한다.

(f12를 클릭하면 기본 브라우저에서 코딩 내용이 출력된다.)

'atom-workspace':
  'f12': 'open-in-browsers:toggle'

 

설정 내용을 저장하고,

ATOM 종료 후 다시 실행시켜서 f12를 클릭하면 코딩 내용이 브라우저에서 바로 동작하는 것을 확인할 수 있다.