brackets：前端開發(fā)工程師必備編輯器之一

rackets介紹

最近開始使用一個新的編輯器，是Adobe開發(fā)的開源的項目，與Sublime Text2相比有兩點優(yōu)勢：

可以實時預(yù)覽；
可以快速編輯，在HTML可以編輯CSS和JS代碼。

Adobe Brackets是一個開源的基于HTML/CSS/JavaScript開發(fā)，運行在native shell上的集成開發(fā)環(huán)境。該項目由Adobe創(chuàng)建和維護，根據(jù)MIT許可證發(fā)布。提供Windows和OS X平臺支持。

Brackets的特點是簡約、快捷，沒有很多的視圖或者面板，它的核心目標是減少在開發(fā)過程中那些效率低下的重復(fù)性工作，例如瀏覽器刷新，修改元素的樣式，搜索功能等等。

Brackets使用

官方提供簡體中文語言包，在菜單欄處選擇debug->language->simple chinese就可更換為簡體中文版本

左側(cè)目錄樹頂部會顯示你最近打開的正在工作的幾個文檔，非常的方便。

Brackest會檢測文檔是否符合html規(guī)范，并且還有JS錯誤提示，點擊黃色三角感嘆號就會彈出錯誤提示，如下圖

把光標放在一個class或id屬性的標簽名稱上，按下Ctrl/Cmd + E（“編輯”）或退出編輯。Brackets將搜索項目下所有CSS文件，然后打開一個內(nèi)嵌的編輯器嵌入在HTML文件中，可以讓你迅速修改CSS代碼。唯一美中不足的是：搜索的是項目下所有的CSS文件，如果能修改成所搜當前文件使用的CSS文件就更好了。

Brackest同樣也支持JS的快速預(yù)覽和編輯。

Brackets內(nèi)建取色器，提供RGBa、HEX、HSLa的顏色編碼形式。把光標放在一個顏色編碼上，按下Ctrl/Cmd + E（“編輯”），退出取色器窗口需要使用Esc鍵。

Brackets提供網(wǎng)頁即時預(yù)覽功能。使用該功能時，Brackets調(diào)用Chrome瀏覽器打開當前頁面，此后修改html、css、javascript并保存后，所修改的內(nèi)容會即時響應(yīng)到瀏覽器中的頁面，無須手動刷新頁面。這是Brackets最大的一個亮點，有兩個顯示器的coder有福了，可以分屏顯示Brackets和chrome，即時修改即時預(yù)覽，無需切換編輯器/瀏覽器和刷新頁面。

目前即時預(yù)覽功能的一些限制：

它僅適用于Chrome瀏覽器為目標瀏覽器，你必須安裝Chrome。

它依賴于在Chrome瀏覽器中的遠程調(diào)試功能，這是一個命令行標志啟用。在Mac上，如果你已經(jīng)在使用Chrome瀏覽器，這時啟動“即時預(yù)覽”，Brackets將詢問你是否要重新啟動Chrome瀏覽器啟用遠程調(diào)試功能。

只能同時對一個HTML文件進行預(yù)覽 – 如果切換另一個HTML文件，Brackets將關(guān)閉原來的預(yù)覽。

Brackets快捷鍵

Ctrl/Cmd+Shift+H 可以呼出與關(guān)閉文件樹

Ctrl/Cmd + E 快速預(yù)覽/編輯 css樣式/javascript函數(shù)

Ctrl/Cmd + +/- 放大縮小編輯區(qū)字體大小

Ctrl/Cmd + 0 重置編輯區(qū)字體大小

Ctrl/Cmd + Alt + P 打開即時預(yù)覽功能

Ctrl/Cmd + / 行注釋

Ctrl/Cmd + Alt + / 塊注釋

不足：不支持代碼折疊。

Brackets插件推薦

1.代碼格式化插件：Beautify

直接打開Brackets 插件管理器，搜索安裝beautify。

安裝完畢后，選擇菜單上的編輯→beautify（或使用快捷鍵ctrl+alt+L）完成代碼格式化

2.HTML代碼編輯：Emmet

最強大的HTML和CSS快速編輯插件

3.CSS和JS壓縮插件：Minify

很強大的插件，集成了CSS和JS的壓縮，會在同個目錄下自動生成*.min.*格式的文件。

4.css3代碼自動補全插件：auto prefix

使用CanIUse上的css3數(shù)據(jù)，自動補全css3前綴和瀏覽器兼容，不過可能有些新了。有一些舊版本的瀏覽器會被拋棄掉。

5.代碼折疊插件：brackets-code-folding

安裝URL：https://github.com/thehogfather/brackets-code-folding

默認不支持代碼的可折疊功能。通過此擴展的安裝，對代碼添加可折疊功能。

6.當關(guān)閉編輯器時自動保存所有打開未保存的文件：Autosave Files on Window Blur

類似Sublime Text2、phpstorm / webstorm的風(fēng)格，之前提到的不足全部解決了。

7.Brackets主題：theme

安裝URL：https://github.com/MiguelCastillo/Brackets-Themes

該擴展為一個用于使用基于CodeMirror的主題集的擴展。安裝該擴展后應(yīng)用程序菜單中出現(xiàn)“Themes”菜單，開發(fā)者可以為應(yīng)用程序界面從中選用一個主題。

其他的等待發(fā)現(xiàn)中，如果你發(fā)現(xiàn)有優(yōu)秀的插件，不妨給我推薦一下。

喜歡這篇文章的朋友，歡迎關(guān)注、收藏、轉(zhuǎn)發(fā)、評論，你的支持，是我每日更新的動力！
喜歡前端的朋友可以點擊關(guān)注一下，每日分享精彩的前端文章！

