Eclipse IDE 에서 Zen-Coding 소개

FT개발을 하면서 일일이 HTML을 열고 닫고 하기는 여간 귀찮은일이 아니죠. 지금 소개시켜드릴 Zen-Coding은 CSS셀렉터 문법으로 작성된 문장을 HTML코드로 확장시켜주는 일종의 매크로입니다.
예제는 다음과 같습니다.

div#page>div.logo+ul#navigation>li*5>a

이렇게 입력후 Scripts 메뉴에서 Zen Coding>Expand Abbreviation을 클릭해주면 아래와 같이 펼쳐집니다.

<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>

지원하는 에디터는 다음과 같습니다:

• Aptana/Eclipse (cross plat form)
• Text Mate (Mac)
• Coda (Mac)
• Espresso (Mac)
• Komodo Edit/IDE (crossplatform)
• Notepad++ (Win dows)
• PSPad (Win dows)
• textarea (browser-based)
• editArea (browser-based)

Eclipse 에서 설치하는 것을 예로 들자면:

Eclipse 최상단 메뉴에서 ‘Scripts’ 메뉴가 없으면 http://download.eclipse.org/technology/dash/update 를 통해 EclipseMonkey를 다운받습니다.
Zen.Coding-Aptana.v0.6.0.1.zip를 다운받아 압축 해제합니다.
Aptana에서 프로젝트 이름을 ‘zencoding’ 으로 하여 General Project를 만듭니다.
프로젝트에 ‘scripts‘ 라는 이름의 빈폴더를 만듭니다. (주의: 반드시 scripts 라는 이름이어야합니다!)
압축해제한 파일을 모두 scripts 아래로 복사합니다
Eclipse Reboot ing~!
부팅후, ‘Scripts’ 메뉴아래에 ‘Zen Coding’이 나오면 제대로 설치된 것입니다
임의의 프로젝트에서 .html 파일을 열거나 만들어서 예제를 실행해봅니다.
* 키변경은 scripts 아래로 복사한 Zen-Coding library의 소스에서 Key: 항목에 직접 지정합니다.

출처 : http://ajaxian.kr/archives/938

---

에디트플러스에서 하는방법

zencoding.zip

명령 : WScript.exe "D:\zencoding\zencoding.wsf"
인수 : $(CurLine)||$(CurSel)
디렉토리 : $(FileDir)
텍스트필터로실행 체크 후 "바꾸기" 선택

참고사이트 : http://www.emacswiki.org/emacs/ZenCoding