开发工具介绍
开发工具一般分为两种类型：文本编辑器和集成开发环境（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
Emmet：Web开发者的工具包，可以大大提高你的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下载地址：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 Emmet
Emmet是一个Web开发者的工具包，可以大大提高你的HTML和CSS的工作流程。
基本上，大多数的文本编辑器都会允许你存储和重用一些代码块，我们称之为“片段”。虽然片段能很好地推动你得生产力，但大多数的实现都有这样一个缺点：你必须先定义你得代码片段，并且不能再运行时进行拓展。Emmet把片段这个概念提高到了一个新的层次：你可以设置CSS形式的能够动态被解析的表达式，然后根据你所输入的缩写来得到相应的内容。Emmet是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前端开发人员，但也可以用于编程语言。
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标签内操作
引入外部样式表：link:css+tab
|
1 |
<link rel="stylesheet" href="style.css"> |
引入内部样式表：style+tab
|
1 |
<style></style> |
引入外部js文件：script:src+tab
|
1 |
<script src=""></script> |
引入内部js文件：script+tab
|
1 |
<script></script> |
添加网站图标：link:favicon+tab
|
1 |
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> |
设置字符编码：meta:utf+tab
|
1 |
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"d++、EditPlus等
常用的IDE：WebStorm、Intellij IDEA、Eclipce等 我们这里主要介绍如何使用Sublime Text编辑器，它基本满足我们对前端开发工具的需求。 一、Sublime Text的特点：跨平台、启动快 多行选择 各种实用插件 Snippets 支持VIM兼容模式 Sublime Text获取地址：http://www.sublimetext.com/ 二、常用的插件Package Control：安装其他插件之前，首先先安装Package Control Emmet：Web开发者的工具包，可以大大提高你的HTML和CSS的工作流程 SublimeCodeIntel：代码提示 DocBlocker：对js代码进行注释 JSFormat：格式化js代码 Terminal：使用vim命令 2.1 Package Control安装其他插件之前，首先先安装Package Control，具体步骤如下： 使用Ctrl+`快捷键或者通过View->Show Console菜单打开命令行, Sublime text3粘贴如下代码:
Sublime text2粘贴如下代码:
如果顺利的话,此时就可以在Preferences菜单下看到Package Settings和Package Control两个菜单了。 可能由于各种原因，无法使用代码安装，那可以通过以下步骤手动安装Package Control： a.Package Control下载地址：http://files.cnblogs.com/files/jingwhale/PackageControl.zip 2.2 EmmetEmmet是一个Web开发者的工具包，可以大大提高你的HTML和CSS的工作流程。 基本上，大多数的文本编辑器都会允许你存储和重用一些代码块，我们称之为“片段”。虽然片段能很好地推动你得生产力，但大多数的实现都有这样一个缺点：你必须先定义你得代码片段，并且不能再运行时进行拓展。Emmet把片段这个概念提高到了一个新的层次：你可以设置CSS形式的能够动态被解析的表达式，然后根据你所输入的缩写来得到相应的内容。Emmet是很成熟的并且非常适用于编写HTML/XML 和 CSS 代码的前端开发人员，但也可以用于编程语言。
2.2.1 安装Emmeta、通过快捷键组合ctrl+shift+P唤出命令面板 2.2.2 使用Emmet1) html初始化输入“!”或“html:5”，然后按Tab键：
html:5 或!：用于HTML5文档类型 2) head标签内操作引入外部样式表：link:css+tab
引入内部样式表：style+tab
引入外部js文件：script:src+tab
引入内部js文件：script+tab
添加网站图标：link:favicon+tab
设置字符编码：meta:utf+tab
设置兼容模式meta:compat+tab |
