대부분에 IDE에서는 Emment을 기본적으로 지원합니다. Eclipse 참 좋은 IDE인데 플러그인을 직접 설치해줘야 하는 게 좀 아쉬운 부분이죠ㅠ 그럼 오늘은 이클립스에 Emmet을 설치해보도록 하겠습니다!
Emmet — the essential toolkit for web-developers
Emmet — the essential toolkit for web-developers Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow: Demo | @@@ tooltip: Type CSS-like abbreviation type: ul#nav>li.item$*4>a{Item $} wait: 1000 tooltip: Run “Expan
emmet.io
사이트에 접속 후 Download 클릭해주세요.
Eclipse를 클릭해주세요.
그럼 Emmet과 관련된 github로 이동합니다. 여기서 github주소를 복사하는 게 아닌 http://download.emmet.io/eclipse/updates/를 복사해주세요!(지금 제가 작성한 url을 복사하셔도 됩니다.)
다시 이클립스로 돌아와서 help -> install new softwear을 클릭해주세요. marketspace가 아닙니다!
URL을 Work with: 에 붙여넣어 주시고 Add.. 버튼을 클릭합니다. Name에 Emmet을 써 주시고 Add를 클릭하세요. 그러고 Next!
Next를 눌러주세요.
위에 agreement를 선택 후 Finish 클릭!
이 플러그인을 신뢰하겠냐고 묻는 창에 Select All 클릭 -> Trust Selected 클릭!
설치가 완료되면 이클립스가 재시작하겠냐고 물으면 재시작 후 환경설정(cmd + ,)로 들어가세요.
설정에서 Emmet을 검색 후 , jsp를 입력해 jsp에서 Emmet을 사용 가능하게 만들어준 후 Apply and Close!
Emmet 문법을 이용하여 ul태그 안에 li태그를 5개 만들어줘! 에 해당하는 코드를 입력 후 Tab키를 눌러주세요.
축하합니다! 이제 jsp파일에서 Emmet을 활용해서 좀 더 빠르고 편하게 웹페이지 개발이 가능해졌어요! 다음에 또 유익한 이클립스 플러그인이 있으면 가져와보겠습니다. 감사합니다!