前端编辑器:Sublime2安装指南

2016/10/28 1337
目录
[隐藏]

最近重装了下Sublime Text2,顺便写篇安装指南,本文的所有内容仅适用于我的这个sublime的版本(下面有下载链接),这个版本汉化的比较厉害,但是我一直在用的一个版本。

Sublime01

安装Sublime2

Sublime的下载链接点这里

下载完,解压缩后就会看到这样的

Sublime01

sublime插件文件夹等下说,先打开【sublime软件】的文件夹

就会看到这样的

Sublime02

选sublimetext_2.0.2.2217_XiaZaiBa.exe安装,是Sublime2,我选择了Sublime2,不是Sublime3,因为Sublime3还没成熟,很多插件不能用,当然你想选Sublime3也可以,有些安装插件的细节会不一样,我只介绍Sublime2的哈,sorry。

Sublime04

点击安装,你也可以选择自己想要的安装路径,我就装C盘了。

安装完成后运行sublime2会跳出这个弹窗,这是更新提醒的弹窗。

Sublime05

sublime是收费的软件,所以没付钱每次打开这个软件就会跳出这个更新提醒的弹窗,特别烦,下一步我们看看想办法把这个弹窗永久的去掉。

去除更新弹窗

回到这里,下面这个文件夹

Sublime06

打开sublime绿色包这个文件夹

Sublime07

将这个文件解压缩后打开

Sublime08

找到sublime_text.exe,然后右键复制,然后找到桌面,看看你刚才安装好的,sublime2,将复制的那份破解包覆盖掉安装好的sublime的原文件,怎么做呢,看我截图:

Sublime09

上图是安装好的sublime在桌面上,选中它然后鼠标右键,选择属性。就会弹出下面的面板

Sublime10

点击【打开文件位置】这个按钮,就会弹出下面的sublime安装的文件夹

Sublime11

找到SublimeText.exe,将那个复制好的sublime的破解版exe覆盖掉它,就好了。

然后再重启下sublime看看,是不是不会再弹出更新提示了。

注意,破解包的sublime_text.exe和源程序的SublimeText.exe名字不一样,你把破解包的sublime_text.exe给改成SublimeText.exe就好了。

添加sublime右键菜单

什么是右键菜单呢,看下图,就是这个

Sublime12

有了这个右键菜单,比如你打开abc.php你就能选中这个php文件,然后右键选择Edit with Sublime2就可以用sublime打开来编辑了。

那么怎么做呢,看下面

开始–》运行–》regedit

Sublime13

点击确定,然后会跳出下面的界面

Sublime14

按照下面写的来,找到HKEY_CLASSES_ROOT底下的*文件夹,然后是shell文件夹,然后新建项命名为Edit with Sublime2,然后在其下面再新建项command。
[HKEY_CLASSES_ROOT*\shell\Edit with Sublime2\command]
修改里头的ab文件,将下面这段
“C:\Program Files\Sublime Text\SublimeText.exe” -p –remote-tab-silent “%1” 填进ab文件的数值数据中,就完成了。

Sublime15

注意,这句

“C:\Program Files\Sublime Text\SublimeText.exe”-p–remote-tab-silent”%1″中的”C:\Program Files\Sublime Text\SublimeText.exe”这句每个人都不一样,在这里看。

Sublime16

在桌面上的sublime的程序上选中,然后鼠标右键选择属性,就可以看见,这个路径了。

手动安装package control

装了我这个版本的sublime2以后,默认的已经装了packagecontrol、和SideBarEnhancements了。

Sublime17

package control:sublime的管理插件的工具,管理工具,添加、更新、下载插件。如果你发现要是安装的那个出现问题,弹出错误的弹框,可以卸载掉原来安装的,重新手动安装。

手动安装package control前提是需要一个Package Control的安装包,将该安装包替换到Sublime Text2的相关路径下即可,这里有两个路径,经验证放置到其中任意一处均可。当然原先已经有的安装包要删掉,把新安装包替换上。

