# Emmet :::success :bookmark: 目錄 [TOC] ::: ## Emmet介紹 [影片](https://www.youtube.com/watch?v=EOFL8NJUlf8&ab_channel=WeiWei) 當我們於程式碼編輯器輸入我們的程式碼後，有時會看到該編輯器提醒我們有哪些語法可以使用，這就是Emmet，Emmet對於開發人員來說是個非常便利的外掛工具，如以下所示 ![](https://i.imgur.com/5RcfHaa.gif) 現在打開VS CODE一起來使用Emmet吧，可以先在html的檔案內輸入！後按下Tab看看結果哦！ ### Element Emmet 最基礎的就是使用Tag名稱觸發Emmet，以下範例都可以直接在VS CODE中使用 ```htmlembedded= <!-- 按下tab即可看到結果 --> h1 -> <h1></h1> p -> <p></p> btn -> <Button></Button> form -> <form action=""></form> ``` 我們也可以幫這些Tag加上class或id ```htmlembedded= h1#h1 -> <h1 id="h1"></h1> div.box -> <div class="box"></div> .box -> <div class="box"></div> ``` ### Attribute Emmet 接著我們可以幫我們的Tag加上一些屬性 ```htmlembedded= <!-- 按下tab即可看到結果 --> input:text -> <input type="text" name="" id=""> form:get -> <form action="" method="get"></form> p[color="#fff"] -> <p color="#fff"></p> div[name='box' id='box'] -> <div name="box" id="box"></div> ``` ### Text Emmet 剛剛使用的Emmet都沒有幫Tag加上文字，我們也可以使用Emmet補上文字，只要加上 **{}** 即可 ```htmlembedded= <!-- 按下tab即可看到結果 --> h1{Hello World} -> <h1>Hello World</h1> p{This is Test} -> <p>This is Test</p> btn{Click Me} -> <button>Click me</button> ``` ### Nesting Emmet 我們也可以直接使用階層式的Emmet，上面都是使用單一Tag而已。 ```htmlembedded= <!-- 按下tab即可看到結果 --> .parentBox>.childBox>h1{Inside Text} -> <div class="parentBox"> <div class="childBox"> <h1>Inside Text</h1> </div> </div> ``` 也可以利用運算式來使用Emmet #### 運算式 + (同階層) ```htmlembedded= .box1+.box2+.box3 -> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> ``` #### 運算式 * (數量) ```htmlembedded= .box*2 -> <div class="box"></div> <div class="box"></div> ``` ## 客制化自己的Emmet 以VS CODE為例 [影片](https://youtu.be/ymiX3x9Hjrg) 我們其實是可以客制化自己的Emmet的，透過客制化Emmet可以增進我們的開發速度。 在VS CODE中我們點選左上角**File**->**Preferences**->**User Snippets**之後會跳出以下視窗 ![](https://i.imgur.com/0GZVVPZ.png) 這時候我們只要打上我們想要客製化的程式語言，就會出現對應語言的json檔，以下先以JavaScript為例 ![](https://i.imgur.com/l3JOxA8.png) 打開json檔案後我們先介紹一下該json的結構 ***javascript.json*** ```json= { // Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are: // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the // same ids are connected. // Example: "Print to console": { "prefix": "log", "body": [ "console.log('$1');", "$2" ], "description": "Log output to console" } } ``` prefix : prefix內要輸入的是你要觸發Emmet提示的文字 body : body內要輸入的是觸發Emmet後要輸出的程式碼 description : description內要輸入的是該段Emmet的敘述，在提示時會出現。 $1,$2, $n.... : 在body的地方加上 **$1(or $2)** 可以讓設定多重選項，如果有設定到 **$2** 以上按下**Tab**後即可從 **$1跳至設定$2** 的地方並再次觸發Emmet，如下所示: ![](https://i.imgur.com/o0RXuvN.gif) ## Bonus 這邊將簡單設定Axios的Snippets ***javascript.json*** ```json= { "Axios Request": { "prefix": "ar", "body": [ "axios.${1|get,post,put,delete|}('${2:url}')", ".then(res => res.json())", ".then(data => {", " $3", "})", ".catch(err => console.log(err))" ], "description": "Axios Request" } } ``` 成果如下 ![](https://i.imgur.com/fQZACum.gif)