男女成人秒免费试看久久_无码毛片免费自慰09_黄品汇mba旧版本_亚洲少妇与大狗性交对白_人妻无卡中文乱码在线_无码a级毛片免费视频内谢_午夜亚洲亚洲精品不卡_欧美成人在线观看_欧美日本韩国乱伦_十八禁观看污污污网站

rackets 是一款使用 HTML，CSS，JavaScript 創(chuàng)建的開源的針對 Web 開發(fā)的編輯器。你可能在寧皓網(wǎng)的視頻里見過這款編輯器。實時預(yù)覽，快速編輯，跨平臺，可擴展，開源，讓 Brackets 成為一款非常優(yōu)秀的編輯器。

安裝

打開 Brackets.io，點擊 Download Brackets ，網(wǎng)頁會根據(jù)你的操作系統(tǒng)，為你提供對應(yīng)版本的 Brackets 編輯器。你也可以在所有發(fā)布版本里面自己來選擇。如果是自己選擇下載，需要注意軟件的格式，一般 .dmg 是用在 Mac 系統(tǒng)上的軟件，.msi 可以在 Windows 系統(tǒng)上安裝。

切換語言

Brackets 支持多種語言，默認(rèn)安裝以后界面上是英文的，你可以選擇自己喜歡的語言。

1. Debug -> Switch Language

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

3. 點擊 Reload Brackets

打開目錄

一般開始一個項目，你可以去新建一個目錄，把項目所需求的文件放在這個目錄下面，Brackets 支持打開整個目錄，通過編輯器邊欄上的樹形結(jié)構(gòu)，可以方便的管理項目文件 。

• 方法一：打開菜單，文件 -> 打開目錄

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

這個目錄的結(jié)構(gòu)會顯示在編輯器的邊欄上，點開對應(yīng)的目錄，會繼續(xù)顯示這個目錄里所包含的東西。你也可以在不需要邊欄的時候隱藏它（視圖 -> 隱藏邊欄 或 shift + command + H）。

快速導(dǎo)航

使用快速導(dǎo)航，可以快速找到項目里的文件。

• 方法一：打開菜單：導(dǎo)航 -> 打開快速導(dǎo)航

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

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

工作區(qū)

打開的文件，會在 工作區(qū) 里面顯示出來，點擊對應(yīng)的文件，可以快速地在不同的文件之間切換。已經(jīng)修改的文件沒有保存，在文件名稱的左邊會顯示一個 圓點。

實時預(yù)覽

• 方法一：打開菜單：文件 -> 實時預(yù)覽

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

• 方法三：點擊主界面右上角的 閃電 圖標(biāo)

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

如果不特別指定，Brackets 會使用內(nèi)置的 Web Server 實時預(yù)覽文件，你也可以去為實時預(yù)覽指定一個 Web Server ，比如你可能想實時預(yù)覽 PHP 文件，那么，你可以使用搭建在本地電腦上的開發(fā)環(huán)境，把項目目錄放在你自己的服務(wù)器的目錄里面，比如 semantic 這個目錄的下面，這樣，使用 localhost/semantic 這個地址可以訪問到你的項目，那么你可以把這個地址做為實時預(yù)覽的基本地址。

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

快速編輯

• 方法一：打開菜單：導(dǎo)航 -> 快速編輯

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

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

擴展

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

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

• 方法二：點擊主界面右上角的積木樣式的圖標(biāo)（閃電圖標(biāo)下面的那個）

打開 擴展管理器 以后，在 可獲取 這個選項卡里面，可以找到想要使用的擴展，點擊 安裝，可以安裝這個擴展。打開 已安裝 這個選項卡，可以管理已經(jīng)安裝在編輯器上的擴展，在這里，你可以升級或移除這些擴展。

常用擴展

快速編輯代碼 - Emmet

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

改變樣式 - Themes

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

折疊代碼塊 - Code Folding

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

• Collapse Current：折疊當(dāng)前代碼塊

• Expand Current：展開當(dāng)前代碼塊

• 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 的幫助文檔。

總結(jié)

如果你還在用 Dreamweaver 開發(fā) Web 項目，暫時把它放在一邊，來試試 Brackets 。