• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
馬克熊logo

馬克熊

分享最好用的生活知識

  • 首頁
  • 關於馬克熊
  • 網頁程式
    • 自學
  • UberEats
  • 生活
    • 開箱
    • 轉移
    • 娛樂
    • 創業
    • 寵物
  • 心靈成長
    • 親子
    • 人生觀
  • 時事
    • 政治
    • 娛樂
You are here: Home / 網頁程式 / VS code設定增加自定義Emmets snippets程式

VS code設定增加自定義Emmets snippets程式

2 月, 2019 By 馬克熊

emmets是coding的各位必用的功能,而在VS code這款IDE上要如何自己寫想要的emmet指令呢,這邊教給大家

像我想要定義我打下「un」按下tab鍵後就會有

<img src="http://unsplash.it/60/80" alt=pic >

這一行的img tag。

首先我們先打開vs code 的 code

再來打開preferences的user snippets

然後輸入要使用什麼語言時可以使用這個emmet,這邊範例:html

然後系統會開一個json檔案給你編輯。

這邊給一個小技巧是打下sn就會有emmets可以用,我們把它展開會長這樣:

{
	"snippetName": {
		"prefix": "prefix",
		"body": "snippet",
		"description": "description"
	}
}

我依序輸入

{
	"unsplash": {
		"prefix": "un",
		"body": "<img src=\"http://unsplash.it/$1/$2\" alt=$3 >",
		"description": "for fake pictures"
	}
}

snippetname:這個快捷鍵的名稱(自己取)

prefix(重要):要輸入什麼然後按下tab可以展開
body(重要):展開什麼。body中,可以用$1、$2、$3去編輯展開後想要tab停在哪裡。$1是第一次展開完會跳到的地方,$2是按第二次tab會跳到的地方,依此類推。挺實用的!
最後按下儲存,就大功告成拉!
回到html文件試試看吧!
每一個IDE自訂emmets的格式都不太一樣,雖然大部分都是用snippets的方式,但是格式些微不同。這邊提供的是用在VS code這款IDE上面。
*後來熊熊自己在增加snippet的時候,發現都沒用,結果檢查一下發現,原來是我家錯檔案了,原本要家給less的emmet卻加在html的檔案裡。所以大家如果發現設定好後沒有效果的話,可以看是不是加錯檔案呦。
*本來想說會不會要重新打開程式新增的Snippet才會進去,結果發現在VS code裡面是不用的呦!加完儲存就會有了。

Comments

comments

Filed Under: 網頁程式, 自學 Tagged With: 網頁前端筆記, 網頁基礎15天線上課程筆記, 網頁後端筆記, 網頁程式筆記

Primary Sidebar

關於 馬克熊

我是馬克熊,喜歡拍片、做音樂,當過小導演及街頭藝人。因緣際會接觸到網頁程式coding,現在全心學習網頁撰寫相關技術,期許自己能當個優秀的工程師。在這中間的心路歷程,些許心得,藉由部落格與大家分享

Read More…

搜尋

追蹤馬克熊

  • 電子郵件
  • Facebook
  • RSS

快來訂閱電子報

近期文章

  • 談一場遠距離戀愛,該如何抵抗最難過時刻「離別」?
  • 到底要怎樣經營部落格呢?要走方向主題性的還是想寫什麼就寫呢?
  • 娛樂是什麼?小時候打電動、打球、看電影,但長大呢?
  • Git/GitHub下載>上傳>存擋紀錄,學會再也不用害怕
  • JavaScript自學筆記1。暸解一篇網頁是由什麼語言組成的?

精選文章

  • 生活
    • 職場生存 |一直埋頭苦幹的後果… 你千萬不能犯
    • 誰說一定要早睡早起?教你規劃時間管理的四大步驟
  • UberEats
    • 台北、台中、台南UberEats外送員行前準備,註冊須知推薦碼:6AH9LT
    • 全台最貼心男友「UberEats」,懶人、大忙人專用外送美食到你家
    • 台中UberEats外送員是怎麼賺錢的?談到錢最主要的三大問題

贊助連結

快追蹤馬克熊粉絲團

馬克熊

Copyright © 2020 · MISTERQ.CC·