Sublime Text 插件篇

Sublime Text支持丰富的扩展及插件,使其在前端开发与编写动态语言时具有可以媲美IDE的效率。本文以Sublime Text3为例,分类别对常用插件进行简单的介绍。

建议:阅读本文前,请先阅读Sublime Text 入门篇


目录

1. 格式化(Format)

2. 智能提示(Intelligent Prompt)

3. 编码(Encoding)

4. 版本控制(Version Control)

5. 前端必备(Web UI)

6. 功能增强(Enhancement)

7. 个人插件快捷键配置(Personal Settings)


格式化(Format)

Alignment

  • 简介:变量定义太多,可以一键使 “=” 对齐

  • 使用:默认快捷键 Ctrl + Alt + A 与qq截屏快捷键冲突,可以设置其他快捷键如 Ctrl + Shift + Alt + A

TrailingSpacers

  • 简介:TrailingSpacers这款插件可以高亮显示多余的空格及空行,并可以一键删除。

  • 使用:安装插件需重启Sublime,可在快捷键配置文件Key Binding-User中设置快捷键 Ctrl + Alt + D

1
2
3
4
{
"keys": ["ctrl+alt+d"],
"command": "delete_trailing_spaces"
}
  • 效果:

JSFormat

  • 简介:JSFormat插件可以帮助我们将经过压缩或混淆处理的js代码处理为标准格式,包括换行及缩进。

  • 使用:在已压缩的JS文件中,右键选择jsFormat或者使用自定义快捷键 Ctrl + Alt + L

1
2
3
4
5
{
"keys": ["ctrl+alt+l"],
"command": "js_format",
"context": [{"key": "selector", "operator": "equal", "operand": "source.js,source.json"}]
}
  • 效果:

回到目录


智能提示(Intelligent Prompt)

LESS

  • 简介:使用该插件,可以支持less语法高亮

  • 使用:打开.less文件或者使用快捷键 Ctrl + Shift + P,输入SSL

Bracket Highlighter

  • 简介:可匹配[], (), {}, “”, ”, ,高亮标记,便于查看起始和结束标记

  • 使用:点击对应代码

  • 效果:

jQuery

  • 简介:对jQuery函数进行智能提示

  • 效果:

AutoFileName

  • 简介:自动完成文件名的输入,如图片选取等

  • 使用:输入”/”即可看到相对于本项目文件夹的其他文件

  • 效果:

AngularJS

  • 简介:对AngularJS函数进行智能提示

JSLint

  • 简介:对js代码进行质量检测

  • 使用:按下 Shift + Ctrl + P 调出命令面板,找到JSLint: Run JSLint,按下Enter,JSLint会输出结果到状态栏

  • 效果:

回到目录


编码(Encoding)

ConvertToUTF8

  • 简介:Sublime Text默认不支持UTF8编码,通过本插件可以将GB2312,GBK,BIG5,EUC-KR,EUC-JP ,ANSI等编码格式文件自动转换为UTF8格式。

  • 使用:安装插件自动转换为UTF8格式

  • 效果:

回到目录


版本控制(Version Control)

Git

回到目录


前端必备(Web UI)

Emmet

  • 简介:Emmet前身是前端神器zen coding,可以大幅度提高前端开发效率。你可以使用仿CSS选择器的语法来动态生成代码,编写HTML/CSS时有较明显的优势。

  • 使用:使用方法请参照教程http://www.w3cplus.com/tools/emmet-cheat-sheet.html

ColorPicker

  • 简介:需要输入颜色时,可直接调出windows调色板选取颜色

  • 使用:快捷键Windows: Ctrl + Shift + C

  • 效果:

回到目录


功能增强(Enhancement)

Markdown Preview

  • 简介:可以直接打开浏览器预览markdown文件

  • 使用:安装完插件重启后,按 Ctrl + Shift + P ,选择Set Syntax:Markdown

DocBlockr

IMESupport

  • 简介:使用中文输入法时,可以实现光标跟随(默认不可以)

  • 效果:

