Liz's Blog

如何用Sublime外掛Emmet寫View可以更快速

| Comments

之前在看12 in 12 Challenges課程影片的時候,發現作者輸入html都很快速,似乎有快速鍵,查了才知道是使用Emmet外掛,所以就找了一下Udemy上面有沒有相關免費課程,剛好有Sublime 超強外掛應用(繁體中文)可以上。

先在Sublime上安裝Package Control來管理其他外掛。
1.按View > Show Console,貼上官網上提供的Python程式碼。
2.安裝完成後,會要求系統重啟程式即可。
3.按Tools > Command Palette,搜尋Package Control即可看到安裝完成。
4.搜尋ins,點選Package Control: Install Package。
5.搜尋Emmet及安裝。
6.按Tools > Command Palette,搜尋ins,點選Package Control: Install Package。
7.搜尋ins,點選Package Control: Install Package。
8.搜尋ConvertToUTF8及安裝。

詳細Emmet祕技,可參考官方Emmet Cheat Sheet,以下僅就Sublime 超強外掛應用(繁體中文)及官方Cheat Sheet中提到的HTML做筆記。

記得把右下角的Plain Text改成HTML,不然按再多次Tab都沒用喔~
1.! + Tab鍵(或HTML:5 + Tab)

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

2.Tag + Tab鍵
h1 + Tab:<h1></h1>
p + Tab:<p></p>
ul + Tab:<ul></ul>
li + Tab:<li></li>
a + Tab:<a href=""></a>
img + Tab:<img src="" alt="">

3.ul+ + Tab鍵(或ul>li + Tab)

<ul>
    <li></li>
</ul>

4.ul>li>a + Tab鍵

<ul>
        <li><a href=""></a></li>
</ul>

5.ul>li*2>a + Tab鍵

<ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
</ul>

6.table+ + Tab鍵(或table>tr>td + Tab)

<table>
    <tr>
        <td></td>
    </tr>
</table>

7.table>tr*2>td*3+ Tab鍵

<table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

8.div.title + Tab鍵(或.title + Tab)
<div class="title"></div>

9.div#header + Tab鍵(或#header + Tab)
<div id="header"></div>

10.h1+p + Tab鍵

  <h1></h1>
    <p></p>

11.ul.products-list>li*2>a>h2+span + Tab鍵

<ul class="products-list">
        <li><a href="">
                <h2></h2>
                <span></span>
            </a></li>
        <li><a href="">
                <h2></h2>
                <span></span>
            </a></li>
</ul>

Comments

comments powered by Disqus