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,回车。

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"
个人感觉常用且方便的就快捷键就这么些，如有遗漏，以后再补充。其他例如复制、粘贴、撤销的操作和操作系统的快捷键一样，此处不再赘述。

八、文中资源下载链接

点击这里