---
# System prepended metadata

title: Emmet

---

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