sublime前端编辑器入门与个人使用经验分享
2015-07-22 10:31
591 查看
Sublime Text(以下简称sublime)是一款很好用的代码编辑器,小巧且很灵敏,几乎可以编写大部分主流的计算机语言代码,更是堪称前端代码编辑神器。
你百度一下会发现许多sublime的安装和使用方法,但是个人觉得有一部分是相互转载的,而且叙述不是很清楚,所以我写了这篇sublime入门级的博客分享,也附上我的使用经验,希望能对那些sublime使用还不熟悉的小伙伴们有一丢丢的帮助吧(文章结尾将附上统一的链接与资源)。一、下载sublime
1、在百度搜索"sublime"找到英文官网,进入下载页面2、或者直接进入官网,找到下载页面download即可。(PS:我目前使用的是Sublime Text3 build 8083版本,本文也将用这个版本做演示)
二、安装sublime
这个步骤就不赘述了,一路next,大家都会的。三、安装package control
1.sublime本身是非常小巧的,以至于刚刚安装好之后,你会发现它打开以后是黑不溜秋的,虽然它也可以写代码,但是书写起来效率就比较低了哦。2.给个机会让sublime开始变得强大:在百度上搜索package control,首位的英文网站就是官网啦。进入后找到Installation,点击其中的链接,下载到你的电脑(文末提供下载文件)。3.打开sublime,在菜单栏找到
Preferences -> Browse Packages,点击浏览文件夹,找到
Sublime Text 3 -> Installed Packages文件夹,然后把你下载的package control文件放在里面就行了。
4.如何知道是否操作正确?很简单,关闭sublime,再重新打开,菜单栏点击
Preferences,如果里面有
Package Control,说明就好了哦。
四、安装插件的方法
sublime需要插件去扩展它,才让让它变得强大好用,所以我们要安装一些前端常用的插件,安装方法是统一的:1.菜单栏找到
Preferences -> Package Control,或者快捷键
ctrl+shift+p(个人喜欢使用快捷键,这个控制台以后需要经常用到哦)
2.在出现的控制台中输入
install,选择
install Package,回车。
3.sublime底部出现正在搜索,请等待一会
4.搜索好了会弹出下面这样的框子
5.输入你需要安装的插件名称,回车就能安装啦
6.安装成功后sublime底部会有提示是否成功
五、安装常用插件
这里只提供本人推荐插件名称,安装方法统一使用上文中提到的方法,下面不再赘述。先按部就班的安装,后文会介绍如何使用
1.Alignment -> 对齐插件 2.AutoCompleteJS -> javascript语法提示插件 3.AutoFileName -> 提示路径和文件名称插件 4.BracketHighlighter -> 标签开始和结束高亮提示插件 5.ConvertToUTF8 -> 转换UTF8格式插件 6.DocBlockr -> 快速添加文本注释插件 7.Emmet -> 快速书写html插件 8.HTML5 -> html5属性提示插件 9.jQuery -> jquery语法提示插件 10.JsFormat -> javascript格式化对齐插件 11.Tag -> html格式化对齐插件 12.View In Browser -> 浏览器快捷键预览插件
六、让sublime强大给你看!
请确保安装了上文中的全部插件,然后再打开你的sublime,同步练习下文内容,让你写代码事半功倍!1.首先开启侧边栏
菜单栏找到
View->Side Bar->Show Open Files,点击搞定。
以后再想显示或者隐藏侧边栏,直接快捷键
ctrl+k+b,帮助你看到文件目录结构。
2.写一个js文件,当你在里面输入一些js常用词的时候,还没有等你输入完,就出来提示咯(AutoCompleteJS插件功劳)
3.写一个html文件,在标签中的src属性会自动提示图片路径,上下选择,敲敲回车键就能代替你输入长长的路径和名称咯,对css文件中的backgroud-images:url(../)同样适用(AutoFileName插件功劳)
4.不管是html,css或是js文件,点击一个标签的起始,高亮显示标签的结尾哦,妈妈再也不用担心你找不到标签在哪里闭合了(BracketHighlighter插件功劳)
5.你还在为js文件的注释犯愁吗?好多
*和
/需要打呢,现在你只需要在就是文件的任何地方输入
/*或者
/**然后敲回车,剩下自己看吧(DocBlockr插件功劳)
6.Emmet这个插件可强大了,场景设想:如果你需要一个表格下有20行10列,一个个手敲,或者不断的复制粘贴吗?不需要!在html文件中输入
table>tr*20>td*10按下
Tab键,duang!
更多的快捷写法,请参阅官网哦
7.jquery的代码提示,就依靠插件jQuery咯,试试看
8.请你找一个jquery任意版本的压缩文件。类似jquery-1.8.3.min.js这样的,然后打开这个文件,在package control控制台输入
format,回车,你就知道JsFormat这个插件是干嘛的了,也可以使用快捷键
ctrl+alt+f直接格式化js文件,但是这个快捷键容易和其他软件的快捷键冲突,建议还是通过控制台输入format方法格式化。
9.假如你有强迫症,html也需要格式化对齐怎么办?在html文件里面打开控制台,输入
format,回车就ok了。(Tag插件功劳)
10.这里隆重介绍一下View In Browser插件。以前用DW写代码,里面可以用快捷键在浏览器预览,但是sublime不能快捷键预览,有了这个插件就能让你实现这个梦想了,但是需要配置一下。
第一步:菜单栏
Preferences -> Package Settings -> View In Browser -> Settings——Default点击打开,然后复制一下里面的全部内容。
第二步:菜单栏
Preferences -> Package Settings -> View In Browser -> Settings——User点击打开,里面默认是空的,不要紧张,把刚刚复制的内容粘贴进去保存就好。
第三步:在文件中找到下图中的内容,然后修改对应的浏览器的路径,路径是你自己才知道的哦(一般IE的路径不需要修改,是系统默认的)。
修改后类似这样
第四步:快捷键预览!对应的快捷键分别是
ctrl+alt+f -> 火狐
ctrl+alt+i -> IE
ctrl+alt+c -> 谷歌
七、推荐的快捷键操作
下面是我推荐的快捷键操作,对你写代码脱离鼠标操作有比较大的帮助哦,但是需要你不断的练习巩固记忆,不然容易记不得。1.在你知道文件名的情况下,不需要在目录里找,快捷键
ctrl+p输入你需要的文件名,回车就出来了。
2.想去到文件中的某一行,可以使用快捷键
ctrl+g,输入行号,然后回车。
3.有时候,当你在代码的中间部分书写,突然需要去这一行代码的开头或者是结尾,使用
home和
end键就可以了。 突然想换行书写,不必去行尾回车,快捷键
ctrl+回车就行了。
突然想在上一行插入空格添加一段代码,使用快捷键
ctrl+shift+回车吧。
4.整行代码或者文字注释,在这一行的任何地方使用快捷键
ctrl+/,如需要对一行中某一部分内容注释,选中内容后使用快捷键即可。取消注释的快捷键也是同样的。
5.标签的折叠,光标在需要折叠的标签内任何地方,使用快捷键
ctrl+shift+[
折叠标签的展开,光标在需要折叠的标签内任何地方,使用快捷键
ctrl+shift+]
6.打开的文件比较多,需要在文件之间来回切换,使用快捷键
alt+1``alt+2``alt+3这样的方式快速切换。
7.快捷键
shift+f11,切换全屏免打扰模式编辑代码,
f11就只是切换全屏模式而已。
8.快捷键
shift+alt+数字,切换分屏显示代码,比如下图分别是
shift+alt+5和
shift+alt+8的效果,其他的自己探索哦,默认是
shift+alt+1
9.保存或关闭全部文件,打开控制台,输入
file,选择"save all"或"close all"
个人感觉常用且方便的就快捷键就这么些,如有遗漏,以后再补充。其他例如复制、粘贴、撤销的操作和操作系统的快捷键一样,此处不再赘述。
八、文中资源下载链接
点击这里相关文章推荐
- Extjs4.0 最新最全视频教程
- OpenERP 的XML-RPC的实例+many2many,one2many,many2one...
- CSS3属性教程与案例分享
- jquery教程靠边站,一分钱不花让你免费学会jquery
- autoit入门教程小结第1/5页
- 用Photoshop 制作草地效果简明教程
- IE:使用搜索助手
- 比较完整简洁的Flash处理XML文档数据教程 上篇第1/3页
- CMOS使用及维护须知
- CSS使用心得体会
- VBS基础编程教程 (第1篇)
- SQLite教程(十一):临时文件
- VBS基础编程教程 (第3篇)
- VBS教程:运算符-运算符(+)
- C#中尾递归的使用、优化及编译器优化
- PostgreSQL教程(十):性能提升技巧
- PostgreSQL教程(二):模式Schema详解
- PostgreSQL教程(十三):数据库管理详解
- PostgreSQL教程(八):索引详解
- PostgreSQL教程(三):表的继承和分区表详解