前端工具——编辑器之Sublime Text 2

欲先善其事,必先利其器,如题。在Sublime官网看了它的介绍后,发现不少感兴趣的亮点,于是下载下来安装,使用,觉得还不错,而且网上搜了下Sublime 的扩展也很多,很多人推荐使用。Sublime是用 JSON 格式作为主要的配置文件的,而且默认配置和用户配置也是分离的,这样能避免了升级后覆盖之前自己的设置,所以,决定放弃用了一年之久的Notepad++,改用比Notepad++年轻许多的Sublime

虽然在偶尔使用中会弹框,但是不影响使用Sublime。觉得Sublime解决了你很多问题,大可以去点击 “yes”并且资助作者,这样作者也会更有动力去完善Sublime。

Sublime Text 2界面

Sublime Text 2界面

当初在官网介绍首先觉得赞就是右边那块代码缩略图,不仅看起来很酷,而且它可以让你快速去到当前文档中的某处。

好了,下面我介绍Sublime Text 2 (官网下载) 这几天来对其各种编辑辅助功能,快捷键,插件的大致了解。以后还会持续更新。。。

Sublime Text 2 功能摘记

快如闪电的 Goto :

特色查找功能

  • Ctrl+R:跳转到函数,在html文件中跳到某ID的节点上 @
  • Ctrl+;:定位到某个词语 #
  • 按Ctrl + P:文件定位,只要找到文件, 按下Enter,该文件立刻会被打开。Ctrl + P在输入框内输入以上末尾字符都可以实现以上功能。

其他查找替换功能

  • Ctrl+F:查找内容
  • Ctrl+Shift+F:查找并替换,Sublime Text 2可以添加多个文件夹进行查找(add directory)
  • Ctrl+H:替换

项目文件夹浏览:

Sublime Text 2可以基于项目管理,侧边栏可以导入正在开发的项目文件夹,(ctrl+k,ctrl+b)快捷键可以开关侧栏(ps: 这里逗号分隔的两个快捷键代表按下ctrl的同时先按K再按B,关闭侧边栏也是如此操作)

多重选择(Multi-Selection):

  • Ctrl+L:选择整行,反复按可同时选中下一行;
  • Ctrl+Shift+L:同时编辑的行,首先得先选中这些行
  • Ctrl+D:可将全文中与光标当前所在位置的相同的词逐一选中;
  • Ctrl+K D:查找某个文本,继续查下一个则继续按D;
  • Alt+F3:即可一次性选择所有相同的词,;
  • 按住ctrl+鼠标左键:手动选择同时要编辑的多处文本

其他编辑功能

  • Ctrl+Shift+A :选择光标位置父标签对儿 ;
  • ALT+ Shift + W 标签包围选区;
  • Ctrl+J:将选中内容合并
  • Ctrl+M :光标移动至括号内开始或结束的位置;
  • Ctrl+Shift+M :选择括号内的内容(按住-继续选择父括号);
  • Ctrl+Shift+D:是直接复制当前行,
  • Ctrl+shift+space可以选择js等语言里的块{内容}
  • Ctrl+Shift+Enter:在当前行前插入新行
  • Ctrl+Enter:在当前行后插入新行
  • Alt+Shift+数字:分屏显示,alt+shift+2就是分两屏显示,用sass写css时使用
  • Alt+数字:切换打开第N个文件
  • Ctrl+K ,N:快速折叠文件内所有函数,(N数字表示级别)
  • Ctrl+K, T:折叠属性 (编辑 HTML 模板最有用)
  • Ctrl+K, J:打开所有折叠的内容
  • Ctrl+Shift+T:重新打开刚刚关闭的标签页,反复按则打开更早的
  • Ctrl+KK:从光标处删除至行尾;Ctrl+Shift+K :删除整行
  • Ctrl+↑/↓可以一行一行的滚动屏幕,pageUp pageDown一页一页翻动
  • Ctrl+Shift+↑:与上行互换,Ctrl+Shift+↓:与下行互换
  • Ctrl+KK:从光标处删除至行尾;Ctrl+Shift+K :删除整行
  • Ctrl+KU :改为大写Ctrl+KL :改为小写
  • Alt+.
    闭合当前标签
  • Ctrl+Shift+[:折叠代码,Ctrl+Shift+]:展开代码
  • Ctrl+T:词互换
  • 文档右键功能:show unsaved changes,显示未保存的修改
  • 其他功能请Ctrl+Shift+P → menu → Enter自行实验

