设为首页 收藏本站
查看: 866|回复: 0

[经验分享] Sublime Text 使用指南

[复制链接]

尚未签到

发表于 2017-2-23 09:36:02 | 显示全部楼层 |阅读模式
Sublime Text 前端开发的神器
  Sublime Text是一个前端开发者必备的编辑器,大量的插件,完善的功能,优越的性能,有非常多的特色,给前端开发提供了一个完善的开发条件。
  本文主要介绍的是如何使用sublime Text藏在菜单里的一些功能,这些功能十分强大,却因隐藏的较深不太被大家关注,网上相关的介绍文章也不太多,这里就整理一下。
  Sublime Text 功能使用介绍,目录:

  • Nodejs build System
  • Multiple Selections
  • Project & Workspace
  • Sublime Text 便携化(绿化)
  • Goto Anything...
  • Snippets
  • Macros
  • Split Editing
Nodejs build System
  nodejs编译系统,可以用来快速的测试函数功能。
  Sublime Text -> Tools -> Build System -> new Build System..
  粘贴如下代码:
  {
    "cmd": ["node", "$file"],
    "file_regex": "^[ ]*File \"(...*?)\", line ([0-9]*)",
    "selector": "source.js",
    "shell": true,
    "encoding": "utf-8", // 编码
    "windows": {
        // "cmd": ["taskkill /F /IM node.exe & node", "$file"] // win下不支持这样的命令
        "cmd": ["node", "$file"]  // 每次编译都新开一个进程,但编译结束后进程会自动关闭,所以不要直接用来启动server
    },
    "linux": {
        "cmd": ["killall node; node", "$file"]
    },
    "osx": {
        "cmd": ["killall node; node $file"]
    }
}
  Sublime Text -> Tools -> Build (Ctrl + B),效果如下:
DSC0000.png

Multiple Selections
  Sublime Text多点编辑,sublime的最大特点,sublime官网的大图就是介绍该功能。使用方式如下:

  • 连续点击 ctrl+d 选中同名字符
  • ctrl+鼠标左键 点击选择多行
  • 鼠标中间按住 拖动选择多行
DSC0001.png

Project & Workspace
  Sublime Text自带工作空间。使用方式如下:
  Sublime Text -> Project -> Save Project As ... 保存工作空间
  Sublime Text -> Project -> Open Project  打开工作空间
  工作空间有Project 与 Workspace 两个概念的区别,在使用上并没有区别。
  打开工作空间后,在sublime的标题栏处会显示当前工作空间。
DSC0002.png

Sublime Text 便携化(绿化)
  对Sublime Text进行绿化,实现一个文件夹打包迁移的目的。
  安装sublime时,默认的用户配置与插件的路径会安装在用户临时目录下,可以通过 Sublime Text -> Preference -> Browse Packages... 快速访问该目录。
  为防止绿化过程中出现错误,先退出sublime。
  打开sublime临时目录,返回上一级目录,有Install Packages、Local、Packages三个目录,将它们剪切。
  打开Sublime Text的安装目录,新建Data文件夹,将剪切的三个目录粘贴到Data下,完成绿化。
Goto Anything...
  Ctrol + P 快速查找文件,可以通过几个关键词模糊查询整个workspace中的文件。如下:
  输入 :50 查找行号
  输入 @check 查找函数
  Goto Definition... 快捷键F12,快速跳转到函数定义的位置。
DSC0003.png

Snippets
  Sublime Text 代码片段,给经常使用的语法糖或代码添加代码片段非常有用。
  Sublime Text -> Tools -> New Snippet... 添加如下代码:
DSC0004.png

  ${1} 代表一个占位符,数字表示tab index,${0}是最后一个。或者可以有这样带描述的语法:${1:description}
  还有更高级的用法,如:
DSC0005.png

  ${1:T} 是第一个占位符
  ${1/(T)|.*/(?1:s)/} 是对第一个占位符进行匹配。
  格式是这样的:
  ${1/a|b|c|d|.*/(?1:A)(?2:B)(?3:C)(?4:D)/}(该例子是将输入的字符进行判断,abcd转大写,其余不做处理)
  拆开来是这样理解的:
DSC0006.png

Macros
  Sublime Text 宏。
  Tools -> Record Macro 录制宏
  Tools -> Save Macro... 播放宏
  在工作中并没有什么情况需要自己去录制一些特殊的宏。
DSC0007.png

  给宏绑定快捷键,Preferences -> Key Bindings - User,配置快捷键和宏文件路径,如下:
  { "keys": ["ctrl+enter"], "command": "run_macro_file", "args": {"file": "res://Packages/Default/Add Line.sublime-macro"} },
Split Editing
  Sublime Text分屏
DSC0008.png

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表,该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有,请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意,请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息,一经发现立即删除。若您因此触犯法律,一切后果自负,我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责,亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏,不得用于商业或者其他用途,否则,一切后果均由您自己承担,我们对此不承担任何法律责任
7、如涉及侵犯版权等问题,请您及时通知我们,我们将立即采取措施予以解决
8、联系人Email:admin@iyunv.com 网址:www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址:https://www.yunweiku.com/thread-346001-1-1.html 上篇帖子: Ionic-wechat项目边开发边学(一):环境搭建和创建一个项目 下篇帖子: 【vscode】如何在vscode 中配置:TypeScript开发node环境
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群,最新一手资源尽在官方微信交流群!快快加入我们吧...

扫描微信二维码查看详情

客服E-mail:kefu@iyunv.com 客服QQ:1061981298


QQ群⑦:运维网交流群⑦ QQ群⑧:运维网交流群⑧ k8s群:运维网kubernetes交流群


提醒:禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来,其版权均归原作者及其网站所有,我们尊重他人的合法权益,如有内容侵犯您的合法权益,请及时与我们联系进行核实删除!



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表