常用插件

有个老外推荐了他使用的一些包, 我觉得都很好, 这里也推荐一下 传送门.

我常用的大部分插件在之前的几篇 Wiki 都介绍配置过了.

如果出现快捷键失灵, 那么可能是热键冲突引起的, 此时可以 Ctrl + 反引号 打开日志控制台, 然后再按快捷键看看日志信息, 如果什么信息都没有, 说明快捷键失效了, 换一个快捷键再试试.

Sublime 配置 Markdown 写作环境

Sublime 配置 Python 开发环境

Sublime 配置 Nodejs 开发环境

以下还有一些其他挺好用的插件也是我常用的.

UTF8 转换(必备)

插件: ConvertToUTF8

这是必备插件, 没什么好说的, 安装就行了.

括号高亮

插件: BracketHighlighter

Bracket Highlighter matches a variety of brackets such as: [], (), {}, “”, ‘’, , and even custom brackets.

BracketHighlighter 插件为 Sublime Text 提供括号、引号这类高亮功能, 但安装此插件后, 默认没有高亮, 只有下划线表示, 而且还不是很醒目, 需要配置:

Preferences -> package settings -> Bracket Highlighter -> Bracket Settings – User, 然后添加如下代码:

{
    "bracket_styles": {
        "default": {
            "icon": "dot",
            "color": "brackethighlighter.default",
            "style": "highlight"
        },

        "unmatched": {
            "icon": "question",
            "color": "brackethighlighter.unmatched",
            "style": "highlight"
        },
        "curly": {
            "icon": "curly_bracket",
            "color": "brackethighlighter.curly",
            "style": "highlight"
        },
        "round": {
            "icon": "round_bracket",
            "color": "brackethighlighter.round",
            "style": "highlight"
        },
        "square": {
            "icon": "square_bracket",
            "color": "brackethighlighter.square",
            "style": "highlight"
        },
        "angle": {
            "icon": "angle_bracket",
            "color": "brackethighlighter.angle",
            "style": "highlight"
        },
        "tag": {
            "icon": "tag",
            "color": "brackethighlighter.tag",
            "style": "highlight"
        },
        "single_quote": {
            "icon": "single_quote",
            "color": "brackethighlighter.quote",
            "style": "highlight"
        },
        "double_quote": {
            "icon": "double_quote",
            "color": "brackethighlighter.quote",
            "style": "highlight"
        },
        "regex": {
            "icon": "regex",
            "color": "brackethighlighter.quote",
            "style": "outline"
        }
    }

}

然后还要针对你的 Sublime 主题进行设置, 如果使用的是默认的 Monokai 主题, 那么主题设置文件在:

• 找到 Sublime text3 安装目录下的 Packages 中的 Color Scheme – Default.sublime-package
• 将其重命名为 Color Scheme – Default.sublime-package.zip，解压找到 Monokai.tmTheme, 拉出来
• Monokai.tmTheme 有一堆 dict 标签 (注意是有 key 子标签的那列 dict), 在其同级下添加下面的代码

如果你像我一样, 使用的是 Monokai Extended 主题扩展的话, 主题的设置文件在 Data\Installed Packages\Monokai Extended.sublime-package 里.

<dict>
    <key>name</key>
    <string>Bracket Default</string>
    <key>scope</key>
    <string>brackethighlighter.default</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#FFFFFF</string>
        <key>background</key>
        <string>#A6E22E</string>
    </dict>
</dict>

<dict>
    <key>name</key>
    <string>Bracket Unmatched</string>
    <key>scope</key>
    <string>brackethighlighter.unmatched</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#FFFFFF</string>
        <key>background</key>
        <string>#FF0000</string>
    </dict>
</dict>

<dict>
    <key>name</key>
    <string>Bracket Curly</string>
    <key>scope</key>
    <string>brackethighlighter.curly</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#FF00FF</string>
    </dict>
</dict>