Sublime Text 2的插件

Sublime Text2支持用python开发插件,并且当前已经有很多插件可供使用了。

Sublime插件可以通过两种方式进行插件安装

  1. 通过在线安装 package control的方式进行在线安装,首先按快捷键 Ctrl+Shift+p 或者点击 Tools → Command Palette 调出控制台Console,将以下代码复制粘贴进命令行后回车:
    import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())
                        
    Sublime Text2在线安装 package control代码

    重新启动Sublime Text 2,如果在Preferences → Package Settings 中看到 Package Control 这一项,就说明安装成功了。

  2. 直接下载所有源码,然后放置到 安装目录\Data\Installed Packages下面。

package control安装完成后,以后装插件之需要以下三步安装法

  1. 按快捷键 Ctrl+Shift+p 或者点击 Tools → Command Palette 调出控制台Console;
  2. 输入 install 调出 Package Control:Install Package 选项,并回车;
  3. 输入 插件名称 选中后回车即可安装(有时 package control 会被墙 导致安装失败);

Sublime Text 2插件

  • Alignment
    代码对齐,选中文本进行对齐操作了 快捷键:Ctrl + Shift + a
  • BracketHighlighter
    括弧高亮显示
  • ClipboardHistory
    粘贴板历史记录,方便使用复制/剪切的内容 快捷键:Ctrl + Shift+v
  • DocBlockr
    文档生成器,在js函数前输入 /** 再回车,神奇的一幕就会发生。
  • Emmet
    zenCoding的升级版,快捷键 tab
  • cssFormat
    格式化Css
  • jsFormat
    格式化JS
  • Tag
    格式化HTMl
  • SublimeLinter
    一个支持lint语法的插件,可以高亮linter认为有错误的代码行,也支持高亮一些特别的注释,比如“TODO”,这样就可以被快速定位。并且支持多种语言、不需要热键——它在输入时就自动校验。
  • GBK Encoding Support
    GBK与UTF之间转换,中国程序员必装。
  • jsdocs
    在JS函数上方输入/**、回车,doc就生成好了,很神奇的插件
  • Goto-CSS-Declaration
    跳转到css文件该class的声明处。
  • SideBarEnhancements
    侧边栏增强工具。
  • TortoiseSVN
    集成SVN版本控制功能
  • SFTP
    提供FTP 或 SFTP服务器管理,通过配置远程文件实现功能
  • Git
    集成Git功能
  • KeymapManager
    管理所安装插件,通过快捷键Ctrl + ALT + k 可以调出面板,然后选择要使用的插件,很实用。
  • JSMinifer
    提供js压缩功能,基于GG的closure complier,快捷键:Ctrl + ALT+M,本机得配置好JDK
  • YUI Compressor
    压缩JS和CSS文件,快捷键 CTRL+B,可以自定义方法。本机得配置好JDK

可以将自己的修改的全部定义在 Data/Packages/User/ 目录中,然后保存它们,这样随时可以将自己修改的同步到你所有设备上。

本文源链接:http://www.html5jscss.com/editor-sublimetext2.html

转载请注明《前端工具——编辑器之Sublime Text 2》| html5jscss

我来说几句 留言 . . . . . . . 1 篇回应 (访客:1 篇, 博主:0 篇)

  1. yui的压缩工具,可以压缩CSS JS,快捷键 CTRL+B(需要安装配置了jdk之后才可用)
    请问这个要怎么配置啊?

评论关闭了.