原文出處：?jingwhale???歡迎分享原創(chuàng)到伯樂頭條

開發(fā)工具介紹

開發(fā)工具一般分為兩種類型：文本編輯器和集成開發(fā)環(huán)境（IDE）

常用的文本編輯器：Sublime Text、Notepad++、EditPlus等

常用的IDE：WebStorm、Intellij IDEA、Eclipce等

我們這里主要介紹如何使用Sublime Text編輯器，它基本滿足我們對前端開發(fā)工具的需求。

一、Sublime Text的特點：

跨平臺、啟動快

多行選擇

各種實用插件

Snippets

支持VIM兼容模式

Sublime Text獲取地址：http://www.sublimetext.com/

二、常用的插件

Package Control：安裝其他插件之前，首先先安裝Package Control

Emmet：Web開發(fā)者的工具包，可以大大提高你的HTML和CSS的工作流程

SublimeCodeIntel：代碼提示

DocBlocker：對js代碼進行注釋

JSFormat：格式化js代碼

Terminal：使用vim命令

2.1 Package Control

安裝其他插件之前，首先先安裝Package Control，具體步驟如下：

使用Ctrl+`快捷鍵或者通過View->Show Console菜單打開命令行,

Sublime text3粘貼如下代碼:

1

import 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粘貼如下代碼:

1

import 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')

如果順利的話,此時就可以在Preferences菜單下看到Package Settings和Package Control兩個菜單了。

可能由于各種原因，無法使用代碼安裝，那可以通過以下步驟手動安裝Package Control：

a.Package Control下載地址：
b.點擊Preferences>BrowsePackages菜單
c.進入打開的目錄的上層目錄，然后再進入Installed Packages/目錄
d.下載Package Control.sublime-package并復(fù)制到Installed Packages/目錄
e.重啟SublimeText。

2.2 Emmet

Emmet是一個Web開發(fā)者的工具包，可以大大提高你的HTML和CSS的工作流程。

基本上，大多數(shù)的文本編輯器都會允許你存儲和重用一些代碼塊，我們稱之為“片段”。雖然片段能很好地推動你得生產(chǎn)力，但大多數(shù)的實現(xiàn)都有這樣一個缺點：你必須先定義你得代碼片段，并且不能再運行時進行拓展。Emmet把片段這個概念提高到了一個新的層次：你可以設(shè)置CSS形式的能夠動態(tài)被解析的表達式，然后根據(jù)你所輸入的縮寫來得到相應(yīng)的內(nèi)容。Emmet是很成熟的并且非常適用于編寫HTML/XML 和 CSS 代碼的前端開發(fā)人員，但也可以用于編程語言。

2.2.1 安裝Emmet

a、通過快捷鍵組合ctrl+shift+P喚出命令面板
b、在面板中輸入“install package”后回車
c、接著輸入“Emmet”，等待安裝完成。

2.2.2 使用Emmet 1) html初始化

輸入“!”或“html:5”，然后按Tab鍵：

html:5 或!：用于HTML5文檔類型
html:xt：用于XHTML過渡文檔類型
html:4s：用于HTML4嚴格文檔類型

2) head標簽內(nèi)操作

引入外部樣式表：link:css+tab

1

引入內(nèi)部樣式表：style+tab

1

引入外部js文件：script:src+tab

1

引入內(nèi)部js文件：script+tab

1

<script></script>

添加網(wǎng)站圖標：link:favicon+tab

1

設(shè)置字符編碼：meta:utf+tab

1

設(shè)置兼容模式meta:compat+tab

1

演示如下：

3)? body體內(nèi)容編輯

●標簽：標簽名（+tab）

●id：標簽名#+類名稱（+tab），可以跟多個類

類：標簽名.+id名稱（+tab），僅可以跟一個id

只輸入.item，則Emmet會根據(jù)父標簽進行判定，一般為div。比如在

中輸入.item，就會生成
• 。

  下面是所有的隱式標簽名稱：

  li：用于ul和ol中
  tr：用于table、tbody、thead和tfoot中
  td：用于tr中
  option：用于select和optgroup中

  ●標簽的內(nèi)容：標簽名{內(nèi)容}

  標簽內(nèi)的屬性：標簽名[屬性名=屬性值]，如：a[href=www.baidu.com]

  補充：

  表單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

  ●嵌套

  >：子元素符號，表示嵌套的元素
  +：同級標簽符號
  ^：可以使該符號前的標簽提升一行

  ●分組（）
  可以通過嵌套和括號來快速生成一些代碼塊，比如輸入(.foo>h1)+(.bar>h2)，會自動生成如下代碼：

  ●定義多個元素*
  要定義多個元素，可以使用*符號。比如，ul>li*3可以生成如下代碼

  ●計數(shù)器 $
  在我們做”輪播“時，給元素的命名（id或者class），都會有一個計數(shù)位，這個時候，我們就可以使用 $ 它來實現(xiàn)了，如下：

  可以合理組合各種操作來寫出復(fù)雜樣式的代碼塊。

  2.2.3 CSS縮寫 1).? 值

  比如要定義元素的寬度，只需輸入w100，即可生成

  1

  width : 100px ;

  
  除了px，也可以生成其他單位，比如輸入h10p+m5e，結(jié)果如下

  1

  2

  height : 10% ;?

  margin : 5em ;

  單位別名列表：?p?表示%、e?表示 em、x?表示 ex

  2).? 附加屬性

  @f+

  3).? 模糊匹配

  如果有些縮寫你拿不準，Emmet會根據(jù)你的輸入內(nèi)容匹配最接近的語法，比如輸入ov:h、ov-h、ovh和oh，生成的代碼是相同的：

  1

  overflow : hidden ;

  4).? 供應(yīng)商前綴

  如果輸入非W3C標準的CSS屬性，Emmet會自動加上供應(yīng)商前綴，比如輸入trf，則會生成：

  1

  2

  3

  4

  5

  -webkit-transform: ;?

  -moz-transform: ;?

  -ms-transform: ;?

  -o-transform: ;?

  transform: ;

  如果不希望加上所有前綴，可以使用縮寫來指定，比如-wm-trf表示只加上-webkit和-moz前綴：

  前綴縮寫如下：w?表示 -webkit-、m?表示 -moz-、?s?表示 -ms-、o?表示 -o-

  5).? 漸變

  輸入lg(left, #fff 50%, #000)，會生成如下代碼：

  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è)置文件的語境：按Ctrl+Shift+p調(diào)出命令板，鍵入sshtml設(shè)置html語境sshtml，鍵入sscss設(shè)置css語境，鍵入ssjs設(shè)置js語境，這樣進行所在語境的代碼高亮和提示。

  2）、查找（Ctrl+p）

  :查找行數(shù)，如：:300，查找300行

  @? 定位js里的函數(shù)、css里的選擇器，如：@show，定位js文件中的show方法

  #查找關(guān)鍵字，如：#this，查找this

  3）、將光標移動到img或background-image標簽上，按下ctrl+u，Emmet會自動讀取圖片的尺寸并添加。 4）、多行選擇

  選中一個關(guān)鍵字，按Ctrl+d，可以選擇多個相同的關(guān)鍵字（每按一次，增加一個）。

  5）、編輯點快捷鍵分別為ctrl+alt+left、ctrl+alt+right。 6）、快速的移除多余的匹配的開始標簽與閉合標簽，快捷鍵：ctrl+k。

  在一些大型的HTML代碼中，有時標簽嵌套的太多，通過Emmet移除標簽這一功能。

  7）、數(shù)字遞增/遞減，可以以0.1、1和10三個值進行遞增/遞減

  快捷鍵分別是：alt+up/down、ctrl+up/down、和alt+shift+up/down。

  8）、上下移動移動代碼位置，ctrl+shift+alt+up/down 9）、數(shù)學計算表達式

  有了Emmet在HTML和CSS文件中都可以進行簡單的數(shù)字運算，神奇了，輸入4*8再按ctrl+shift+y，Emmet能給出最終的結(jié)果。

  2.4 DocBlocker

  安裝

  a、通過快捷鍵組合ctrl+shift+P喚出命令面板
  b、在面板中輸入“install package”后回車
  c、接著輸入“DocBlocker”，等待安裝完成

  使用

  在要注釋函數(shù)的上方，按‘/**’+tab鍵對代碼進行注釋。

  2.5 SublimeCodeIntel

  SublimeCodeIntel是一個非常強大的代碼提示插件。

  a、通過快捷鍵組合ctrl+shift+P喚出命令面板
  b、在面板中輸入“install package”后回車
  c、接著輸入“SublimeCodeIntel”，等待安裝完成。

  2.6 JSFormat

  安裝

  a、首先通過以下路徑打開用戶按鍵綁定文件：
  Preferences → Key Bindings ? User
  b、然后在其中添加以下代碼（如果你有需要的話，其中的快捷鍵組合是可以自己定義的）：
  {“keys”: ["ctrl+shift+r"], “command”: “reindent” , “args”: {“single_line”: false}}

  c、安裝JSFormat
  ●通過快捷鍵組合ctrl+shift+P喚出命令面板
  ●在面板中輸入“install package”后回車
  ●接著輸入“format”（即格式化的意思），在彈出的列表中找到對應(yīng)你所想要進行格式化操作的語言，這里我們是對js格式化，選擇JSFormat，等待安裝完成。

  使用

  選中沒有格式化的代碼，按‘Ctrl+Shift+r’對代碼進行格式化。

  2.7 Terminal

  安裝

  a、通過快捷鍵組合ctrl+shift+P喚出命令面板
  b、在面板中輸入“install package”后回車
  c、接著輸入“Terminal”，等待安裝完成。

  使用

  任意處按esc鍵進入vim命令狀態(tài)，可以使用vim命令。退出，按a。

  三、snippet

  Snippet 是插入到文本中的智能模板并使這段文本適當當前代碼環(huán)境。程序員總是會不斷的重寫一些簡單的代碼片段，這種工作乏味無聊，而Snippet的出現(xiàn)會讓Code更加高效。

  Snippet可以存儲在任何的文件夾中，Snippet文件是以.sublime-snippet為擴展的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}.

  ]]>

  ????

  ????

  ????

  ????

  為了方便理解簡化以上代碼:

  1

  2

  3

  4

  5

  6

  7

  8

  9

  ????

  ????

  ???? hello

  ????

  ???? source.python

  ????

  ???? My Fancy Snippet

  簡要介紹一下snippet四個組成部分:

  content:其中必須包含,否則無法工作, Type your snippet here用來寫你自己的代碼片段
  tabTrigger:用來引發(fā)代碼片段的字符或者字符串, 比如在以上例子上, 在編輯窗口輸入hello然后按下tab就會在編輯器輸出Type your snippet here這段代碼片段
  scope: 表示你的代碼片段會在那種語言環(huán)境下激活, 比如上面代碼定義了source.python, 意思是這段代碼片段會在python語言環(huán)境下激活.
  description :展示代碼片段的描述, 如果不寫的話, 默認使用代碼片段的文件名作為描述

  常用的scope（語言類source，標簽類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 world!

  ]]>

  ????

  ???? hello

  ????

  ???? text.html

  3.3 在html里輸入hello，按回車，顯示如下：

  1

  hello world! div >

  四、 [F5] Web開發(fā)免刷新（保存即刷新）

  [F5]是支持所有編輯器和瀏覽器的網(wǎng)頁開發(fā)免刷工具，讓你在保存代碼的同時，自動刷新頁面。

  獲取地址：http://getf5.com/

  4.1 解壓，打開f5.exe，自動打開默認瀏覽器

  4.2 新建項目文件夾，將項目文件夾路徑拷貝至添加項目列表框，點擊添加

  4.3 將項目文件夾拖至sublime中，新建項目所需文件，并刷新瀏覽器

  點擊進入要編輯的html頁面。

  4.4 盡情的在sublime里編輯html、css代碼，保存（ctrl+s），頁面會自動刷新。

  更多可以閱讀：

  http://www.w3cplus.com/tools/emmet-cheat-sheet.html

  http://www.douban.com/note/299431022/