블로그 이미지
JEEN

서울에 사는 꽃청년의 IT찌질모험기

Rss feed Tistory
IT/Tips 2010.05.07 13:20

[ Vim/Zencoding ] Vim 에 늦바람들기 시작하면서 Zencoding 만지다

  원격으로 서버에 들어가서 작업해야 될 일이 많기에 주로 emacs/vim 을 사용해왔습니다.
  하지만 뭐 기본적으로 복사/붙여넣기, 검색/치환 을 시작으로 Syntax Highlighting 되면 그냥 오케이라고 생각해왔었습니다.

  올해 초 서서히 붐이 일기 시작한 Zencoding 도 다른 여러 IDE 에 플러그인으로 등장했지만 그닥 사용성에서 만족하지는 못했기에 (IDE 자체가 무겁기도 하고..) 잊고 지내다가, 심심해서 vim의 zencoding 플러그인을 넣어보았습니다.


  $HOME/.vim/plugin/ 에 zencoding.vim 을 넣고 
  
  vim 을 실행시켜서 INSERT MODE 에서 아래와 같이 입력하고

  html:5

  커맨드 모드에서 Ctrl + y , 를 누르면 

  <!DOCTYPE HTML>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>

  </body>
  </html>

 로 변환됩니다. 적은 타이핑 수로  HTML 기본 뼈대를 갖출 수 있는 것입니다. html:5 같은 스니펫은 zencoding.vim 안에 정의되어 있기 때문에... 거기에 맞춰서 자신에게 필요한 html 기본 뼈대를 만드는 방법도 있을 겁니다. (html:4t 나 html:4s 등등...)

  또한 역시 INSERT MODE 에서 
  table#main>tr.head>th*4<tr.cols*2>td*4

  라고 입력하고 커맨드 모드에서 Ctrl + y , 를 누르면 
<table id="main">
     <tr class="head">
        <th></th>
        <th></th>
        <th></th>
        <th></th>
      </tr>
      <tr class="cols">
         <td></td>
         <td></td>
         <td></td>
         <td></td>
     </tr>
      <tr class="cols">
         <td></td>
         <td></td>
         <td></td>
         <td></td>
     </tr>
  </table>

  이렇게 CSS 셀렉터 와 같은 형식도 지원을 하게 됩니다. 
  그외 자신만의 스니펫을 정의해서 여러모로 웹개발에 편리하게 쓰일 수 있지 않을까 합니다.
  
* 개발서버의 vim 이 6.8.x 였는데 여기에 zencoding.vim 을 넣으니까 에러가 나서 최신버젼 7.2.x 를  홈디렉토리에 넣고 돌렸더니 잘 되덥니다. 은근히 버젼많이 타나봐요. (vim 초짜 ;ㅁ;)

 아무튼 vim++
신고
TOTAL 469,859 TODAY 54

티스토리 툴바