[ATOM] atom-html-preview(아톰 HTML 미리보기)

(ATOM TextEditor의 패키지(플러그인)입니다. 별도로 동작할 수 있는 프로그램이 아닙니다.)

 프론트 엔드 작업을 하다보면 옆에다가 웹 페이지를 보면서 작업하는 편이 훨씬 편리하다.

아무래도 스타일을 입히고 하다보면 계속 웹 페이지를 다시 새로고침을 하면서 적용하기란 상당히 귀찮은 일이다.

하지만, 아톰의 해당 플러그인을 설치하게되면 새롭게 변경될 때마다 페이지를 새로고침하여서 보여준다.

하자 있게 보이는 것도 아니고 깔끔하게 잘 되어 있어서 꼭 설치해두면 좋다.

Ctrl + , 을 통해서 Settings로 들어간후 Install 탭을 누른다.

그 후 상단의 이미지와 같이 html-preview 라고 검색하게 되면 우리가 찾는 패키지가 가장 상단에 노출된다.

해당 패키지를 Install을 눌러서 설치해준다. 설치 시간은 어느정도 소모된다.

다음과 같이 됬다면 설치가  완료된 것이며, 설정, 삭제, 비활성화가 아주 직관적으로 나와있다.

설정에서는 단축키 설정과 다른 여러가지 옵션을 제공하며, 필요하다면 수정을 하여도 된다.

기본 단축키는 Ctrl + Shift + H 다.

우클릭 혹은 패키지 메뉴에서 찾아서 preview html을 통해서 켜도 된다.     

단축키를 통해서 패키지의 기능을 이용한 모습니다.

우측에 나오며 분할된 공간은 중간의 경계선을 드래그하여 자유롭게 조정할 수 있다.

미리보기 창을 우클해서 Dev tool을 켜면 크롬에서 자주보던 개발자 창이 별도 팝업으로 뜨게된다.

이는 아톰이 크로뮴 엔진+nodeJs을 이용해서 만들어졌기 때문에 가능한 것으로 보인다.

개인적으로 상당히 유용하게 사용하고 있는 기능이니 다들 사용해보는 것을 추천한다.

그리고 아톰이 아닌 유저도 한번 깔아볼 만한 텍스트 에디터니 한번쯤 사용해봤으면 좋겠다.