前端学习笔记之页面制作（二）——开发环境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的博客，简直不忍直视=_= : 年少时犯过的二