Sweet Sublime Text —— 我的Sublime配置

以下是我的Sublime Text 3 配置
绿色便携版放在 github 了

1.Package Control

Sublime包管理工具,必装
ctrl+` 打开控制台,输入以下代码

1
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’)

2. Emmet

Zen Coding,不多解释,懂得自然懂,虽然Sublime3 原生提供了部分Emmet语法,但是不全,比如 html:5 就没有

###修改 Emmet 兼容jsx 文件
打开 preferences -> Key bindings - Users,把下面代码复制到[]内部

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
{
"keys": [
"super+e"
],
"args": {
"action": "expand_abbreviation"
},
"command": "run_emmet_action",
"context": [{
"key": "emmet_action_enabled.expand_abbreviation"
}]
},
{
"keys": ["tab"],
"command": "expand_abbreviation_by_tab",
"context": [{
"operand": "source.js",
"operator": "equal",
"match_all": true,
"key": "selector"
}, {
"key": "preceding_text",
"operator": "regex_contains",
"operand": "(\\b(a\\b|div|span|p\\b|button)(\\.\\w*|>\\w*)?([^}]*?}$)?)",
"match_all": true
}, {
"key": "selection_empty",
"operator": "equal",
"operand": true,
"match_all": true
}]
}

3.EditorConfig

代码格式管家,最主要的功能是,同一项目代码在不同编辑器下能够保持统一的代码风格(主要是缩进,如sublime默认缩进宽度是4,我写JS缩进都是2)。
EditorConfig支持除Sublime之外的很多主流编辑器与IDE,如VisualStudio, Eclipse, VIM, WebStorm等

使用:

在项目根目录新建一个文件:.editorconfig,在此文件里填写你需要的格式规则,以下是一个典型的.editorconfig

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# http://editorconfig.org
root = true
[*]
# Change these settings to your own preference
indent_style = space
indent_size = 2
# We recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false

4. JSHint Gutter

JSHint不但能检查JS代码的语法错误,还能够监控代码质量(风格),很多公司跟开源项目都在使用它,比如:Facebook、jQuery、Bootstrap等等。在Github上,使用JSHint的项目多如牛毛,如果你在某个项目里面,发现有.jshintrc文件,那它就使用了JSHint。JSHint是一个独立的工具,它不直接提供对Sublime的支持,它本身只提供基于NodeJS的命令行工具。而JSHint Gutter这个插件,它能够调用JSHint的命令行工具,执行代码检查并将结果显示到Sublime界面上。

安装JSHint

先安装好NodeJS,然后在终端/命令行中输入 npm install -g jshint

安装与配置JSHint Gutter

安装打开

1
Preference->Package Settings->JSHint Gutter->Set 'node' Path

设置NodeJS执行文件所在的路径(node_path),并将lint_on_save(文件保存时检查)选项设为 true

设置.jshintrc

在项目根目录新建一个文件:.jshintrc,在此文件里填写你的检查规则,以下是一个典型的.jshintrc

1
2
3
4
5
6
7
8
9
10
11
{
"curly": true,
"eqeqeq": true,
"immed": true,
"noarg": true,
"noempty": true,
"quotmark": "single",
"undef": true,
"unused": true,
"node": true
}

第二行:curly 表示所有的代码块必须使用大括号
第三行:eqeqeq 表示判断相等时,必须使用 ===
第四行:immed 表示立即执行函数必须用括号包起来 (function () { } ());
第五行:noarg 表示禁止使用 arguments.callerarguments.callee
第六行:noempty 表示禁止出现空的代码块 { }
第七行:quotmark 是引号的使用规则,有以下四个选项
false : 不检查
true : 检查一致性(要么都是单引号,要么都是双引号)
single : 必须都是单引号
double : 必须都是双引号

5. Bracket​Highlighter

括号高亮匹配,眼睛不好

6. Js​Format

JavaScript 代码格式化插件,快捷键是 ctrl+alt+f

7. Color​Picker

跨平台取色器插件,快捷键 ctrl+shift+c

8. Color Highlighter

CSS中的颜色可以实时看到什么颜色

9. TrailingSpacer

高亮显示多余的空格和Tab,在保存文件的时候自动删除他们,代码洁癖

9. Babel

支持ES6, React.js, jsx代码高亮,对 JavaScript, jQuery 也有很好的扩展

配置

打开.js, .jsx 后缀的文件;
打开菜单view, Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel),选择babel为默认 javascript 打开syntax

10. Minifier

JS, CSS压缩

11. Local History

用过 WebStorm 的应该知道,类似于本地的自动的历史版本管理,有时候能救命的东西

添加右键菜单

绿色便携版没有右键 Edit with sublime 得写注册表,我参考了网上,用ActiveX JS写了个网页脚本,用管理员权限打开IE浏览器运行这个网页
先在input框里选择你的 sublime_text.exe文件,主要是获取你的sublime文件路径,其实ActiveX里有个api是WshShell.CurrentDirectory获取当前路径,不知道为什么运行后永远是桌面路径,暂时没找到解决方法,只能退而求其次自己选择路径了
看按钮名就知道功能了,添加右键菜单的注册表和删除右键菜单的注册表

暂时先这些,如有改动我会及时更新