Zen Coding Visual Studio Plugin

Zen Coding Visual Studio Plugin

참조 URL

1. Zen Coding - a new way of writing Html and CSS Code
2. http://en.wikipedia.org/wiki/Zen_Coding#Text_editors
   
3. http://vswebessentials.com/
   
4. http://zencoding.codeplex.com/
5. http://www.johnpapa.net/zen-coding-in-visual-studio-2012/
   
6. http://blog.vijay.name/2013/01/zen-coding-for-visual-studio-2012/
   
7. http://visualstudiogallery.msdn.microsoft.com/07d54d12-7133-4e15-becb-6f451ea3bea6
   

Zen Coding으로 아래와 같이 입력을 하면

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

아래와 같은 HTML이 자동으로 나오게 하는 코딩 기법이다.

<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>

또 다른 예제

div#header>img.logo[alt=image]+ul#nav>li*2>a:link

HTML 결과 물

<div id="header">
    <img src="" alt="image" class="logo"/>
    <ul id="nav">
        <li>
            <a href="http://"></a>
        </li>
	<li>
            <a href="http://"></a>
        </li>
    </ul>
</div>

위와 같은 결과를 Visual studio에서도 사용할 수 있도록 도와주는 툴이 나왔다. 

Web Essential 2012 Home page 에서 다운바다서 설치하거나 Visual Studio에서 Tool > Extensions and Updates 에서 Online 에서 Web Essentials를 추가할 수 있다. 그런다음 웹 페이지( ASP.NET MVC에서는 cshtml또는 aspx 페이지)에서 잰코딩을 하고 탭을 누르면 위 예제와 같이 젠코딩이 자동으로 HTML을 생성해 준다.

div#page>div.logo+ul#navigation>li*5>a   (tap 키를 누른다)

[코드1] Zen Coding

<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>

[코드2] Zen Coding이 HTML로 변환된 코드

Web Matrix 3에서도 Zen Coding을 지원하니 보다 쉽고 빠르게 HTML을 만들어 낼 수 있을 것이다.

Web Essentials 다운로드 페이지

http://vswebessentials.com/download

-----------------------------------------------------------------------------------------------------------------

만약 이와 비슷한 기능을 추가하고 싶다면 다른 프로젝트에서 추진되다가 지금은 중단된 프로젝트에서 관련 소스를 얻을 수 있다. http://einaregilsson.com/zen-coding-visual-studio-addin/ ZenCoding.VisualStudio v1.1.0.333 DOWNLOAD ADD-IN || DOWNLOAD SOURCE