頁面製做之開發工具

頁面製做之開發工具

轉載於http://www.cnblogs.com/jingwhale/p/4421021.html

網易雲課堂筆記

開發工具介紹

開發工具通常分爲兩種類型：文本編輯器和集成開發環境（IDE）

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

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

咱們這裏主要介紹如何使用Sublime Text編輯器，它基本知足咱們對前端開發工具的需求。

1、Sublime Text的特色：

跨平臺、啓動快

多行選擇

各類實用插件

Snippets

支持VIM兼容模式

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

2、經常使用的插件

Package Control：安裝其餘插件以前，首先先安裝Package Control

Emment：Web開發者的工具包，能夠大大提升你的HTML和CSS的工做流程

SublimeCodeIntel：代碼提示

DocBlocker：對js代碼進行註釋

JSFormat：格式化js代碼

Terminal：使用vim命令

2.1 Package Control

安裝其餘插件以前，首先先安裝Package Control，具體步驟以下：

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

Sublime text3粘貼以下代碼:

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

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下載地址：http://files.cnblogs.com/files/jingwhale/PackageControl.zip
b.點擊Preferences>BrowsePackages菜單
c.進入打開的目錄的上層目錄，而後再進入Installed Packages/目錄
d.下載Package Control.sublime-package並複製到Installed Packages/目錄
e.重啓SublimeText。

2.2 Emment

Emment是一個Web開發者的工具包，能夠大大提升你的HTML和CSS的工做流程。

基本上，大多數的文本編輯器都會容許你存儲和重用一些代碼塊，咱們稱之爲「片斷」。雖然片斷能很好地推進你得生產力，但大多數的實現都有這樣一個缺點：你必須先定義你得代碼片斷，而且不能再運行時進行拓展。Emmet把片斷這個概念提升到了一個新的層次：你能夠設置CSS形式的可以動態被解析的表達式，而後根據你所輸入的縮寫來獲得相應的內容。Emmet是很成熟的而且很是適用於編寫HTML/XML 和 CSS 代碼的前端開發人員，但也能夠用於編程語言。

2.2.1 安裝Emment

a、經過快捷鍵組合ctrl+shift+P喚出命令面板
b、在面板中輸入「install package」後回車
c、接着輸入「Emment」，等待安裝完成。

2.2.2 使用Emment

1) html初始化

輸入「!」或「html:5」，而後按Tab鍵：  

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

2) head標籤內操做

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

<link rel="stylesheet" href="style.css">

引入內部樣式表：style+tab

<style></style>

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

<script src=""></script>

引入內部js文件：script+tab

<script></script>

添加網站圖標：link:favicon+tab

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

設置字符編碼：meta:utf+tab

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

設置兼容模式meta:compat+tab

<meta http-equiv="X-UA-Compatible" content="IE=7">

演示以下：

3)  body體內容編輯

●標籤：標籤名（+tab）

●id：標籤名#+類名稱（+tab），能夠跟多個類

  類：標籤名.+id名稱（+tab），僅能夠跟一個id

只輸入.item，則Emmet會根據父標籤進行斷定，通常爲div。好比在<ul>中輸入.item，就會生成<li class="item"></li>。

下面是全部的隱式標籤名稱： 

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

●標籤的內容：標籤名{內容}

標籤內的屬性：標籤名[屬性名=屬性值]，如：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能夠生成以下代碼

●計數器 $
在咱們作」輪播「時，給元素的命名（id或者class），都會有一個計數位，這個時候，咱們就可使用 $ 它來實現了，以下：

能夠合理組合各類操做來寫出複雜樣式的代碼塊。

2.2.3 CSS縮寫

1).  值

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

width: 100px;

除了px，也能夠生成其餘單位，好比輸入h10p+m5e，結果以下

height: 10%;  
margin: 5em;

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

2).  附加屬性

@f+

3).  模糊匹配

若是有些縮寫你拿不許，Emmet會根據你的輸入內容匹配最接近的語法，好比輸入ov:h、ov-h、ovh和oh，生成的代碼是相同的：

overflow: hidden;

4).  供應商前綴

