正文

开发工具之Sublime编辑器

IP云
IP云V管理员/1 阅读
06/22
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

sublime是一款轻量级的编辑器，可以从官网上进行下载最新版本。它有很多使用并且强大的功能支持。例如：GOTO,package 等快捷操作。但有时候下载的版本不能进行安装package control 无法方便的进行插件的管理。所引我经常会使用一个不是最新的版本，如果有些小伙伴也有这种情况，那么可以使用我提供的这款sublime即可正常使用。

相关插件: https://packagecontrol.io/

接下来就是简单的下一步下一步进行安装，安装完成之后我们要安装一些插件，来便利我们进行高效的开发工作。首先，我会下载这些。。。。。

1）control + shift + p   输入 install package  进行包管理的安装，稍等片刻会提示你安装完成，这个时候就可以进行相关插件的安装了（如果无法使用命令安装，可以手动下载并安装）

2）进行汉化，依旧使用组合键control + shift + p 输入 install package  稍后会出现一个搜索框，输入你想要安装的插件的名称localization

3）  对于长时间变成的我来说，一个好的环境是至关重要的，所以我会选择一个好的主题开始愉快的工作。使用插件colorSublime 可以自由的主题选择

4） 由于现在编码都是使用utf-8的字符集，所以为了不必要的不统一，所以安装ConvertToUTF8 自动的将字符集转化成标准的utf-8的形式

5）侧边栏加强版 Side​Bar​Enhancements 支持更多的选项操作。

6)好用的智能提示插件：Emmet

 7）其他的自己选择

alignment  对齐
 
bracketHighlighter    高亮
 
docBlockr   注释
 
git   
 
jsFormat : 

功能：Javascript的代码格式化插件

简介：很多网站的JS代码都进行了压缩，一行式的甚至混淆压缩，这让我们看起来很吃力。而这个插件能帮我们把原始代码进行格式的整理，包括换行和缩进等等，是代码一目了然，更快读懂~

使用：在已压缩的JS文件中，右键选择jsFormat或者使用默认快捷键（Ctrl+Alt+F）

HTML-CSS-JS Prettify

 功能：将前端 不规则的代码排版进行格式化
简介：有时候对于排版不友好的代码来说，读起来是一件费事的事情，这个工具可以有效的解决这个问题
使用：选择需要进行格式化的代码，右键格式即可

JavaScript Completions    支持javascript原生语法提示

tortoiseSvn   SVN
 
terminal  命令行
 
compare side-by-side ,Sublimerge 文本对比
 
   search stack overflow  快速搜索
 
 AutoFileName —— 自动补全文件路径和文件名

Color Highlighter —— 高亮颜色

SublimeCodeIntel   提示, 使用一个类this-> 的时候,会进行提示类中的方法与属性

ClickableURLs  -----  对于文本中有一个url地址,可以通过这个插件设置快捷键直接打开在浏览器中

SyncedSideBar: 每次打开文件，侧边栏都会同步显示该文件所在目录树中的位置

jquery:  功能：jQ函数提示

8) sublime本身不支持中文的鼠标跟随,就是我们输入的文字与光标所在的位置分离,这样会很影响我们的日常开发
解决: 安装插件 IMESupport
 
  想看完整内容，可以去官网，这里提供两个地址，国内：http://www.sublimetextcn.com/ （对于英文不好的同学） 国外：https://www.sublimetext.com/

 
常用的快捷键也有很多：
 
 
组合键
描述
ctrl + G
 定位行，跳转行
ctrl + F
在当前窗口查找文本
ctrl + E
最近打开的文件
CTRL+ALT+L
格式化代码
CTRL+J
自动代码提示，自动补全
CTRL+Z
 倒退(代码后悔)
CTRL+SHIFT+Z
向前
CTRL+/ 
注释//取消注释  
CTRL+SHIFT+/ 
注释/*...*/
Ctrl+Shift+U
选中的字符大小写转换
CTRL+F4
关闭当前的编辑器或选项卡
ctrl + k + u
将选定字符转换成 大写
ctrl + k + l
将选定字符转化成小写
Ctrl + Enter
智能线分割（HTML和JavaScript）
Ctrl + Shift + J
智能线连接（仅适用于HTML和JavaScript）
ESC   
光标返回编辑框
CTRL+UP/DOWN
光标跳转到编辑器显示区第一行或最后一行下
ctrl+shift+up/down
移动行、合并选中行，代码选中区域 向上/下移动
CTRL+C
复制
CTRL+V
粘贴
CTRL+X
剪 切,删除行
CTRL+D 
复制行
 