路径一:打开Sublime Text 2,点击PreFerences –> Browse Packages,进入一个文件夹后返回该文件夹的上一级“Sublime Text2”,找到一个“Installed Packages”文件夹(如果没有该文件夹则创建个新的),将下载好的Package Control的安装包放到“Installed Packages”文件夹下即可。
路径二:Sublime Text 2 的安装路径,“Sublime Text 2\Pristine Packages\”文件夹下。

SideBarEnhancements:是一个可以自定义打开方式快捷键的工具包。它可以定义不同的快捷键打开不同的浏览器。这个插件目前只能手动安装,如果你是跟我一样用的sublime2的话,它是不能用packagecontrol安装的,所以我的这个sublime安装版本正好帮你安装好了。你是不是想要sublime也和Dreamweaver一样按F12就可以浏览器预览呢,就是用这个插件实现的,不过要设置快捷键才行,具体设置请百度。

手动安装emmet插件

这个插件几乎是前端必备的一个插件,肯定是要装的,它有什么用呢,就是让你快速编写代码,可以看看这篇文章你就明白了为什么必须要装这个插件。《前端开发必备!Emmet使用手册》。另外还有一篇GIF动图演示的Emmet语法,看这篇《 Emmet:HTML/CSS代码快速编写神器》

怎么安装呢,回到这里:

Sublime01

打开【sublime插件】这个文件夹,找到【emmet插件.rar】,打开

Sublime18

将里面的emmet文件夹和pyV8文件夹

Sublime19

拷贝到sublime的首选项-浏览程序包里。

打开sublime程序,在菜单栏的首选项-浏览程序包

Sublime20

单击[浏览程序包]就会看见下面的文件夹

Sublime21

将emmet和pyV8这个文件夹复制到这里面,然后重新启动一下sublime。测试下emmet是不是安装成功了。

怎么测试呢,就是新建一个abc.html,然后输入一个英文字符的“!”,按下tab键,是不是会跳出这样的,就算成功了。

Sublime22

emmet插件安装就算完成了,具体怎么用好emmet强大的功能,可以看上面这篇《前端开发必备!Emmet使用手册》

修改自定义的快捷键

有个快捷键是非常必要要用的,就是多行选中同一个单词,然后可以跳着选,然后批量修改这个单词。

打开sublime,在菜单栏中-首选项-【按键绑定-用户】,打开

Sublime23

里面是空的,只有一对[]方括号。你可以在[]方括号里面填上下面这段设置快捷键的代码,然后保存,就好了

我这个快捷键的意思是,按住”ctrl+d”,就是选中下一个,”ctrl+shift+d”就是跳过下一个。

怎么用呢,打开一个编辑好的html文件,然后按住”ctrl+shift+I”,sublime下面就会跳出一个编辑框,看下面的图

Sublime24

举个栗子哈,比如我输入“checkbox”

Sublime25

就会找到html文件中所有的checkbox,然后你比如说想要选中第一个checkbox,和第三个checkbox,把它改成radio,那么你就可以按快捷键了,按住”ctrl+d”,就是选中下一个,”ctrl+shift+d”就是跳过下一个。来回的试试吧。个人觉得这个快捷键非常必要要会的。

当然还有种办法,你学会了以后可以试试看按“ctrl+h”,就会跳出这样的,看下面

Sublime26

find这个按键一直按,就会一直选中下一个,findall这个按键按一下,就会选中全部,然后在replace with的地方填写要改的单词,比如radio,再按一下replace就替换好了,replace all就是全部替换,但是没有跳选下一个。

所以两个方法你自己权衡使用吧。然后要是不用了,就按“ESC”键退出。

另外一个注意的是,虽然菜单栏中首选项-【按键绑定-用户】比【按键绑定-默认】优先级要高,不过既然设置了用户自定义的快捷键,默认文件的快捷键,多余了就删掉吧。

怎么删呢,打开这里

Sublime27

找到下面的代码,把它删掉,保存。

稍后另开文章我会介绍别的常用插件,今天先这样。比如SublimeCodeIntel,JS代码提示插件。

分享本文: