前端技术-开发工具

页面制作之开发工具

开发工具介绍

开发工具一般分为两种类型：文本编辑器和集成开发环境（IDE）

常用的文本编辑器：Sublime Text、Notepad++、EditPlus等

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

我们这里主要介绍如何使用Sublime Text编辑器，它基本满足我们对前端开发工具的需求。

一、Sublime Text的特点：

跨平台、启动快

多行选择

各种实用插件

Snippets

支持VIM兼容模式

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

二、常用的插件

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.zipb.点击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->inpinput:hidden->input:hinput:text->input:tinput:passWord->input:pinput:checkbox->input:cinput:radio->input:rinput:submit->input:sinput: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-transfo