sublime 插件详细教程
有问题的可留下评论, 欢迎大家纠正
安装前的准备
sublime 软件下载地址: https://www.sublimetext.com/3
安装Package Control
打开 View(视图) -> Show Console (显示/隐藏控制台)
输入Package Control开启命令
Sublime Text 3 :
import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)Sublime Text 2 :
import urllib2,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; 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()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')
注: 如若以上命令解锁失败, 可去官方查询最新解锁命令 地址: https://packagecontrol.io/installation
插件安装
安装方法1 : 打开 Preferences –> Package Control -> 输入install Package -> 回车
安装方法2: 按住 Ctrl + Shift + P -> 输入 install Package -> 回车
1. ChineseLocalizations
多语言包(简体/繁体中文, 日文, 英文)
2. IMESupport
输入法提示 跟随光标走动
3. SideBarEnhancements (神器)
增强侧边栏插件 (右键中文)
打开 Preference –> Browse Package
复制 SideBarEnhancements 到此目录下即可.
设置默认浏览器打开方式
打开 Preferences –> Package Setting –> Side Bar –> Settings - User , 粘贴以下代码
{ "default_browser": "chrome" //one of this list: firefox, aurora, chrome, canary, chromium, opera, safari }在侧边栏任意文档上点击鼠标右键，选择 “Project –> Edit Preview URLs” , 粘贴以下代码
{ "D:/wamp/www/":{ "url_testing": "http://localhost:80/", "url_production": "http://equipmentmgr.sinaapp.com/" } } 1）"D:/wamp/www/" 是项目在磁盘中的路径，请修改为你的项目地址 2）"url_testing" 是你本地的 localhost 地址 3）"url_production" 是项目线上地址, 可不做修改请根据自己的情况进行修改。
为浏览器绑定热键
打开 Preference –> Package Settings –> Side Bar –> key Bindings-User , 粘贴以下代码
[ { "keys": ["f1"], "command": "side_bar_open_in_browser", "args": { "paths": [], "type": "testing", "browser": "" } } ] 此处为浏览器绑定的热键: f1 , 大家可根据自身习惯修改热键
4. Alignment
代码格式化插件, 可以使多行代码中的等号对齐, 也可调整多行代码为一个缩进级别
默认快捷键: ctrl + alt + a
修改快捷键:
"Preference --> Package Settings --> Alignment --> key Bindings-User" , 粘贴以下代码
[
{ "keys": ["ctrl+shift+alt+a"], "command": "alignment" }
]5. BrackeHighlighter
是一个括号、引号、标签高亮插件, 支持 []、()、{}、”“、” 和<tag></tag>等
修改高亮显示样式:
preferences-->package settings-->Bracket highlighter-->Bracket settings
将左边的 全部 复制到 右边Bracket settings-User
找到以下代码, 将其中的style 修改即可
"default": {
"icon": "dot",
"color": "region.yellowish brackethighlighter.default",
"style": "solid"
},
styel: solid | underline | outline | highlight
注:
{} curly
() round
[] square
<> angle
"" 或 '' quote6. ColorPicker调色盘
默认: Ctrl + shift + c , 如果安装 ConvertToUTF8插件的话, 热键会冲突, 解决方法如下:
打开 Preferences --> Browse Package, 找到ColorPicker --> Default (Windows).sublime-keymap
修改快捷键:
[
// 默认是 ctrl + shift + c
{ "keys": ["ctrl+shift+alt+c"], "command": "color_pick" }
]7. Emmet
一种快速编写html/css的方法
* 连续出现几次
> 子元素
+ 同级元素
# 给当前元素取id名
. 给当前元素取class名
$ 索引
() 分组
[] 自定义属性
快捷键:
html:4s 生成 HTML4 严格型
html:xt 生成 HTML4 过渡型
html:5 或者 ! 生成 HTML5 结构8. ConventToUTF8
编码切换
9. html5
支持html5规范的插件包
按住 alt, 再点击函数, 能自动跳转到函数所在地
10. css3
支持css3规范的插件包
11. JS Format
js代码格式化, 默认快捷键: Ctrl + alt + F
修改快捷键:
"Preference --> Package Settings --> JSFormat --> key Bindings-User" , 粘贴以下代码
[
{
"keys": ["ctrl+alt+shift+f"], "command": "js_format",
"context": [{"key": "selector", "operator": "equal", "operand": "source.js,source.json"}]
}
]12. DocBlockr
可以自动解析函数，变量，和参数，根据它们自动生成文档范式，你的工作就是去填充对应的说明。
/* : 再按Tab 补全多行注释格式
/** : 再按Tab 自动解析下一行的函数
13. AutoFileName
快捷输入文件名,自动完成文件名的输入，如图片选取
例如: 输入"/"即可看到相对于本项目文件夹的其他文件
14. Color Highlighter
```
自动判断颜色, 并高亮显示
需配置 "Preference --> Settings , 添加以下代码
{
"ha_style": "filed",
"icons": false
}
```
15. 自定义主题
```
地址: http://tmtheme-editor.herokuapp.com/#!/editor/theme/Monokai
打开 "Preference --> Browse Package"
把生成的文件放到此目录下的Mytheme文件夹下就可以了. 如果文件夹没有就自己新建一个, 名字可以随意取.
```
16. Vue Syntax Highlight
主要针对vue.js 语法高亮
17. Terminal
在编程过程中，我们经常需要使用到命令行窗口, 此插件可调用cmd命令窗口.
> 快捷键: ctrl + shift + T
18. SublimeCodeIntel
```
代码提示插件, 支持多种编程语言, 不过安装该插件后需要根据编程语言进行配置
打开 "Preference --> Browse Package", 打开SublimeCodeIntel->.codeintel->config.
如果没有.codeintel 或者 .codeintel下的config 文件, 则手动创建
创建好后,在config文件 粘贴以下代码:
{
"JavaScript":{
"javascriptExtraPaths":[]
}
}
注意:
.codeintel因为目录名前面有个小数点, 新建文件是不允许的, 需要用cmd创建. 命令mkdir .codeintel
```
19. Csscomb
CSS属性排序 需要node.js
20. A File icon
文件图标, 相信你会喜欢的. 反正我挺喜欢的
21. PackageResourceViewer
```
可修改侧边栏字体
* Ctrl + shift + P
* PackageResourceViewer:Open Resource
* Theme - Default
* default.sublime-theme
搜索以下值:
{
"class": "sidebar_label",
"fg": [48, 48, 48],
"font.size": 15, 字体大小
"font.face": "Consolas" 字体家族
},
行间距: 搜索sidebar_tree
修改: "row_padding"
```
22. Sublime 背景透明化
下载地址：https://pan.baidu.com/s/1TmTWSd4zMINfwlx4tzt1gA 密码：4c0e
打开 "Preference --> Browse Package"
将 下载下来的 "SublimeTextTrans" 复制到该目录下 即可
透明度 :
Ctrl + shift + 1 透明度1 (完全不透明)
Ctrl + shift + 2 透明度2
Ctrl + shift + 3 透明度3
Ctrl + shift + 4 透明度4
Ctrl + shift + 5 透明度5
Ctrl + shift + 6 透明度6
扫一扫
141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
