brackets網頁開發工具1.10正式版

brackets網頁開發工具1.10正式版更新了，現在支持更多類型的文件編碼，使用更加的靈活，brackets是一款功能強大，界麵美觀的網頁開發工具，速度快，支持實時預覽，需要的用戶趕快來下載吧。

更新內容

Multiple encoding support: 支持 40 多種不同的文件編碼

Search History: 可在搜索欄訪問最近所有查詢

@rule and pseudo-selector code hints: CSS 代碼提示現在支持 @rule 和 pseudo selector/element 代碼提示。

使用方法

安裝

打開 Brackets.io，點擊 Download Brackets ，網頁會根據你的操作係統，為你提供對應版本的 Brackets 編輯器。你也可以在所有發布版本裏麵自己來選擇。如果是自己選擇下載，需要注意軟件的格式，一般 .dmg 是用在 Mac 係統上的軟件，.msi 可以在 Windows 係統上安裝。

切換語言

Brackets 支持多種語言，默認安裝以後界麵上是英文的，你可以選擇自己喜歡的語言。

Debug -> Switch Language

點開下拉菜單，選擇你想要的語言

點擊 Reload Brackets

快速導航

使用快速導航，可以快速找到項目裏的文件。

方法一：打開菜單：導航 -> 打開快速導航

方法二：使用快捷鍵：shift + command + O

直接輸入想要找的文件名稱，Brackets 會給你一個包含這個文件名的文件列表，點擊對應的文件，可以打開這個文件。

工作區

打開的文件，會在 工作區 裏麵顯示出來，點擊對應的文件，可以快速地在不同的文件之間切換。已經修改的文件沒有保存，在文件名稱的左邊會顯示一個 圓點。

實時預覽

方法一：打開菜單：文件 -> 實時預覽

方法二：使用快捷鍵：alt + command + P

方法三：點擊主界麵右上角的 閃電 圖標

Brackets 會為你打開一個 Chrome 瀏覽器的窗口，實時顯示正在編輯的文檔。也就是，你現在可以去修改文檔裏的內容，或者文檔所鏈接的樣式表還有腳本文件，所做的修改會實時的在瀏覽器中顯示。注意，在實時預覽時，你不能使用瀏覽器的開發者工具，一但打開開發者工具，實時預覽就會失效了。

如果不特別指定，Brackets 會使用內置的 Web Server 實時預覽文件，你也可以去為實時預覽指定一個 Web Server ，比如你可能想實時預覽 PHP 文件，那麼，你可以使用搭建在本地電腦上的開發環境，把項目目錄放在你自己的服務器的目錄裏麵，比如 semantic 這個目錄的下麵，這樣，使用 localhost/semantic 這個地址可以訪問到你的項目，那麼你可以把這個地址做為實時預覽的基本地址。

打開 文件 -> 項目設置，然後輸入預覽的地址，例如：http://localhost/semantic，這樣你在使用實時預覽的時候，會基於這個地址去預覽文件。

快速編輯

方法一：打開菜單：導航 -> 快速編輯

方法二：使用快捷鍵：command + E

Brackets 允許我們快速去編輯 HTML 或者 CSS 文檔。快速編輯 HTML 文檔，可以去為選中的元素快速添加或者修改樣式。編輯器會給你顯示出應用在所選中元素上的所有的樣式，選中對應的樣式，直接去修改，這樣你就不需要再去找到對應的樣式表，對應的地方去修改了。快速編輯同樣適用 CSS 文檔，比如放在顏色屬性上，會顯示一個顏色選擇器，或者動畫屬性上，會顯示一個可以調整動畫曲線的工具。非常非常方便。

擴展

你可以為 Brackets 編輯安裝擴展來增加它的功能。 在 Brackets Extension Registry 裏可以查看可用的擴展，在這裏，你也可以提交自己編寫的擴展。

方法一：文件 -> 擴展管理器

方法二：點擊主界麵右上角的積木樣式的圖標（閃電圖標下麵的那個）

打開 擴展管理器 以後，在 可獲取 這個選項卡裏麵，可以找到想要使用的擴展，點擊 安裝，可以安裝這個擴展。打開 已安裝 這個選項卡，可以管理已經安裝在編輯器上的擴展，在這裏，你可以升級或移除這些擴展。

常用擴展

快速編輯代碼 - Emmet

emmet 可以讓我們使用編寫形式去撰寫 HTML 與 CSS 代碼，非常方便。寧皓網有個課程專門介紹了 emmet 插件。

改變樣式 - Themes

可以改變編輯器的樣式。安裝以後，主菜單上會多出一個 Themes ，打開以後，選擇想要的主題。

折疊代碼塊 - Code Folding

讓 HTML，CSS，JavaScript，PHP 的代碼可以折疊起來。在 視圖 菜單下，會多出幾個菜單項目。

Collapse Current：折疊當前代碼塊

Expand Current：展開當前代碼塊

Collapse All：折疊所有代碼

Expand All：展開所有代碼

自動格式化 - Beautify

自動給你格式化 JavaScript，HTML，CSS 等代碼。在 編輯 菜單下，多了兩個菜單項：Beautify 還有 Beautify On Save。

PHP 幫助文檔 - QuickDocsPHP

選中位置，使用快捷鍵 command + K（mac），ctrl + K （windows），可以快速查看 PHP 的幫助文檔。

JS 幫助文檔 - QuickDocsJS

選中位置，使用快捷鍵 command + K（mac），ctrl + K （windows），可以快速查看 JavaScript 的幫助文檔。