sublime前端编辑器入门与个人使用经验分享

      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,回车。
install
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插件功劳)
js提示
3.写一个html文件,在标签中的src属性会自动提示图片路径,上下选择,敲敲回车键就能代替你输入长长的路径和名称咯,对css文件中的backgroud-images:url(../)同样适用(AutoFileName插件功劳)
文件路径提示
4.不管是html,css或是js文件,点击一个标签的起始,高亮显示标签的结尾哦,妈妈再也不用担心你找不到标签在哪里闭合了(BracketHighlighter插件功劳)
html
5.你还在为js文件的注释犯愁吗?好多*/需要打呢,现在你只需要在就是文件的任何地方输入/*或者/**然后敲回车,剩下自己看吧(DocBlockr插件功劳)
js代码注释
6.Emmet这个插件可强大了,场景设想:如果你需要一个表格下有20行10列,一个个手敲,或者不断的复制粘贴吗?不需要!在html文件中输入table>tr*20>td*10按下Tab键,duang!
更多的快捷写法,请参阅官网
7.jquery的代码提示,就依靠插件jQuery咯,试试看
jquery提示
8.请你找一个jquery任意版本的压缩文件。类似jquery-1.8.3.min.js这样的,然后打开这个文件,在package control控制台输入format,回车,你就知道JsFormat这个插件是干嘛的了,也可以使用快捷键ctrl+alt+f直接格式化js文件,但是这个快捷键容易和其他软件的快捷键冲突,建议还是通过控制台输入format方法格式化。
js格式化
9.假如你有强迫症,html也需要格式化对齐怎么办?在html文件里面打开控制台,输入format,回车就ok了。(Tag插件功劳)
html格式化
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.有时候,当你在代码的中间部分书写,突然需要去这一行代码的开头或者是结尾,使用homeend键就可以了。 突然想换行书写,不必去行尾回车,快捷键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+5shift+alt+8的效果,其他的自己探索哦,默认是shift+alt+1
4屏幕显示
2屏幕显示
9.保存或关闭全部文件,打开控制台,输入file,选择"save all"或"close all"
个人感觉常用且方便的就快捷键就这么些,如有遗漏,以后再补充。其他例如复制、粘贴、撤销的操作和操作系统的快捷键一样,此处不再赘述。

八、文中资源下载链接

点击这里

posted @ 2015-07-21 14:33  张超12138  阅读(1692)  评论(0编辑  收藏  举报