line3

零、可以使用 BracketsPortable 免安裝攜帶版

TS講師已整理準備好需要的環境設定及相關擴充外掛的1.10版本,放在「 \\pc1\TS


一、如果要使用安裝版本,請下載安裝 Brackets 主程式

點選下方圖片連結官網 → 點選 Download Brackets 按鈕下載 → 下載後連按二下進行安裝

snap00719

 


二、切換語言

snap00720

snap00721

 


三、必須安裝的外掛

snap00722

snap00723

在【佈景主題】中可以安裝額外的佈景主題(例如:Finess 或 Raven
安裝佈景主題後,選擇「檢視佈景主題」選擇要切換的佈景主題。


四、基本操作

(1)、「檔案→開啟資料夾」開啟網站所在的資料夾

(2)、「檔案→新增」(或按【Ctrl + N】)

(3)、「檔案→儲存」(或按【Ctrl + S】)輸入檔案名稱必須包含副檔名(例如:test001.html

(4)、在檔案中輸入「!」按「Tab」鍵, 即可顯示如下圖的程式碼

snap00727

(5)、「Ctrl」+「+」可以放大程式碼字體,「Ctrl」+「」可以縮小程式碼字體

(6)、編輯CSS需要設定顏色時,會顯示常用色票選單,如下圖所示

snap00734

(7)、如果沒有想要的顏色,先隨意選,接著在顏色名稱上按右鍵選擇「快速編輯」(或按【Ctrl + E】),如下圖所示

snap00735

(8)、接著會顯示調色盤(顏色揀選器),如下圖所示,選擇顏色後按「X」關閉(或按【Ctrl + E】)

snap00736

(9)、完成編輯後「檔案→儲存」點選右側的「即時預覽」鈕,即可送到瀏覽器預覽結果

       ※ 如下圖所示,瀏覽器會以模擬伺服器模式來預覽

       ※ 當「即時預覽」鈕呈現橘色時,只要檔案儲存,瀏覽器即同步更新

snap00738 snap00739


五、建議可再安裝的外掛

(1)、jQuinter:在 CSS 或 JS 輸入選取器時 (按 # 或 . 時) 提供下拉式選單

(2)、Custom Work:以Tabs標籤面板顯示已開啟的檔案及環境配置設定

(3)、Beautify 及 beautify.io:美化程式碼排列格式

(4)、Indentator:按 [Ctrl+Alt+I] 將文件的程式碼以階層縮排

(6)、Move Files:左側檔案面板可以拖曳搬移

(7)、HTML Skeleton:右側增加 brackets_1 按鈕,可以開啟插入網頁元素的視窗

(8)、Color Highlighter:CSS色碼編輯時即時以背景色呈現

(9)、 PHP Syntax Hint:撰寫PHP時協助下拉式選單

(9)、 PHP SmartHints:撰寫PHP時協助下拉式選單

(10)、PHP Debugger:啟用PHP語法錯誤提示

(11)、Quick multi-cursor selection
按住【Ctrl】鍵+滑鼠拖曳可以選取多個不連續的文字
選取文字後按【Alt+D】可以虛線標示出所有相同文字
繼續按【Alt+D】可以逐項選取起來
如果下一項不選取可以按【Alt+S】放棄下一項被選取
這時輸入文字,可以同時修改所有選取區的文字

………………………………………等等。


六、建議外掛參考網站

Google搜尋:brackets 外掛

Google搜尋:brackets plugin

Google搜尋:brackets 教學

YouTube搜尋:brackets 外掛

………………………………………等等。


七、快速鍵參考

分類 快速鍵 說明
檔案 Ctrl + N 開新檔案
  Ctrl + S 儲存檔案
  Ctrl + W 關閉檔案
編輯 Tab 或 Ctrl + ] 縮排
  Shift + Tab 或 Ctrl + [ 取消縮排
  Ctrl + X 剪下選取文字
  Ctrl + C 複製選取文字
  Ctrl + V 貼上剪下或複製的文字
  Ctrl + D 複製游標所在的整行
  Ctrl + Shift + D 刪除游標所在的整行
  Ctrl + A 全選整份文件
  Ctrl + Shift + A 在選定的內容外加上輸入的標籤
  Ctrl + Shift + K 刪除游標所在的標籤(包含頭尾標籤)
  Ctrl + Shift + ↑ 或 ↓ 整行向上或向下移動
  Ctrl + / 將游標所在的此行加上註解符號
  Ctrl + 空白鍵 顯示程式提示
  Ctrl + Shift + 空白鍵 顯示程式的參數提示
尋找 Ctrl + F 尋找文件中符合選取的關鍵字
  Ctrl + H 尋找並準備取代符合選取的關鍵字
檢視 Ctrl + + 放大文件字體
  Ctrl + — 縮小文件字體
  Ctrl + E 針對選取關鍵字顯示快速編輯
除錯 F5 重新載入並啟動擴充功能
  F12 開啟開發人員檢查工具