javascript - atom 유용한 package(live server, javascript 자동완성)

atom이용시 유용한 플러그인(package)을 두가지 소개해드리려 합니다.

바로 atom-live-server, atom ternjs, linter , autoclose html , Highlight selected입니다.

 

 

1. atom-live-server

이 package를 사용하면, 프론트엔드 작업시 결과물을 보기 위해서, 작성된 결과물인 html파일을 열어보고, 다시 수정한 뒤 열어보고.. 를 반복하며 작업을 할 필요가 없습니다. 계속해서 코드가 수정이 될때마다 페이지가 자동으로 재로딩 됩니다.

 

1.1 설치

설치를 위해 상단의 file/settings 를 클릭합니다.

 

install 탭 클릭 후 검색란에 atom-live-server를 입력합니다. 맨 위에 나타나는 가장 많은 사용자가 있는 제품을 설치하면 됩니다.

 

 

1.2 실행

설치가 완료 되었다면 상단의 packages/atom-live-server/를 확장하여 start server를 클릭합니다.

 

현재 작업하고 있는 html 파일을 클릭하면 완료입니다.

 

테스트를 위해 간단히 alert() 스크립트를 작성한 후, ctrl + s(저장 단축키) 를 입력하면, 사이트가 곧바로 재로딩되어 alert()가 실행되는것을 볼 수 있습니다.

 

 

2. atom ternjs

atom 에서는 javascript에 대한 자동완성기능을 제공하지 않습니다. 하지만 이 atom ternjs를 사용한다면 javascript 자동완성 기능을 제공해줍니다.

 

2.1 설치

위와 마찬가지로 package를 검색하여 설치합니다.

 

2.2 실행

우선 빈 javascript 파일을 생성합니다.

 

그 후 pacakges/atom terjs/ configure project를 클릭합니다.

 

클릭을 한다면, 바로 우측에 ternjs에 대한 설정들을 할 수 있는 창이 나타납니다. angular등을 지원하니 더많은 기능을 필요로한다면 읽어보신 후 추가하시면 됩니다. 다 설정하셨다면 하단의 Save & Restart Server를 클릭하면 완료됩니다.

 

javascript 코드를 작성하면, 위와 같이 자동완성 기능이 활성화 된것을 볼 수 있습니다.

3. linter

linter는 html, css, javascript의 문법을 자동으로 체크해주는 패키지입니다.

4. autoclose html

autoclose html은 태그입력시 자동으로 닫는 태그를 입력해주는 패키지 입니다.

5. highlight selected

현재 선택한 컴포넌트들을 하이라이트 표시해주는 패키지입니다.