SideBarEnhancements

  • 简介:SideBarEnhancements是一个可以自定义打开方式快捷键的工具包。他可以定义不同的快捷键打开不同的浏览器。

  • 使用:安装插件并重启后,配置用户快捷键

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
//firefox
{ "keys": ["f4"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:/Program Files (x86)/Mozilla Firefox/firefox.exe",
"extensions":".*"
}
},
// ie
{ "keys": ["f5"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:/Program Files/Internet Explorer/iexplore.exe",
"extensions":" .*"
}
},
// chrome
{ "keys": ["f6"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
"extensions":".*"
}
}
}

FileDiffs

  • 简介:比较当前文件与选中的代码、剪切板中代码、另一文件、未保存文件之间的差别。

  • 使用:右键标签页,出现FileDiffs Menu或者Diff with Tab,对应文件比较即可

  • 效果:

回到目录


个人插件快捷键配置(Personal Settings)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

[
// layout
{
"keys": ["ctrl+shift+q"],
"command": "set_layout",
"args":
{
"cols": [0.0, 1.0],
"rows": [0.0, 1.0],
"cells": [[0, 0, 1, 1]]
}
},
{
"keys": ["ctrl+shift+w"],
"command": "set_layout",
"args":
{
"cols": [0.0, 0.5, 1.0],
"rows": [0.0, 1.0],
"cells": [[0, 0, 1, 1], [1, 0, 2, 1]]
}
},
{
"keys": ["ctrl+shift+e"],
"command": "set_layout",
"args":
{
"cols": [0.0, 0.33, 0.66, 1.0],
"rows": [0.0, 1.0],
"cells": [[0, 0, 1, 1], [1, 0, 2, 1], [2, 0, 3, 1]]
}
},
{
"keys": ["ctrl+shift+r"],
"command": "set_layout",
"args":
{
"cols": [0.0, 0.25, 0.5, 0.75, 1.0],
"rows": [0.0, 1.0],
"cells": [[0, 0, 1, 1], [1, 0, 2, 1], [2, 0, 3, 1], [3, 0, 4, 1]]
}
},
{
"keys": ["ctrl+shift+y"],
"command": "set_layout",
"args":
{
"cols": [0.0, 1.0],
"rows": [0.0, 0.5, 1.0],
"cells": [[0, 0, 1, 1], [0, 1, 1, 2]]
}
},
{
"keys": ["ctrl+shift+u"],
"command": "set_layout",
"args":
{
"cols": [0.0, 1.0],
"rows": [0.0, 0.33, 0.66, 1.0],
"cells": [[0, 0, 1, 1], [0, 1, 1, 2], [0, 2, 1, 3]]
}
},
{
"keys": ["ctrl+shift+t"],
"command": "set_layout",
"args":
{
"cols": [0.0, 0.5, 1.0],
"rows": [0.0, 0.5, 1.0],
"cells":
[
[0, 0, 1, 1], [1, 0, 2, 1],
[0, 1, 1, 2], [1, 1, 2, 2]
]
}
},
//firefox
{ "keys": ["f4"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:/Program Files (x86)/Mozilla Firefox/firefox.exe",
"extensions":".*"
}
},
// ie
{ "keys": ["f5"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:/Program Files/Internet Explorer/iexplore.exe",
"extensions":" .*"
}
},
// chrome
{ "keys": ["f6"], "command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
"extensions":".*"
}
},
//删除多余空格
{ "keys": ["ctrl+alt+d"], "command": "delete_trailing_spaces" },
//是否开启TrailingSpacer
{ "keys": ["ctrl+alt+o"], "command": "toggle_trailing_spaces" },
//自动对齐
{ "keys": ["ctrl+alt+shift+a"], "command": "alignment" },
//文件夹中查找内容
{"keys":["ctrl+alt+f"], "command": "show_panel", "args": {"panel": "find_in_files"}},

//代码跳转
{
"command": "navigate_to_definition",
"keys": ["ctrl+q"]
},
{
"command": "jump_prev",
"keys": ["ctrl+e"]
},
//一键格式化js代码
{
"keys": ["ctrl+alt+l"],
"command": "js_format",
"context": [{"key": "selector", "operator": "equal", "operand": "source.js,source.json"}]
},
]

回到目录