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教學-Bootstrap導覽列選單加入網格讓選單圖文並茂

Bootstrap教學-Bootstrap導覽列選單加入網格讓選單圖文並茂

將Google地圖嵌入網頁,滾動滑鼠第三鍵鎖定不縮放

將Google地圖嵌入網頁,滾動滑鼠第三鍵鎖定不縮放

CSS教學-CSS選擇器套用樣式的優先權順序

CSS教學-CSS選擇器套用樣式的優先權順序

Bootstrap教學-NavBar導覽列選單在手機版下,選單由側邊開啟

Bootstrap教學-NavBar導覽列選單在手機版下,選單由側邊開啟

Lookup-ID一鍵取得Facebook個人臉書、社團、粉絲頁的ID

Lookup-ID一鍵取得Facebook個人臉書、社團、粉絲頁的ID





回應本篇 »

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

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

共 3 梅留言

  • 第3梅
    pp 說道:

    不好意思 想詢問一下
    輸入npm install後
    下行的nap warn沒有出現{package.json}
    這樣是什麼問題?

  • 第2梅
    alex ian 說道:

    啊~我試出來,路徑的名稱好像不一樣了
    我用的路徑是
    cd /Users/mac/Library/Application\ Support/Brackets/extensions/user/brackets-emmet
    Users好像是使用者的名稱
    希望幫到有需要的人

  • 第1梅
    alex ian 說道:

    你好!
    我在STEP 6 的時候遇到問題了我在終端機輸入
    cd ~/Library/Application Support/Brackets/extensions/user/brackets-emmet
    會顯示 No such file or directory
    不知道是什麼原因呢?

    http://imgur.com/a/zM3fO

近期講座

近期講座

更多講座