<dict>
    <key>name</key>
    <string>Bracket Round</string>
    <key>scope</key>
    <string>brackethighlighter.round</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#E7FF04</string>
    </dict>
</dict>

<dict>
    <key>name</key>
    <string>Bracket Square</string>
    <key>scope</key>
    <string>brackethighlighter.square</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#FE4800</string>
    </dict>
</dict>

<dict>
    <key>name</key>
    <string>Bracket Angle</string>
    <key>scope</key>
    <string>brackethighlighter.angle</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#02F78E</string>
    </dict>
</dict>

<dict>
    <key>name</key>
    <string>Bracket Tag</string>
    <key>scope</key>
    <string>brackethighlighter.tag</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#FFFFFF</string>
        <key>background</key>
        <string>#0080FF</string>
    </dict>
</dict>

<dict>
    <key>name</key>
    <string>Bracket Quote</string>
    <key>scope</key>
    <string>brackethighlighter.quote</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#56FF00</string>
    </dict>
</dict>

配好后的效果如下图:

代码提示、自动补全和代码跳转

Update: Forget about SublimeCodeIntel and use the new CodeComplice package instead.

注意, 这类全局代码提示插件和那种单独语言的代码提示是相冲突的, 如 Anaconda、NodeJs 等.

Sublime 默认是只提示当前文件, 这里的代码提示指的是全局代码提示.

插件: SublimeCodeintel (已不推荐使用, 见上面的 Update).

该插件同时支持代码提示、自动补全和代码跳转三个功能, 非常强大.

另外, 还有一些插件具有单独的功能, 如 All Autocomplete 支持全局代码提示, 而 CTags 支持代码跳转;

当然, 如果你的 SublimeCodeintel 能正常工作, 你是不需要 All Autocomplete 和 CTags 的.

SublimeCodeintel 需要设置一下才能使用, 官网上说要配 ~/.codeintel/config, 经验证, 这是比较老的方式, 新的已经没有这个文件了 (坑爹啊, 为什么官网不更新!!), 新的配置说明可以参考: CodeComplice.

首次使用需要配置用户设置后才生效, 选择 Preferences -> Package Settings -> SublimeCodeIntel -> Setting Default，将其内容全部复制到 Setting User 中;

将 JavaScript 为例, 将 codeintel_language_settings 的 JavaScript 改为下面这样:

"JavaScript": {
    "codeintel_scan_extra_dir": [],
    "codeintel_scan_exclude_dir":["/build/", "/min/"],
    "codeintel_scan_files_in_project": true,
    "codeintel_selected_catalogs": ["jQuery"]
},

代码跳转

插件: CTags

由于 SublimeCodeintel 会和其他的代码提示插件冲突, 所以有可能你不会用到 SublimeCodeintel, 这时就需要另一款代码跳转插件了, 那就是 CTags.

CTags 插件借助于 tags 文件, tags 文件能被编辑器或其它工具用来快速查找定位源代码中的符号 (tag/symbol), 如变量名, 函数名等.

生成 tags 文件需要借助工具 Ctags, 它是用来遍历源代码文件生成 tags 文件的, 去官网下载对应的系统版本, 然后解压放到任意目录.

然后还要在 Sublime 的 CTags 插件中配置 Ctags 工具的路径, 打开 CTags 设置文件 (从 Default 拷贝一份到 User), 找到其中的 command 选项, 配上你的 Ctags 工具全路径, 如: D:\\ctags58\\ctags.exe (exe 后缀可省略).

还可以将 Ctags 工具路径加入系统的环境变量, 那就不需要配这个选项了.

要使用时, 侧左栏的工程/项目目录上右键执行 CTags: Rebuild Tags 菜单项, 然后就会发现工程/项目目录里多了两个文件 .tags 和 .tags_sorted_by_file, 此时, CTags 插件可以正常工作了; 选中一个函数, 右键打开 Navigate to Definition 菜单项并执行, 就会发生跳转, 还可以跳回去.