若是輸入非W3C標準的CSS屬性，Emmet會自動加上供應商前綴，好比輸入trf，則會生成：

-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)，會生成以下代碼：

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.三、經常使用的快捷鍵

1）、命令板（Ctrl+Shift+p）

經常使用，新建文件時（爲對文件進行保存），設置文件的語境：按Ctrl+Shift+p調出命令板，鍵入sshtml設置html語境sshtml，鍵入sscss設置css語境，鍵入ssjs設置js語境，這樣進行所在語境的代碼高亮和提示。

2）、查找（Ctrl+p）

: 查找行數，如：:300，查找300行

@  定位js裏的函數、css裏的選擇器，如：@show，定位js文件中的show方法

# 查找關鍵字，如：#this，查找this

3）、將光標移動到img或background-image標籤上，按下ctrl+u，Emmet會自動讀取圖片的尺寸並添加。

4）、多行選擇

選中一個關鍵字，按Ctrl+d，能夠選擇多個相同的關鍵字（每按一次，增長一個）。

5）、編輯點快捷鍵分別爲ctrl+alt+left、ctrl+alt+right。

6）、快速的移除多餘的匹配的開始標籤與閉合標籤，快捷鍵：ctrl+k。

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

7）、數字遞增/遞減，能夠以0.一、1和10三個值進行遞增/遞減

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

8）、上下移動移動代碼位置，ctrl+shift+alt+up/down

9）、數學計算表達式

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

2.4 DocBlocker

安裝

a、經過快捷鍵組合ctrl+shift+P喚出命令面板
b、在面板中輸入「install package」後回車
c、接着輸入「DocBlocker」，等待安裝完成 

使用

在要註釋函數的上方，按‘/**’+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」（即格式化的意思），在彈出的列表中找到對應你所想要進行格式化操做的語言，這裏咱們是對js格式化，選擇JSFormat，等待安裝完成。 

使用

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

2.7 Terminal

安裝

a、經過快捷鍵組合ctrl+shift+P喚出命令面板
b、在面板中輸入「install package」後回車
c、接着輸入「Terminal」，等待安裝完成。 

使用

任意處按esc鍵進入vim命令狀態，可使用vim命令。退出，按a。

3、snippet

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

Snippet能夠存儲在任何的文件夾中，Snippet文件是以.sublime-snippet爲擴展的XML文件，能夠命名爲XXX.sublime-snippet，建立本身的snippet的方式爲菜單欄Tools->New Snippet。

3.1 新建的文件以下：

<snippet>
    <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <!-- <tabTrigger>hello</tabTrigger> -->
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

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

<snippet>
    <content><![CDATA[Type your snippet here]]></content>
    <!-- Optional: Tab trigger to activate the snippet -->
    <tabTrigger>hello</tabTrigger>
    <!-- Optional: Scope the tab trigger will be active in -->
    <scope>source.python</scope>
    <!-- Optional: Description to show in the menu -->
    <description>My Fancy Snippet</description>
</snippet>

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

content:其中必須包含<![CDATA[…]]>,不然沒法工做, Type your snippet here用來寫你本身的代碼片斷
tabTrigger:用來引起代碼片斷的字符或者字符串, 好比在以上例子上, 在編輯窗口輸入hello而後按下tab就會在編輯器輸出Type your snippet here這段代碼片斷
scope: 表示你的代碼片斷會在那種語言環境下激活, 好比上面代碼定義了source.python, 意思是這段代碼片斷會在python語言環境下激活.
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 修改新建的文件以下：

<snippet>
    <content><![CDATA[
<div>hello world!</div>
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>hello</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>text.html</scope>
</snippet>

3.3 在html裏輸入hello，按回車，顯示以下：

<div>hello world!</div>

4、 [F5] Web開發免刷新（保存即刷新）

[F5]是支持全部編輯器和瀏覽器的網頁開發免刷工具，讓你在保存代碼的同時，自動刷新頁面。

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

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

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

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

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

盡情的在sublime裏編輯html、css代碼，並用F5實現保存（ctrl+s）頁面會自動刷新。

更多能夠閱讀：

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

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

轉載需註明轉載字樣，標註原做者和原博文地址。