[工具] 簡介全新跨平台網頁開發工具 – Brackets

by AlexLeo · 2015-08-01

由 Adobe 公司開發，少見的跨平台原始碼編輯器，支援 HTML、CSS、JavaScript 等語言的語法強調，與自動完成；且可以直接呼叫瀏覽器進行 Live Preview，馬上就可以透過瀏覽器確認編輯結果。也可以在編輯 HTML 時，直接顯示套用的 CSS 規則。

若是有在追蹤小獅的人（我可是有開 DNT 耶 (#`Д´)ﾉ），應該知道小獅是個候鳥型的生物，隨著環境需求的不同，經常在多個作業系統中切換。這次小獅要來跟大家分享最近的新發現，一個跨平台的網頁原始碼編輯器。

簡介

	名稱：	Brackets
	開發者：	Adobe Systems
	官方網站：	http://brackets.io/
	Git Repo:	https://github.com/adobe/brackets

在小獅撰寫這篇文章的時候，最新的版本是 1.4 版，已經加入了中文介面，就算是外文苦手也不用擔心看不懂的問題喔！

下載 & 安裝

若是問小獅要到哪裡下載的話，我必定會直接回答你 – 官網上首頁上的 Download 按鈕，你試過了嗎？

▲ 官網上的 Download 按鈕會自動判斷你的作業系統，給你適合的安裝檔。

除非你需要的是測試版，那就必須到 Git 上的 Release 找，或者自行編譯 Nightly 版。

▲ Release 中的 Pre-release 就類似測試版的概念

軟體安裝的過程並沒有甚麼需要特別注意的地方，Windows 使用者只要按照精靈的指示操作即可，Linux / MacOSX 使用者請使用套件管理器安裝。

若第一次開啟軟體時，沒有自動切換為中文顯示，請依照如下步驟切換顯示語言：

▲ 按下工具列上的 Debug

▲ 選擇 Switch Language

▲ 選擇 “繁體中文” （若選單出現問題，請使用方向鍵切換）

▲ 按下 Reload Brackets 重開

▲ Ya~ 變成中文囉！

操作 & 功能介紹

在軟體開啟之後，第一個畫面就是以 HTML 編排的簡易說明文件，若你有安裝 Google Chrome，直接按下畫面右上角的閃電圖示，就可以開啟即時預覽，直接檢視網頁實際瀏覽起來的樣子（以下使用 Windows 版示範）

Live Preview 即時預覽

▲ 按下右上角的閃電圖示

▲ 接下來就可以配合 Google 瀏覽器進行即時預覽，所有對網頁的修改都會在瀏覽器上即時顯現

使用 Firefox 的朋友們也別太氣餒，再較新的版本中，我們可以透過打開實驗性的 Live Preview 功能，在 Firefox 上達到相同的效果。

（這也是小獅一直拖到現在才開始使用這套工具的原因）

▲ 按下 Enable Experimental Live Preview

▲ 再次按下 Live Preview 的閃電按鈕就可以啟動 Firefox 進行即時預覽了！