手动生成 tags 文件: 命令行下进入工程/项目目录, 执行 ctags -R -f .tags, 这样会少生成 .tags_sorted_by_file 文件, 但效果是一样的 . . .

代码规范检查

插件: SublimeLinter

SublimeLinter 支持全语言, 但不能单独使用, 需要额外下载插件包, 如:

• SublimeLinter-csslint
• SublimeLinter-jshint
• SublimeLinter-contrib-htmlhint
• SublimeLinter-contrib-pylint

同时系统中也需要安装对应的 lint, 如 npm install -g jshint.

如果只想使用某个单独语言的代码规范检查, 可以单独安装, 如在 Sublime 配置 Python 开发环境 及 Sublime 配置 Nodejs 开发环境 中介绍过的 Pylint 和 JSHint.

符号对齐

Update: AlignTab: A much more powerful version of the Alignment package. Supports regexes and table mode.

AlignTab 预置了一些对齐符号, 如等号, 使用方法: 选中要对齐的代码块, 右键 -> Align By, 选择按什么符号进行对齐.

同时 AlignTab 还支持自定义符号对齐, 如 + 号, 使用方法, 选中要对齐的代码块, ctrl + shift + p 呼出命令栏, 输出 Live, 选择弹出来的 Aligntab: Live Preview Mode, 这是 AlignTab 的正则模式, 选择后, Sublime 下方会出现正则输入栏, 在里面输入 ‘\+’ (因为 + 号是正则表达式, 所以要输入反斜杠转义), 就可以看到效果了.

插件: Alignment (只支持等号对齐, 已不推荐使用, 见上面的 Update).

Alignment 使用详解

HTML/XML 代码格式化

插件: Tag

Update: 该插件可以考虑用下面的 HTML-CSS-JS Prettify 替代.

这个插件主要用来进行 HTML/XML 代码格式化, 我一般习惯使用和 JsFormat 相同的快捷键.

插件设置 -> 按键绑定 - 用户, 添加一行:

{
    "keys": ["ctrl+k", "ctrl+c"],
    "command": "tag_indent_document",
    "context": [{
            "key": "selector",
            "operator": "equal",
            "operand": "text.html,text.htm,text.xml,text.xsl"
        }]
}

HTML/CSS/JS 格式化

插件: HTML-CSS-JS Prettify

这个插件同时支持 HTML、CSS 和 JS 的代码格式化, 我没使用过, 听说还行, 如果可以的话, 那么可以用来替换 Tab 和 JsFormat 这两个插件了.

Refrences: Sublime Text2 格式化 HMTL/CSS/JS 插件 HTML-CSS-JS Prettify

使用 Sublime Text 3 的 HTML-CSS-JS Prettify 插件格式化代码

sublime text 3 插件: HTML-CSS-JS Prettify

快速注释

插件: Doc​Blockr

这个插件也不需要什么设置, 安装好即可用, 类似 vs 上 tab 键补全注释功能.

按模板快速新建文件

插件: SublimeTmpl

如其名, 无须多解释 . . .

Emmet

插件: Emmet

就是以前的 Zen Coding, 方便编写 HTML, 可说是前端必备, 打算单独弄篇 Wiki.

文件提示

插件: Auto​File​Name

这个插件也是前端用的多, 例如写 CSS 的时候, 如 background:url(../img/njpg.png) no-repeat;, 当写到 ../img/ 时插件就被提示这个目录下有哪些文件.

jQuery 语法提示

插件: jQuery

让 Sublime Text3 支持 jQuery 语法提示, 这个插件不需要设置, 安装后即能使用.

HTML5 语法提示

插件: HTML5

让 Sublime Text3 支持 HTML5 语法提示, 这个插件不需要设置, 安装后即能使用.

Sass 语法提示

插件: Sass

让 Sublime Text3 支持 Sass 语法提示, 这个插件不需要设置, 安装后即能使用.

常用快捷键

全部快捷键