前端编辑器:Sublime2安装指南

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

01.安装sublime

sublime的下载链接点这里

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

前端编辑器:Sublime2安装指南_第1张图片
解压后的文件夹

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

就会看到这样的

前端编辑器:Sublime2安装指南_第2张图片
打开sublime软件文件夹

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

前端编辑器:Sublime2安装指南_第3张图片
安装界面

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

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

前端编辑器:Sublime2安装指南_第4张图片
更新提醒的弹窗

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

02.去除更新弹窗

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

前端编辑器:Sublime2安装指南_第5张图片
sublime文件夹

打开sublime绿色包这个文件夹

前端编辑器:Sublime2安装指南_第6张图片
sublime绿色包

将这个文件解压缩后打开

前端编辑器:Sublime2安装指南_第7张图片
破解包

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

前端编辑器:Sublime2安装指南_第8张图片
sublime2

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

前端编辑器:Sublime2安装指南_第9张图片
sublime Text属性面板

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

前端编辑器:Sublime2安装指南_第10张图片
sublime安装的文件夹

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

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

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

03.添加sublime右键菜单

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

前端编辑器:Sublime2安装指南_第11张图片
右键菜单

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

那么怎么做呢,看下面

开始--》运行--》regedit

前端编辑器:Sublime2安装指南_第12张图片
运行面板

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

前端编辑器:Sublime2安装指南_第13张图片
注册表编辑器

按照下面写的来,找到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文件的数值数据中,就完成了。

前端编辑器:Sublime2安装指南_第14张图片
填进ab文件的数值数据中

注意,这句

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

前端编辑器:Sublime2安装指南_第15张图片
sublime的源程序路径

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

04.默认已经安装了的插件

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

前端编辑器:Sublime2安装指南_第16张图片
查看安装上的插件在这里
  • package control:sublime的管理插件的工具,管理工具,添加、更新、下载插件。如何你发现要是安装的那个出现问题,弹出错误的弹框,可以卸载掉原来安装的,重新手动安装,可以看看这篇文章。《如何安装Package Control》。这个软件默认自带的packagecontrol是中文的,可能看着会不习惯,安装出现问题可以留言,我再看看要不要更新这块怎么安装的部分

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

05.安装emmet插件

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

怎么安装呢,回到这里:

前端编辑器:Sublime2安装指南_第17张图片
解压后的文件夹

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

前端编辑器:Sublime2安装指南_第18张图片
emmet插件.rar

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

前端编辑器:Sublime2安装指南_第19张图片
emmet和pyV8

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

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

前端编辑器:Sublime2安装指南_第20张图片
首选项-浏览程序包

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

前端编辑器:Sublime2安装指南_第21张图片
浏览程序包里的插件

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

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

前端编辑器:Sublime2安装指南_第22张图片
测试是否成功

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

06.修改自定义的快捷键

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

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

前端编辑器:Sublime2安装指南_第23张图片
打开按键绑定-用户

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

{"keys": ["ctrl+d"], "command": "find_under_expand" },
{ "keys": ["ctrl+shift+d"], "command": "find_under_expand_skip" }

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

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

前端编辑器:Sublime2安装指南_第24张图片
多选的编辑框

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

前端编辑器:Sublime2安装指南_第25张图片
输入checkbox

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

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

前端编辑器:Sublime2安装指南_第26张图片
按ctrl+h后的界面

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

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

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

怎么删呢,打开这里

前端编辑器:Sublime2安装指南_第27张图片
按键绑定-默认

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

{ "keys": [“ctrl+k”,"ctrl+shift+d"], "command": "find_under_expand_skip" },

稍后另开一篇文章我会介绍别的常用插件,今天先这样。

999.等待更新目录:

  • bracket highlighter
    高亮提示代码闭合的插件,看看这篇文章《sublime中BracketHighlighter插件高亮设置方法》。要是装了没高亮,可以看看这个讨论话题,《Bracket Highlighter插件怎么使用》

  • html-css-js prettify

代码格式化的插件,自动调节代码缩进,更方便阅读。

  • AutoFileName
    自动补全文件路径-非常方便。没有废话。

  • ColorPicker
    通常,如果我们需要一个调色盘的时候,我们习惯使用Photoshop或是Gimp。但是一个完整的选色工具可以直接在你的编辑器中使用- Ctrl/Cmd + Shift + C。还有两个插件 GutterColor 和 ColorHighlightergutter可以在gutter中显示很棒的色彩高亮,简化了色彩代码的定位。

  • PlainTasks
    杰出的待办事项表!所有的任务都保持在文件中,所以可以很方便的把任务和项目绑定在一起。可以创建项目,贴标签,设置日期。有竞争力的用户界面和快捷键。

  • Alignment – Package Control作者写的简单到极致的多行选择和多行选择对齐插件。

  • SublimeCodeIntel
    代码提示插件SublimeCodeIntel这个插件还是比较不错的,不过最好针对某个语言安装插件比如Python的自动提示插件Jedi-Python autocompletion。

你可能感兴趣的:(前端编辑器:Sublime2安装指南)