打造属于自己的前端开发神器 -- 给Sublime Text加上Eclipse的光环


打造属于自己的前端开发神器 -- 给Sublime Text加上Eclipse的光环

2013-05-16 14:39:15    

Sublime Text打造成如Eclipse一般的前端开发IDE

1. 快捷键移植篇
   从Java开始的梦, 到如痴如醉的Front End, 却始终摆脱不了Eclipse的束缚.
   对于Javaer, Eclipse是非常不错的选择, 但对于单纯的前端而言, 是不是觉得略显笨重, 其中各种不想要的东西, 反正是诸多不爽, 曾用过Eclipse来做前端的人应该都有同感.

   羡慕别人使用VIM时的酣畅淋漓, 无赖门槛颇高, 上手几天后在Eclipse的"熏陶"下又渐渐淡忘了.

   当遇见Sublime Text后, 这一切都改变了, 它简直就是易用版的VIM却不失VIM的神力, 也有非常丰富的插件. 我毅然决然的选择了"抛弃"Eclipse, 投身到它的怀抱.

打开文件夹可以视为打开一个project

打开文件夹可以视为打开一个project


侧边栏可以列出文件夹下面所有文件

侧边栏可以列出文件夹下面所有文件



   但用上Sublime Text后, 发现其中各种快捷键和Eclipse不一样, 苦于Eclipse的习惯时常让我记忆混乱.
   为了延续Eclipse多年的使用习惯, DRY, 我决定将Eclipse中的常用快捷键适配到Sublime Text. 当我的调整完成后, 发现某个国际友人早就有了这个想法Eclipse shortcuts for Sublime Text 2, 但是不够完整, 现在有我这份就完美了.

   适配的Eclipse快捷键如下(其中部分gif动图, 万恶的豆瓣不支持...)
   1) alt+/ 自动补全

alt+/        auto_complete

alt+/        auto_complete


   2) ctrl+i 重新缩进
   3) alt+up / alt+down 上下行交换位置<GIF>

alt+up / alt+down        swap line

alt+up / alt+down        swap line


   4) ctrl+alt+up / ctrl+alt+down 复制当前行到上/下一行<GIF>

ctrl+alt+up / ctrl+alt+down        duplicate line

ctrl+alt+up / ctrl+alt+down        duplicate line


   5) ctrl+d 删除整行
   6) ctrl+l 光标移动到指定行

ctrl+l        goto-line

ctrl+l        goto-line


   7) ctrl+k 快速定位到选中的文字<GIF>

ctrl+k        quickfind

ctrl+k        quickfind


   8) ctrl+shift+x / ctrl+shift+y 转换大/小写
   9) shift+enter 在当前行的下一行插入空行(这时鼠标可以在当前行的任一位置, 不一定是最后)<GIF>

shift+enter        newline

shift+enter        newline


   10) ctrl+shift+p 定位到对于的匹配符(譬如{})(从前面定位后面时,光标要在匹配符里面,后面到前面,则反之)<GIF>

ctrl+shift+p        move2bracket

ctrl+shift+p        move2bracket


   11) ctrl+o outline

ctrl+o        outline

ctrl+o        outline


   12) ctrl+shift+r open resource<GIF>

ctrl+shift+r        open resource

ctrl+shift+r        open resource


   13) ctrl+f 文件内查找/替换

ctrl+f        find/replace

ctrl+f        find/replace


   14) ctrl+h 全局查找/替换, 在查询结果中双击跳转到匹配位置<GIF>

ctrl+h        find in files

ctrl+h        find in files



   调整的快捷键和插件快捷键
   1) ctrl+v 粘帖并缩进
   2) ctrl+shift+v 粘帖
   3) ctrl+alt+o 当前文件中的关键字(方便快速查找内容)

ctrl+alt+o        outline keyword

ctrl+alt+o        outline keyword


   4) ctrl+p 打开Sublime Text的命令面板, 这个命令默认使用的是ctrl+shift+p

ctrl+p        command palette

ctrl+p        command palette


   5) alt+a 按等号或冒号对齐(需要alignment插件)<GIF>

alt+a        alignment

alt+a        alignment


   6) ctrl+shift+f 格式化JavaScript代码(需要JsFormat插件)<GIF>

ctrl+shift+f        Js format

ctrl+shift+f        Js format



   实用Sublime Text快捷键
   1) ctrl+left / ctrl+shift+left / alt+left / alt+shift+right光标一个单词一个单词的移动
   2) ctrl+] / ctrl+[ 缩进
   3) ctrl+backspace / ctrl+delete 删除整个单词
   4) f9 行排序(例如选中几个JSON字段, 让这些字段名按字母顺序排序)


2. 推荐插件篇
   如果没有各种插件的协助, Sublime Text绝对还是Text, 而非IDE, 就和Eclipse一样, 都是靠插件发展壮大的.
   1) Package Control 必装, 一旦装了这个, 你就会发现安装/卸载插件如此简单
   2) AutoFileName<GIF>

AutoFileName    自动补全文件(目录)名

AutoFileName    自动补全文件(目录)名


   3) BracketHighlighter<GIF>

BracketHighlighter    突出显示括号/引号

BracketHighlighter    突出显示括号/引号


   4) ColorHighlighter

ColorHighlighter    背景显示16进制颜色

ColorHighlighter    背景显示16进制颜色


   5) DocBlockr

DocBlockr    生成注释模板

DocBlockr    生成注释模板


   6) Emmet<GIF>
      完整语法请参考emmet cheat sheet

Emmet (ex-Zen Coding)    用过Zen-Coding的都知道, 把你节省的时间用于享受生活

Emmet (ex-Zen Coding)    用过Zen-Coding的都知道, 把你节省的时间用于享受生活


   7) SideBarEnhancements

SideBarEnhancements

SideBarEnhancements


   更多插件请参考Sublime Text Packages

转载于:https://my.oschina.net/u/853533/blog/287944

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值