---
tags: TS_編輯器
---

<p style="text-align:right;font-size:13px;font-style:italic">
TSuiling最後修改時間@2020.08.18
</p>

# Brackets 網頁編輯器

## 一、攜帶式免安裝版本 Brackets Portable(只有Win版)

> 1. 這裡提供一個攜帶式免安裝版本並且經過TS將環境配置好了(for Windows)，
<a href="http://tsweb.com.tw/download/BracketsPortable1.13.zip">==按右鍵另存連結>下載>解壓縮即可使用==</a>。
> 2. 如果要留意Brackets Portable更新版本，前往 [==SOURCEFORGE==](https://sourceforge.net/projects/bracketsportable/)，但下載後得自行到「Extension Manager 擴充功能管理員」下載外掛整理環境配置。
或者，下載新的 **Portable** 版本後，將舊版中的 **Data** 資料夾拷貝到新版內即可。
>
<br>
<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>
<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 | 直接在游標的下一行增加新行　|
| | 按住【Alt】 | | 按住【Alt】再拖曳滑鼠可方框式選取 |
| 尋找 | Ctrl+F 　| command+F | 目前文件尋找文字　|
| 　| Ctrl+H 　| option+command+F | 目前文件取代文字　|
| 檢視 | Ctrl+==+== 　| command+==+== | 垂直向下增加游標　|
| 　| Ctrl+ ==-== 　| command+ ==-== | 垂直向下增加游標　|
| 除錯 | ==F5== 　| ==command+F== | 重新載入並啟用擴充功能 :thumbsup:　|

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<hr>

# 以下是下載安裝版的步驟 ==============
## 一、下載

> [http://brackets.io/](http://brackets.io/)
> 
>
<br>

## 二、安裝

> 啟動下載後的檔案，逐步Next...安裝完成即可。
>
<br>

## 三、轉換介面語言

> 啟動安裝好的 Brackets 。
> 點選「==Debug== > ==Switch== > ==Language==」再選擇你要的語言，例如: ==繁體中文==。
>
<br>

## 四、延伸模組擴充功能推薦

> 1. 協助網頁設計快速精簡地編輯 (外掛名稱: **Emmet** )
>
> 
>
> 
>
> 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電腦中修改HTML文件預設 ( ![TAB]的預設 )的方法

> 檔案總管 > 搜尋 ==**snippets.json**== 檔案 > 開啟檔案進行修改，大略會是在這個位置上
> C:\Users\你的名稱\AppData\Roaming\Brackets\extensions\user\brackets-emmet\node_modules\emmet\lib

<br>

> 行3:
>

"lang": "zh-Hant-TW",

<br>

> 行822左右:
>

"doc": "html>(head>meta[name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=1.0, maximum-scale=3.0\"]+meta[http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"]+meta[charset=${charset}]+title{${1:Document}})+body",

<br>

> 修改後存檔，按 ==**[F5]**== 重新載入啟動
> 接下來，==**檔案**== > ==**新增**==，在文件中按 ==**!**== 再按 ==**[TAB]**== 鍵，即呈現修改後的結果。

<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="padding:50px 0;text-align:right;">
<a href="http://tsweb.com.tw" style="padding:20px;">回到 TS web</a>
</p>