起編程，相信很多人都不陌生，立馬就會想到像：java、C、C#、C++、SQL等等用的比較廣泛的編程語言。網(wǎng)頁的編寫雖然比不上這些編程語言那么的復(fù)雜，但是一個好的網(wǎng)頁，是需要大量的：樣式設(shè)計、利用ps修圖、以及JavaScript等等技術(shù)相結(jié)合。那么今天就為大家簡單的說說HTML的編寫，對網(wǎng)頁的基本編寫的操作有個簡單的認識，相信看完下面的內(nèi)容，聰明的你，馬上就能寫出屬于自己的網(wǎng)頁呢~

編寫工具：

Phase 5、 Programmer’s Notepad、SynWrite、PlainEdit.Net、Notepad++、CoffeeCup、jEdit、Sublime Text 2、Brackets、Aptana Studio 3（這10個都是我從網(wǎng)上搜的，小編除了Notepad++,其他都沒用過~~~）其實編寫工具一定要適合自己，才是最好的，所以小編一直都喜歡用”記事本”編寫，O(∩_∩)O哈哈~，當然推薦一下：Dreamweaver也是相當好用的。

對于初學(xué)者來說，記事本絕對是最好的編寫工具，因為所有的代碼都要自己一個一個寫，沒有其他編寫工具的快捷鍵提示。

編寫方法：

新建文件：

新建一個記事本文件，并將后綴名改為 .html ，然后在鼠標右鍵選擇用記事本打開。因為.html的文件默認的是以網(wǎng)頁的形式打開的，所以，修改后綴名這一步也是寫網(wǎng)頁中重要的一步。

基本框架：基本的網(wǎng)頁一般包括網(wǎng)頁的標簽<html>,網(wǎng)頁的頭<head>,網(wǎng)頁的主體（身體）<body>，并且在網(wǎng)頁的編寫中有一個原則，就是幾乎所有的標簽都是一一對應(yīng)的。即<>...</>。

網(wǎng)頁的標題：

添加<title>...</title>標簽即可編寫網(wǎng)頁的標題，隨便寫啥都可以~

網(wǎng)頁內(nèi)容的編寫：

網(wǎng)頁的內(nèi)容只要你能想的到的，都可以寫上去，直接在<body>...</body>里隨便的輸入內(nèi)容吧~

效果圖：

修飾：

利用各種標簽來對你想到的內(nèi)容進行格式、顏色、等內(nèi)容上的修改，下面我簡單列舉幾個常用的標簽，小伙伴們可以自己動手試試達到想要的效果，沒有涉及到的還請諒解。

添加背景圖片：<body background="圖片所在路徑+圖片全名">

背景顏色：<body color="顏色的英文名稱或者顏色代碼，可去網(wǎng)上搜索">

添加圖片：<img src="圖片所在路徑+圖片全名">

文字設(shè)置：<font size=”文字大小” face=”字體” color=”文字顏色”>...</font>

居中：<center>...</center>

換行：<br>

段落：<p>...</p>

超鏈接：<a href=\"鏈接的地址\">鏈接的名字</a>

移動字體：<marquee direction=lift或者right>寫上你想寫的字</marquee>

字體加粗：<b>添加文字</b>

字體斜體：<i>添加文字</i>

字體下劃線:<u>添加文字</u>

字體刪除線:<s>添加文字</s>

字體加大:<big>添加文字</big>

可以試試在<head>...<head>中試試加入我的這段代碼哦~

<head>

<title>我的網(wǎng)頁demo</title>

<div id="boom"><marquee direction=lift>歡迎各位小伙伴轉(zhuǎn)發(fā)~關(guān)注~贊~評論~有任何錯誤或是問題都說出來哦

~~~</marquee></div>

function Color()

{

var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray";

color=color.split("|");

document.getElementById("boom").style.color=color[parseInt(Math.random() * color.length)];

}

setInterval("Color()",400);

</script>

</head>

今天就介紹到這里，歡迎各位看官給予建議和批評，明天我會寫一篇關(guān)于《局域網(wǎng)內(nèi)訪問他人電腦上的自制網(wǎng)頁》的文章，感興趣的童鞋可以關(guān)注一波~感謝大家~

為一個前端工程師，我們平常都會有自己所喜愛、習(xí)慣的開發(fā)工具。像水猿，比較常用的前端開發(fā)工具也就是sublime text和webstorm。接觸到brackets也是一次偶然，發(fā)現(xiàn)這個工具風(fēng)格很符合我的胃口，相對webstorm的簡介、美觀，可以時事瀏覽。

Brackets作為Adobe 的一個開源項目，該項目專注于前端開發(fā)，它的插件和代碼提示都是相當強悍的，尤其是實時瀏覽，這更加是前端開發(fā)人員的最愛。通過cmd+E快速預(yù)覽，就能在HTML文檔中直接查看和修改關(guān)聯(lián)的CSS或者在JS文檔中查看和修改方法，這是sublime無法比擬的（而相對于DW的預(yù)覽功能就不做評價，從大學(xué)畢業(yè)以后，我也沒再用dw來開發(fā)過前端）。對于不使用sublime綠色版的用戶，這種免費的開源工具，也是很有吸引力的。

不過相似于webstorm，都因為集成了很多插件，當項目過大，硬件配置沒有更新的情況，不適合做大量頁面開發(fā)。

在線咨詢

上一篇：HTML創(chuàng)建用戶反饋表單
下一篇：解決JADE軟件注冊文件缺失的軟件推薦

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。