常用的文本編輯器：Sublime Text寄猩、Notepad++观谦、EditPlus等
常用的IDE：WebStorm、Intellij IDEA蛙吏、Eclipce等
我們這里主要介紹如何使用Sublime Text編輯器作谭，它基本滿足我們對(duì)前端開發(fā)工具的需求稽物。
一、Sublime Text的特點(diǎn)：
跨平臺(tái)折欠、啟動(dòng)快
多行選擇
各種實(shí)用插件
Snippets
支持VIM兼容模式
Sublime Text獲取地址：http://www.sublimetext.com/
二贝或、常用的插件
Package Control：安裝其他插件之前吼过，首先先安裝Package Control
Emment：Web開發(fā)者的工具包，可以大大提高你的HTML和CSS的工作流程
SublimeCodeIntel：代碼提示
DocBlocker：對(duì)js代碼進(jìn)行注釋
JSFormat：格式化js代碼
Terminal：使用vim命令
2.1 Package Control
安裝其他插件之前咪奖，首先先安裝Package Control盗忱，具體步驟如下：
使用Ctrl+`快捷鍵或者通過(guò)View->Show Console菜單打開命令行,
Sublime text3粘貼如下代碼:
1import
urllib.request,os; pf = 'PackageControl.sublime-package'; ipp =
sublime.installed_packages_path();urllib.request.install_opener(
urllib.request.build_opener(urllib.request.ProxyHandler()) );
open(os.path.join(ipp, pf),'wb').write(urllib.request.urlopen(
'http://sublime.wbond.net/' + pf.replace('','%20')).read())
Sublime text2粘貼如下代碼:
1import
urllib2,os; pf='PackageControl.sublime-package'; ipp =
sublime.installed_packages_path(); os.makedirs(ipp ) if not
os.path.exists(ipp) else None;
urllib2.install_opener(urllib2.build_opener( urllib2.ProxyHandler( )));
open( os.path.join( ipp, pf),'wb' ).write( urllib2.urlopen(
'http://sublime.wbond.net/' +pf.replace( '','%20' )).read()); print(
'Please restart Sublime Text to finishinstallation')
如果順利的話,此時(shí)就可以在Preferences菜單下看到Package Settings和Package Control兩個(gè)菜單了。
可能由于各種原因赡艰，無(wú)法使用代碼安裝售淡，那可以通過(guò)以下步驟手動(dòng)安裝Package Control：
a.Package Control下載地址：http://files.cnblogs.com/files/jingwhale/PackageControl.zip
b.點(diǎn)擊Preferences>BrowsePackages菜單
c.進(jìn)入打開的目錄的上層目錄，然后再進(jìn)入Installed Packages/目錄
d.下載Package Control.sublime-package并復(fù)制到Installed Packages/目錄
e.重啟SublimeText慷垮。
2.2 Emment
Emment是一個(gè)Web開發(fā)者的工具包，可以大大提高你的HTML和CSS的工作流程揍堕。
基本上料身，大多數(shù)的文本編輯器都會(huì)允許你存儲(chǔ)和重用一些代碼塊，我們稱之為“片段”衩茸。雖然片段能很好地推動(dòng)你得生產(chǎn)力芹血，但大多數(shù)的實(shí)現(xiàn)都有這樣一個(gè)缺點(diǎn)：你必須先定義你得代碼片段，并且不能再運(yùn)行時(shí)進(jìn)行拓展楞慈。Emmet把片段這個(gè)概念提高到了一個(gè)新的層次：你可以設(shè)置CSS形式的能夠動(dòng)態(tài)被解析的表達(dá)式幔烛，然后根據(jù)你所輸入的縮寫來(lái)得到相應(yīng)的內(nèi)容。Emmet是很成熟的并且非常適用于編寫HTML/XML
和 CSS 代碼的前端開發(fā)人員囊蓝，但也可以用于編程語(yǔ)言饿悬。
2.2.1 安裝Emment
a、通過(guò)快捷鍵組合ctrl+shift+P喚出命令面板
b聚霜、在面板中輸入“install package”后回車
c狡恬、接著輸入“Emment”，等待安裝完成蝎宇。
2.2.2 使用Emment
1) html初始化
輸入“!”或“html:5”弟劲，然后按Tab鍵：
html:5 或!：用于HTML5文檔類型
html:xt：用于XHTML過(guò)渡文檔類型
html:4s：用于HTML4嚴(yán)格文檔類型
2) head標(biāo)簽內(nèi)操作
引入外部樣式表：link:css+tab
1
引入內(nèi)部樣式表：style+tab
1
引入外部js文件：script:src+tab
1
引入內(nèi)部js文件：script+tab
1
添加網(wǎng)站圖標(biāo)：link:favicon+tab
1
設(shè)置字符編碼：meta:utf+tab
1
設(shè)置兼容模式meta:compat+tab
1
演示如下：
3)? body體內(nèi)容編輯
●標(biāo)簽：標(biāo)簽名（+tab）
●id：標(biāo)簽名#+類名稱（+tab），可以跟多個(gè)類
類：標(biāo)簽名.+id名稱（+tab）姥芥，僅可以跟一個(gè)id
只輸入.item兔乞，則Emmet會(huì)根據(jù)父標(biāo)簽進(jìn)行判定，一般為div凉唐。比如在
- 中輸入.item庸追，就會(huì)生成
- 。
下面是所有的隱式標(biāo)簽名稱：
li：用于ul和ol中
tr：用于table熊榛、tbody锚国、thead和tfoot中
td：用于tr中
option：用于select和optgroup中
●標(biāo)簽的內(nèi)容：標(biāo)簽名{內(nèi)容}
標(biāo)簽內(nèi)的屬性：標(biāo)簽名[屬性名=屬性值]，如：a[href=www.baidu.com]
補(bǔ)充：
表單method屬性
form:post（get）
input屬性添加縮寫（部分）
input->inp
input:hidden->input:h
input:text->input:t
input:password->input:p
input:checkbox->input:c
input:radio->input:r
input:submit->input:s
input:button->input:b
●嵌套
>：子元素符號(hào)玄坦，表示嵌套的元素
+：同級(jí)標(biāo)簽符號(hào)
^：可以使該符號(hào)前的標(biāo)簽提升一行
●分組（）
可以通過(guò)嵌套和括號(hào)來(lái)快速生成一些代碼塊血筑，比如輸入(.foo>h1)+(.bar>h2)绘沉，會(huì)自動(dòng)生成如下代碼：
●定義多個(gè)元素*
要定義多個(gè)元素，可以使用*符號(hào)豺总。比如车伞，ul>li*3可以生成如下代碼
●計(jì)數(shù)器 $
在我們做”輪播“時(shí)，給元素的命名（id或者class）喻喳，都會(huì)有一個(gè)計(jì)數(shù)位另玖，這個(gè)時(shí)候，我們就可以使用 $ 它來(lái)實(shí)現(xiàn)了表伦，如下：
可以合理組合各種操作來(lái)寫出復(fù)雜樣式的代碼塊谦去。
2.2.3 CSS縮寫
1).? 值
比如要定義元素的寬度，只需輸入w100蹦哼，即可生成
1width: 100px;
除了px鳄哭，也可以生成其他單位，比如輸入h10p+m5e纲熏，結(jié)果如下
1
2
height: 10%;?
margin: 5em;
單位別名列表：?p?表示%妆丘、e?表示 em、x?表示 ex
2).? 附加屬性
@f+
3).? 模糊匹配
如果有些縮寫你拿不準(zhǔn)局劲，Emmet會(huì)根據(jù)你的輸入內(nèi)容匹配最接近的語(yǔ)法勺拣，比如輸入ov:h、ov-h鱼填、ovh和oh药有，生成的代碼是相同的：
1overflow: hidden;
4).? 供應(yīng)商前綴
如果輸入非W3C標(biāo)準(zhǔn)的CSS屬性，Emmet會(huì)自動(dòng)加上供應(yīng)商前綴剔氏，比如輸入trf塑猖，則會(huì)生成：
1
2
3
4
5
-webkit-transform: ;?
-moz-transform: ;?
-ms-transform: ;?
-o-transform: ;?
transform: ;
如果不希望加上所有前綴，可以使用縮寫來(lái)指定谈跛，比如-wm-trf表示只加上-webkit和-moz前綴：
前綴縮寫如下：w?表示 -webkit-羊苟、m?表示 -moz-、?s?表示 -ms-感憾、o?表示 -o-
5).? 漸變
輸入lg(left, #fff 50%, #000)蜡励，會(huì)生成如下代碼：
1
2
3
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(to right, #fff 50%, #000);
2.3、常用的快捷鍵
1）阻桅、命令板（Ctrl+Shift+p）
常用凉倚，新建文件時(shí)（為對(duì)文件進(jìn)行保存），設(shè)置文件的語(yǔ)境：按Ctrl+Shift+p調(diào)出命令板嫂沉，鍵入sshtml設(shè)置html語(yǔ)境sshtml稽寒，鍵入sscss設(shè)置css語(yǔ)境，鍵入ssjs設(shè)置js語(yǔ)境趟章，這樣進(jìn)行所在語(yǔ)境的代碼高亮和提示杏糙。
2）慎王、查找（Ctrl+p）
:查找行數(shù)，如：:300宏侍，查找300行
@? 定位js里的函數(shù)赖淤、css里的選擇器，如：@show谅河，定位js文件中的show方法
#查找關(guān)鍵字咱旱，如：#this，查找this
3）绷耍、將光標(biāo)移動(dòng)到img或background-image標(biāo)簽上吐限，按下ctrl+u，Emmet會(huì)自動(dòng)讀取圖片的尺寸并添加褂始。
4）毯盈、多行選擇
選中一個(gè)關(guān)鍵字，按Ctrl+d病袄，可以選擇多個(gè)相同的關(guān)鍵字（每按一次，增加一個(gè)）赘阀。
5）益缠、編輯點(diǎn)快捷鍵分別為ctrl+alt+left、ctrl+alt+right基公。
6）幅慌、快速的移除多余的匹配的開始標(biāo)簽與閉合標(biāo)簽，快捷鍵：ctrl+k轰豆。
在一些大型的HTML代碼中胰伍，有時(shí)標(biāo)簽嵌套的太多，通過(guò)Emmet移除標(biāo)簽這一功能酸休。
7）骂租、數(shù)字遞增/遞減，可以以0.1斑司、1和10三個(gè)值進(jìn)行遞增/遞減
快捷鍵分別是：alt+up/down渗饮、ctrl+up/down、和alt+shift+up/down宿刮。
8）互站、上下移動(dòng)移動(dòng)代碼位置，ctrl+shift+alt+up/down
9）僵缺、數(shù)學(xué)計(jì)算表達(dá)式
有了Emmet在HTML和CSS文件中都可以進(jìn)行簡(jiǎn)單的數(shù)字運(yùn)算胡桃，神奇了，輸入4*8再按ctrl+shift+y磕潮，Emmet能給出最終的結(jié)果翠胰。
2.4 DocBlocker
安裝
a容贝、通過(guò)快捷鍵組合ctrl+shift+P喚出命令面板
b、在面板中輸入“install package”后回車
c亡容、接著輸入“DocBlocker”嗤疯，等待安裝完成
使用
在要注釋函數(shù)的上方，按‘/**’+tab鍵對(duì)代碼進(jìn)行注釋闺兢。
2.5 SublimeCodeIntel
SublimeCodeIntel是一個(gè)非常強(qiáng)大的代碼提示插件茂缚。
a、通過(guò)快捷鍵組合ctrl+shift+P喚出命令面板
b屋谭、在面板中輸入“install package”后回車
c脚囊、接著輸入“SublimeCodeIntel”，等待安裝完成桐磁。
2.6 JSFormat
安裝
a悔耘、首先通過(guò)以下路徑打開用戶按鍵綁定文件：
Preferences → Key Bindings – User
b、然后在其中添加以下代碼（如果你有需要的話我擂，其中的快捷鍵組合是可以自己定義的）：
{“keys”: ["ctrl+shift+r"], “command”: “reindent” , “args”: {“single_line”: false}}
c衬以、安裝JSFormat
●通過(guò)快捷鍵組合ctrl+shift+P喚出命令面板
●在面板中輸入“install package”后回車
●接著輸入“format”（即格式化的意思），在彈出的列表中找到對(duì)應(yīng)你所想要進(jìn)行格式化操作的語(yǔ)言校摩，這里我們是對(duì)js格式化看峻，選擇JSFormat，等待安裝完成衙吩。
使用
選中沒(méi)有格式化的代碼互妓，按‘Ctrl+Shift+r’對(duì)代碼進(jìn)行格式化。
2.7 Terminal
安裝
a坤塞、通過(guò)快捷鍵組合ctrl+shift+P喚出命令面板
b冯勉、在面板中輸入“install package”后回車
c、接著輸入“Terminal”摹芙，等待安裝完成灼狰。
使用
任意處按esc鍵進(jìn)入vim命令狀態(tài)，可以使用vim命令瘫辩。退出伏嗜，按a。
三伐厌、snippet
Snippet 是插入到文本中的智能模板并使這段文本適當(dāng)當(dāng)前代碼環(huán)境承绸。程序員總是會(huì)不斷的重寫一些簡(jiǎn)單的代碼片段，這種工作乏味無(wú)聊挣轨，而Snippet的出現(xiàn)會(huì)讓Code更加高效军熏。
Snippet可以存儲(chǔ)在任何的文件夾中，Snippet文件是以.sublime-snippet為擴(kuò)展的XML文件卷扮，可以命名為XXX.sublime-snippet荡澎，創(chuàng)建自己的snippet的方式為菜單欄Tools->New Snippet均践。
3.1 新建的文件如下：
1
2
3
4
5
6
7
8
9
????
Hello, ${1:this} is a ${2:snippet}.
]]>
為了方便理解簡(jiǎn)化以上代碼:
1
2
3
4
5
6
7
8
9
????
????hello
????source.python
????My Fancy Snippet
簡(jiǎn)要介紹一下snippet四個(gè)組成部分:
content:其中必須包含,否則無(wú)法工作, Type your snippet here用來(lái)寫你自己的代碼片段
tabTrigger:用來(lái)引發(fā)代碼片段的字符或者字符串, 比如在以上例子上, 在編輯窗口輸入hello然后按下tab就會(huì)在編輯器輸出Type your snippet here這段代碼片段
scope: 表示你的代碼片段會(huì)在那種語(yǔ)言環(huán)境下激活, 比如上面代碼定義了source.python, 意思是這段代碼片段會(huì)在python語(yǔ)言環(huán)境下激活.
description :展示代碼片段的描述, 如果不寫的話, 默認(rèn)使用代碼片段的文件名作為描述
常用的scope（語(yǔ)言類source，標(biāo)簽類text）：
HTML:?text.html
CSS:?source.css
Javascript:?source.js
JSON:?source.json
SASS:?source.sass
XML:?text.xml
Markdown:?text.html.markdown
Ruby:?source.ruby
PHP:?source.php
Latex:?text.tex.latex
Java:?source.java
JSP:?text.html.jsp
3.2 修改新建的文件如下：
1
2
3
4
5
6
7
8
9
????
]]>
????hello
????text.html
3.3 在html里輸入hello摩幔，按回車彤委，顯示如下：
1
四、 [F5] Web開發(fā)免刷新（保存即刷新）
[F5]是支持所有編輯器和瀏覽器的網(wǎng)頁(yè)開發(fā)免刷工具或衡，讓你在保存代碼的同時(shí)焦影，自動(dòng)刷新頁(yè)面。
獲取地址：http://getf5.com/
4.1 解壓封断，打開f5.exe斯辰，自動(dòng)打開默認(rèn)瀏覽器
4.2 新建項(xiàng)目文件夾，將項(xiàng)目文件夾路徑拷貝至添加項(xiàng)目列表框坡疼，點(diǎn)擊添加
4.3 將項(xiàng)目文件夾拖至sublime中彬呻，新建項(xiàng)目所需文件，并刷新瀏覽器
點(diǎn)擊進(jìn)入要編輯的html頁(yè)面柄瑰。
4.4 盡情的在sublime里編輯html闸氮、css代碼，保存（ctrl+s）教沾，頁(yè)面會(huì)自動(dòng)刷新湖苞。
