前端学习笔记之页面制作（二）——开发环境Sublime Text2（持续更新）

摘要

sublime text2 已经用过很久了，合理利用这款编辑器还是能够很好地提高开发效率的，这里总结一下使用心得以及一些资源链接。

快捷键（常用）

Go to anything(

Ctrl + P

)

直接输入模糊匹配的内容，能定位并打开相应文件；

:

+行数： 定位到具体的一行（

Ctrl+G

）

@

+符号（js函数名，css类名）：定位到某一个符号处(

Ctrl+R

)

#

+关键字：定位到关键字(

Ctrl+;

)

命令面板（

Ctrl+Shift+P

）：搜索并模糊匹配相关命令，免去寻找功能的麻烦

多行选择

先选中一个字符串，然后

Ctrl+D

即可依次向下选择相同的内容，可以同时对这些内容编辑

Ctrl+D

过程中可以通过(

Ctrl+K

)来跳过某一项继续下一项

ALt+F3

，选中所有要被

Ctrl+D

的内容

Ctrl+Shift+L

:选中一个段落，再按此快捷键将在每一行最后添加输入符，使用户可以多行编辑

其他

Ctrl+[

: 左缩进一格，（可以选择多行一起缩进）

Ctrl+]

: 右缩进一格

Ctrl+/

: 注释所在行或者注释所选内容

Ctrl+Enter

: 在本行下新建一行输入

Ctrl+Shift+Enter

: 在本行上新建一行输入

插件

安装Package Control（安装差插件的工具）

使用快捷键

Ctrl+`

进入sublime text命令行，输入下面代码，重启软件即可使用

使用：

Ctrl+Shift+P

打开命令面板，输入

pcip

即可模糊匹配到

Package Control： Install Package

命令，即可通过模糊匹配搜索插件来开始安装插件了

import urllib2,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.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()) ); by = urllib2.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

emmet：提高前端工程师开发效率必备利器

使用最多的插件，写html的速度真的会快很多

笔者bb：emmet可以通过缩写代码来生成html内容，可以快速生成大段HTML文档并再也不用被标签所困扰

使用方法：输入缩写代码，使用快捷键

Tab

或

Ctrl+E

即可生成html内容

推荐资源：

Emmet：HTML/CSS代码快速编写神器: 覆盖面更广，内容更精炼，更加实用，还有动态示例，很清晰

Emmet使用手册：主要针对HTML，很详细，可以作为参考手册使用

使用技巧：Tricks的集合

官网：没使用过，按惯例推荐一下

Tricks：

缩写代码：

!

，可以直接生成一个基本的Html5页面框架;

没指定标签时默认是

div

;

DocBlockr

笔者bb: 一个为函数或变量添加格式标准的注释的插件，并没有很多功能，但很精致，标准化的注释让代码逼格提升不少

使用：再要添加注释的内容前一行输入

/**

然后回车或者

Tab

，即可得到格式化的注释

官网：详细的使用方法和注释

Terminal

用sublime text在当前文件夹中打开命令行

使用：右键侧边栏要打开命令行的文件夹，选择相应选项

未完待续。。。

Snippets：代码片段

笔者bb：之前一直都不知道这种东西，看了视频教程算是长见识了，snippets就是用来存储那些会被重复使用的代码片段的，用来省去一直复制粘贴的麻烦

使用教程

之前的折腾：

Ubuntu下Sublime安装以及中文乱码的解决

别人整理的插件和快捷键：

Sublime常用插件设置

Sublime快捷键和插件安装

Mac豪的游戏:资源丰富，覆盖面广，值得一看

最后贴一下以前写过的一篇关于sublime的博客，简直不忍直视=_= : 年少时犯过的二