Adobe Brackets安裝Emmet擴充元件

梅問題-Adobe Brackets安裝Emmet外掛
  現在有不少的網頁設計師,使用Sublime Text來設計網頁,除了Sublime Text外,也有另一個也相當受歡迎的編輯器,那就是Adobe Brackets,由於是Adobe自家的產品,因此在整合上更加的完整,可以直接在Brackets中直接載入PSD檔,並快速的將PSD檔自動儲存成網頁格式,這一點作的相當好。
  除此之外Brackets與Sublime Text一樣,也有許多外掛可安裝,而在製作網頁時,為了加速製作時間,有隻外掛一定非裝不可,那就是Emmet,而這隻外掛支援的網頁編輯器相當的多,甚至就連Dreamweaver也有,因此先前梅干也分享過Dreamweaver的安裝方式,讓使用Dreamweaver的朋友們,也可感受到Emmet所帶來的便利,接下來看看如何在Brackets下安裝Emmet吧!
Emmet
外掛名稱:Emmet
下載連結:https://github.com/emmetio/brackets-emmet#readme

Step1
首先到外掛頁面後,點右上角的Download ZIP鈕,將外掛下載回來。
梅問題-Adobe Brackets安裝Emmet外掛
Step2
接著開Brackets後,點右邊的外掛擴充圖示。
梅問題-Adobe Brackets安裝Emmet外掛
Step3
接著把下載好的外掛zip壓縮包,直接拖拉到Brackets外掛安裝的左下角。
梅問題-Adobe Brackets安裝Emmet外掛
Step4
這時會出現錯誤的訊息框,接著先按Close鈕。
梅問題-Adobe Brackets安裝Emmet外掛
Step5
接著到node.js的官網中,下載並完成安裝。
梅問題-Adobe Brackets安裝Emmet外掛
Step6
這時開啟終端機,輸入下方的語法,進到此目錄下。
cd ~/Library/Application\ Support/Brackets/extensions/user/brackets-emmet
梅問題-Adobe Brackets安裝Emmet外掛
Step7
進入該目錄後,再輸入npm install,這樣就安裝完成了。
梅問題-Adobe Brackets安裝Emmet外掛
Step8
回到Brackets,立馬來試試看,輸入Emmet的語法。
梅問題-Adobe Brackets安裝Emmet外掛
Step9
輸入完畢再按下Tab鍵後,立即就會轉成HTML啦!
梅問題-Adobe Brackets安裝Emmet外掛

相關文章

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

「W3layouts」上千個免費可商用RWD自適應版型下載

「W3layouts」上千個免費可商用RWD自適應版型下載

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。