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

helics

于 2015-06-01 15:07:47 发布

阅读量367

点赞数

分类专栏：学习笔记 web前端 sublimetext 文章标签：开发环境 sublime 快捷键插件 web前端

本文链接：https://blog.csdn.net/helics/article/details/46311047

版权

学习笔记同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

web前端

2 篇文章 0 订阅

订阅专栏

sublimetext

1 篇文章 0 订阅

订阅专栏

摘要

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在当前文件夹中打开命令行
- 使用：右键侧边栏要打开命令行的文件夹，选择相应选项
未完待续。。。