按Ctrl+`
 打开面板
常用键：
1)安装
ctrl+shift + p  输入 install
 Install Package 选择
 
2)卸载
ctrl+shift + p  输入 remove
Remove Package  选择
 
 
还有一些实用的功能：
1）直接编译执行本文件
Tool -> Build System -> New Build System 中选择php
打开的样式：
 
进行修改：

{
"cmd":["C:/phpStudy/PHPTutorial/php/php-5.6.27-nts/php.exe","$file"],
"file_regex":"php$",
"selector":"source.php"
}

 
需要注意的是： 要设置好php的环境变量，否则需要找到相应的路径替换php，例如
 
最后进行保存为后缀为sublime-build的文件即可，名称自定
最终路径：  C:\Users\Administrator\AppData\Roaming\Sublime Text 3\Packages\User(本人)
调用方式:  Ctrl + B 即可查看该脚本运行效果

 
2）添加代码段
 
在tool->new snippet…创建一个新的snippet
 
 
进行相应的设置 
 
新建一个snippet文件

 
简要介绍一下snippet四个组成部分:
content:其中必须包含<![CDATA[…]]>,否则无法工作, Type your snippet here用来写你自己的代码片段 tabTrigger:用来引发代码片段的字符或者字符串, 比如在以上例子上, 在编辑窗口输入hello然后按下tab就会在编辑器输出Type your snippet here这段代码片段 scope: 表示你的代码片段会在那种语言环境下激活, 比如上面代码定义了source.python, 意思是这段代码片段会在python语言环境下激活. description :展示代码片段的描述, 如果不写的话, 默认使用代码片段的文件名作为描述
 
Snippet可以存储在任何的文件夹中, 并且以.sublime-snippet为文件扩展名, 默认是存储在.sublime-snippet文件夹下。

3、在content标签里面编辑要在文件头部显示的信息，在tabTrigger标签中间编辑触发的单词–意思就是在文件头部输入单词，然后按tab键，会将content标签中间的信息显示出来；请看我的例子

 
附加项：
1. 手动安装插件包
1）sublime text3
mport urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
2)sublime text2
import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')
 
添加右键

Windows Registry Editor Version 5.00
[HKEY_CLASSES_ROOT\*\shell\SublimeText3]
@="SublimeText3"
"Icon"="D:\\software\\Sublime Text 3\\sublime_text.exe,0"
[HKEY_CLASSES_ROOT\*\shell\SublimeText3\command]
@="D:\\software\\Sublime Text 3\\sublime_text.exe %1"
[HKEY_CLASSES_ROOT\Directory\shell\SublimeText3]
@="SublimeText3"
"Icon"="D:\\software\\Sublime Text 3\\sublime_text.exe,0"
[HKEY_CLASSES_ROOT\Directory\shell\SublimeText3\command]
@="D:\\software\\Sublime Text 3\\sublime_text.exe %1"

重命名为：sublime_addright.reg，然后双击就可以了

注意点:  需要将目录替换成自己实际安装的路径即可

 代码校验:
平常开发中经常会出现各种低级的错误,例如:少一个分号,变量名称错误了,这时候 一个好的编辑器代码校验就尤其重要了.所以,我在这介绍一款插件 SublimeLinter
 安装: 使用install package的方式来进行安装    sublimelinter 和 SublimeLinter-php
设置: Preferences->Package Settings->SublimeLinter->Settings
重要的参数设置:      lint_mode 和 paths 

{
"lint_mode": "save",
"paths": {
"linux": [],
"osx": [],
"windows": ["E:\\xampp\\php"] //设置自己的PHP地址
},
"delay": 0.1,
}

安装好以后就可以进行愉快的开发工作了

,

php官方函数查询(DocPHPManualer)

场景:  在开发或者审查代码的时候,经常会用到一些自带的函数,这个时候,你时候 还要打开官方地址 -> 在搜索栏中进行相关函数的搜索呢? 不用如此麻烦,一个插件就搞定!!!

安装使用: 使用package包管理器进行正常安装,完成安装之后,就可以进行试验,选中一个函数,右键可以进行搜索

搭配LiveReload实现实时刷新

场景:作为开发者,我们经常需要进行页面调整,你是不是经常遭遇这样的情景,修改一个样式,去刷新一下浏览器,看看是否是自己想要的样式,这样的开发很累,效率较为低下,这个时候,借助插件可以实现实时刷新的效果,效率倍增,有木有!!!

安装与使用:

在浏览器Chrome中添加扩展: LiveReload,并且设置允许访问文件网址

在sublime中下载插件:livereload

1)配置LiveReload

Preference>Package Settings>LiveReload>Settings User，复制下面的代码粘贴保存
{
"enabled_plugins": [
"SimpleReloadPlugin",
"SimpleRefresh"
]
}

2)在Sublime中启用LiveReload

Ctrl+Shift+P →LiveReload: Enable/disable plugins， 按 Enter→在下拉列表找到 “Enable - Simple Reload” ， 按 Enter

使用:点击 Chrome菜单栏中LiveReload 图标，中心的空心小圆圈会变成实心，表示已经启用LiveReload并连接成功。Sublime text3中的任何变化，Ctrl+S后，立即在Chrome中看到相应变化

常见问题总结：

1. 安装package 失败（Error installing Package Control: HTTPS error encountered, falling back to HTTP - <urlopen error [WinError 10060]）

50.116.34.243 sublime.wbond.net
50.116.34.243 packagecontrol.io在hosts中添加配置项

2. Package Control: Error downloading channel. HTTP error 502 downloading https://packagecontrol.io/channel_v3.json.

Package Control.sublime-settings]修改方法：

Preferences > Package Settings > Package Control > Settings - User

"channels":
[
"http://static.bolin.site/channel_v3.json",
//"https://packagecontrol.io/channel_v3.json",
//"https://web.archive.org/web/20160103232808/https://packagecontrol.io/channel_v3.json",
//"https://gist.githubusercontent.com/nick1m/660ed046a096dae0b0ab/raw/e6e9e23a0bb48b44537f61025fbc359f8d586eb4/channel_v3.json"
],

常用配置：

{
"ignored_packages":
[
"Vintage"
],
"font_size": ,
"word_wrap": true,
"save_on_focus_lost": true,
"wrap_width": ,
}

常见错误：

1.  there are no packages available for instation

解决方案： preferences > package settings > package control > setting user

{
"bootstrapped": true,
"installed_packages":
[
"Package Control"
],
"channels":
[
"http://cst.stu.126.net/u/json/cms/channel_v3.json"
]
}//重点需要添加channels

Mac中在命令行下打开文件

安装成功的sublime软件一般位于应用目录之下Sublime Text.app

1）设置软连接

ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" /usr/local/bin/subl