--- tags: TS_編輯器 --- # Brackets 網頁編輯器 ## 零、攜帶式免安裝版本 Brackets Portable > 1. 這裡提供一個攜帶式免安裝版本並且經過TS將環境配置好了,<a href="http://tsweb44.com/download/BracketsPortable1.13.zip">==點我下載,解壓縮即可使用==</a>。 > 2. 如果要留意Brackets Portable更新版本,前往 [==SOURCEFORGE==](https://sourceforge.net/projects/bracketsportable/),但下載後得自行到「Extension Manager 擴充功能管理員」下載外掛整理環境配置。 或者,下載新的 **Portable** 版本後,將舊版中的 **Data** 資料夾拷貝到新版內即可。 > <br> # 以下是下載安裝版的步驟 ======== ## 一、下載 > [http://brackets.io/](http://brackets.io/) > ![](https://i.imgur.com/h9KrnvM.png) > <br> ## 二、安裝 > 啟動下載後的檔案,逐步Next...安裝完成即可。 > <br> ## 三、轉換介面語言 > 啟動安裝好的 Brackets 。 > 點選「==Debug== > ==Switch== > ==Language==」再選擇你要的語言,例如: ==繁體中文==。 > <br> ## 四、延伸模組擴充功能推薦 > 1. 協助網頁設計快速精簡地編輯 (外掛名稱: **Emmet** ) > > ![](https://i.imgur.com/eqtiR8m.png) > > ![](https://i.imgur.com/efU9RmM.png) > > 2. 在CSS或JS輸入選取器時 (按 # 或 . 時) 提供下拉式選單 (外掛名稱: **jQuinter** ) > 3. 色彩色塊表現 (外掛名稱: **Color Highlighter** ) > 4. ==Ctrl+Alt+I== 讓程式碼層階式縮排自動排列 (外掛名稱: **Indentator** ) > 5. 程式碼縮排顯示縱向格線提示 (外掛名稱: **Indent Guides** ) > 6. 以Tabs標籤面板顯示已開啟的檔案及環境配置設定 (外掛名稱: **Custom Work** ) > 7. 美化程式碼排列格式 (外掛關鍵字: **Beautify** ) > 8. 撰寫PHP時協助下拉式選單 (外掛名稱: **PHP Syntax Hint** ) > 9. 撰寫PHP時協助下拉式選單 (外掛名稱: **PHP SmartHints** ) > 10. 啟用PHP語法錯誤偵錯提示 (外掛名稱: **PHP Debugger** ) > <br> ## 五、佈景主題 > 在 ==擴充功能管理員== > ==佈景主題== 選擇喜歡適合的顏色搭配,例如關鍵字: ==Finess==。 > 在「==檢視== > ==佈景主題...==」選擇要套用的佈景主題,例如 Finess。 > <br> ## 六、常用快速鍵推薦 > 沒有加底色不是不重要, 是一般常用的, 加了底色是提醒好用的! > | 分類 | Win Key | Mac Key | 摘要說明 | | ---- | --------------- | -------------------- | -------- | | 檔案 | Ctrl+N  | command+N | 新增檔案 | |  | Ctrl+S   | command+S | 儲存檔案 | |   | ==Ctrl+Alt+S==  | ==option+command+S== | 儲存全部檔案 :thumbsup: | | 編輯 | Ctrl+Z  | command+Z | 復原 | |  | Ctrl+Y  | shift+command+Z | 取消復原 | |  | Ctrl+X  | command+X | 剪下選取範圍 | |  | Ctrl+C  | command+C | 複製選取範圍 | |  | Ctrl+V   | command+V | 貼上複製或剪下的範圍 | |  | ==Ctrl+/==  | ==command+/== | 加上或取消註解 :thumbsup: | |  | ==Ctrl+D== | ==command+D== | 複製整行 :thumbsup: | |  | ==Ctrl+Shift+D== | ==Shift+command+D== | 刪除整行 :thumbsup: | |  | ==Ctrl+Shift+↑== | ==control+command+↑== | 整行往上移動 | |  | ==Ctrl+Shift+↓== | ==control+command+↓== | 整行往下移動 | |  | Ctrl+A  | command+A | 全選 | |  | ==Shift+Alt+↑== | ==shift+option+↑== | 垂直向上增加游標 | |  | ==Shift+Alt+↓== | ==shift+option+↓== | 垂直向下增加游標 | |  | Ctrl+Enter  | command+Enter | 直接在游標的下一行增加新行 | | 尋找 | Ctrl+F  | command+F | 目前文件尋找文字 | |  | Ctrl+H  | option+command+F | 目前文件取代文字 | | 檢視 | Ctrl+==+==  | command+==+== | 垂直向下增加游標 | |  | Ctrl+ ==-==  | command+ ==-== | 垂直向下增加游標 | | 除錯 | ==F5==  | ==command+F== | 重新載入並啟用擴充功能 :thumbsup: | <br> ## 七、基本操作 > 1. 「**檔案** > ==**開啟資料夾**==」 選擇網站所在的資料夾。 > 2. 「**檔案** > ==**新增**==」 開啟新的檔案。 > 3. 「**檔案** > ==**儲存**==」 儲存檔案,檔案名稱 ==**test001.html**== 必須要有對的副檔名。 > 4. 輸入「==**!**==」按 ==**[TAB]**== 按鈕。 &nbsp; <img src="https://i.imgur.com/wXGTh1b.png" width="350"> > > 5. 有關顏色的選擇,如果有下拉式選單可以先隨意選,或是輸入 #000,接著在色彩號碼上按滑鼠右鍵選擇 ==**快速編輯**== (或是:win版按 ==**Ctrl+E**==,mac版按 ==**command+E**==) 就有色彩選擇器選擇顏色。 <br> ## 八、修改HTML文件預設 ( ![TAB]的預設 ) > 檔案總管 > 搜尋 ==**snippets.json**== 檔案 > 開啟檔案進行修改 > 大略會是在這個位置上 > C:\Users\你的名稱\AppData\Roaming\Brackets\extensions\user\brackets-emmet\node_modules\emmet\lib <br> > 行3: > ```json=3 "lang": "zh-Hant-TW", ``` <br> > 行822左右: > ```json=822 "doc": "html>(head>meta[name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"]+meta[http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"]+meta[charset=${charset}]+title{${1:Document}})+body", ``` <br> > 修改後存檔,按 ==**[F5]**== 重新載入啟動 > 接下來,==**檔案**== > ==**新增**==,在文件中按 ==**!**== 再按 ==**[TAB]**== 鍵,即呈現如下結果: &nbsp; ![](https://i.imgur.com/Tx1w2bF.png) <br> ## 九、Mac電腦中修改HTML文件預設 ( ![TAB]的預設 ) 的方法 > 先讓隱藏屬性的檔案顯示出來 > 選擇 **Launchpad** > **終端機** > 輸入 > > ==**defaults write com.apple.finder AppleShowAllFiles TRUE;\killall Finder**== > <br> > 運用 **Finder** 找到 **Emmet** 的 **snippets.json** , 位置大略是在 > ==**/Users/使用者名稱/Library/Application Support/Brackets/extensions/user/brackets-emmet/node_modules/emmet/lib/**== > 將 snippets.json 檔案拖曳到 Brackets 進行編輯 > <br> > 行3 與 行822 的修改與上述相同。 > 修改完成 > 儲存檔案 > 重新啟動 Brackets 即可。 > <br> > 修改完成建議再將隱藏屬性的檔案隱藏起來 > 選擇 **Launchpad** > **終端機** > 輸入 > > ==**defaults write com.apple.finder AppleShowAllFiles FALSE;\killall Finder**== > <br> > 接下來,重新啟動 Brackets 後, > ==**檔案**== > ==**新增**==,在文件中按 ==**!**== 再按 ==**[TAB]**== 鍵, > 即可呈現修改後的結果。 <p style="height:50px;"></p> <a href="http://tsweb44.com" style="display:block;padding:20px;text-align:right;">回到 TS web</a>