본문 바로가기

📚Study Note/Ajax

이클립스에 Emmet(구 Zen coding) 플러그인 설치하는 방법

 

emmet.io 를 주소창에 입력한다. (지금 자동번역이 되어 있어서 한글로 뜬다)

Eclipse/Aptana 를 클릭한다.

그럼 깃허브 페이지로 이동하게 되는데

 

그곳에서 Installation 이라고 되어있는 부분대로 설치하면 된다.

 

1. Go to Help > Install New Software… in your Eclipse IDE
3. Add http://download.emmet.io/eclipse/updates/ in update sites
3. Check Emmet for Eclipse group in available plugins list, click Next button and follow the installation instructions

4. Restart Eclipse

 

 

이제 이클립스를 실행시키고 진행한다!

상단의 Help > Install New Software

Add 를 누르면 뜨는 창에

Name 은 Emmet

Location http://download.emmet.io/eclipse/updates/ 넣어주면 된다.

그 다음 창에서 Emmet 체크박스 선택 후 Next

다시 한 번 Next

Accept 하고 Next

잠시 기다리면 이런 Warning 창이 뜨는데 Install anyway를 선택하고 넘어간다.


Restart Now 를 해서 이클립스를 재시작해준다. 

 

이렇게 설치를 완료한 후에는 Emmet 의 단축키와 기존 이클립스의 Ctrl + D 단축키가 충돌이 나기 때문에

하나를 없애줘야 한다.

아무래도 기존에 있던 한 줄을 삭제하는 기능이 더 사용빈도가 높아서

Emmet 의 Ctrl + D 단축키를 없앨것이다.

상단의 window > preference 로 이동해서 key 를 검색하면 

General 하단에 표시되는 key 를 선택해준다. 

뜨는 목록들 중 단축키가 Ctrl + D 로 되어있는 두 개를 찾는다. 

(Command 옆에 Binding 을 눌러주면 정렬이 되면서 쉽게 찾아진다.)

Ctrl + D 라고 되어있는 것들 중 하나를 누른 뒤 Unbind Comman 를 눌러주면 

Ctrl + D 가 둘 다 사라진다. 

지금 위에는 Match Pair Outward 옆에다가 설정을 해놓았는데 사진처럼 하면 안됩니다. Delete Line 옆에 Ctrl+D 가 오도록 설정해줘야 합니다. 

그 중에서 Delete Line (한 줄 삭제하는 기능) 을 선택하고 

밑에 Binding 이라고 쓰는 부분에 키보드로 ctrl 키 누르고 D 누른다.

(텍스트로 Ctrl+D 라고 쓰는거아님주의)

 

 

Apply 라고 눌렀을 때 결과적으로 이렇게 뜨면 되고

Apply and Close 누르면 확인 없이 바로 창이 닫힌다. 

이렇게 Ctrl + D 단축키가 Delete Line 옆에만 위치한 것을 확인했다면 모든 설정이 끝이 났따. 

이제 Emmet 을  쓸 수 있다!

 

끝!