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

rackets介紹

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

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

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

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

Brackets使用

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

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

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

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

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

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

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

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

它僅適用于Chrome瀏覽器為目標(biāo)瀏覽器，你必須安裝Chrome。

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

只能同時(shí)對一個(gè)HTML文件進(jìn)行預(yù)覽 – 如果切換另一個(gè)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 打開即時(shí)預(yù)覽功能

Ctrl/Cmd + / 行注釋

Ctrl/Cmd + Alt + / 塊注釋

不足：不支持代碼折疊。

Brackets插件推薦

1.代碼格式化插件：Beautify

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

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

2.HTML代碼編輯：Emmet

最強(qiáng)大的HTML和CSS快速編輯插件

3.CSS和JS壓縮插件：Minify

很強(qiáng)大的插件，集成了CSS和JS的壓縮，會(huì)在同個(gè)目錄下自動(dòng)生成*.min.*格式的文件。

4.css3代碼自動(dòng)補(bǔ)全插件：auto prefix

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

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

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

默認(rèn)不支持代碼的可折疊功能。通過此擴(kuò)展的安裝，對代碼添加可折疊功能。

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

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

7.Brackets主題：theme

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

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

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

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

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

編寫工具：

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

對于初學(xué)者來說，記事本絕對是最好的編寫工具，因?yàn)樗械拇a都要自己一個(gè)一個(gè)寫，沒有其他編寫工具的快捷鍵提示。

編寫方法：

新建文件：

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

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

網(wǎng)頁的標(biāo)題：

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

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

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

效果圖：

修飾：

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

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

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

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

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

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

換行：<br>

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

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

移動(dòng)字體：<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)注~贊~評論~有任何錯(cuò)誤或是問題都說出來哦

~~~</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>

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

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

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

不過相似于webstorm，都因?yàn)榧闪撕芏嗖寮?dāng)項(xiàng)目過大，硬件配置沒有更新的情況，不適合做大量頁面開發(fā)。

在線咨詢

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

您的項(xiàng)目需求

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