sublime text2如何安装插件

对于前端开发，最好使用JetBrains WebStorm编辑器(单纯是神器)或vim(超级神器)，但在编写小型demo时，有时可以考虑使用子文本。因为JetBrains WebStorm太慢，占用大量内存。

我之前装的是Sublime Text2，今天装了Sublime Text3，把相关的知识整理了下，适合新手看。非新手可以直接看第四部分——四、插件推荐 （里面是我精心挑选的插件）看有你需要的插件不，或者您可以留言推荐其他好的插件。：-）

一、Sublime Text 3 注册码

1、Sublime Text 3 3126 注册码

2、

二、包管理器安装方法

打开sublime text 3，按ctrl+~

或者菜单View > Show Console

打开命令窗口，粘贴这个网站中的代码并回车即可。

Pa

三、安装插件

1、快捷键 Ctrl+Shift+P（菜单 – Tools – Command Paletter），输入 install 选中Install Package并回车；

Pa

2、输入或选择你需要的插件回车就安装了（注意左下角的小文字变化，会提示安装成功）。

Pa

四、插件推荐

1、Browser Refresh 将写好的代码通过打开浏览器预览

有一点需要注意的是安装完该插件后，点击如下图红色方框所圈出的地方后

Pa

在里面输入

[

{ "keys": ["ctrl+shift+enter"], "command": "open_in_browser" }

]

以后就可以直接ctrl+shift+enter预览写好的代码了。

2、HTML-CSS-JSPrettify 格式化代码

具体介绍可看这里：使用SublimeText3的HTML-CSS-JSPrettify插件格式化代码

不过在这里补充一点就是格式化代码可使用快捷键ctrl+shift+H，不需要像文章中介绍的那么麻烦；

3、Better Completion

javascript ,jquery , Bootstrap 等js库的自动补全。该插件的特点就是可以自定义配置需要自动补全的库。安装完以后它的配置文件可以配置自己需要补全的库；

官网说明：

这里提醒下，安装完后需打开用户自定义设置（见下图红色圆圈圈出的部分）并粘贴

Pa

如下代码:

{ // ——————–

// sublime-better-completions-Package (sbc package)

// ——————–

// API files is contains the *keyword* such as `html`, `jquery`, `myglossary` with lowercase as filename `sbc-api-${filename}.sublime-settings` place in `/packages/User/` (your own) or `/packages/${this-package}/sublime-completions/` (package build-in).

// After you enable, disable or added new your own completions, you might need restart your Sublime Text Editor.

//

// Your own setting file “ need to place in `/packages/User/` and contains all your api setting property that you want to enable.

//

// ——————–

// APIs Setup

// ——————–

// `true` means enable it.

// `false` means disable it.

"completion_active_list": { // build-in completions

"css-properties": false, "gruntjs-plugins": false, "html": false, "lodash": false, "javascript": true, "jquery": true, "jquery-sq": true, // Single Quote

"php": false, "phpci": false, "sql": false, "twitter-bootstrap": false, "twitter-bootstrap-less-variables": false, "twitter-bootstrap3": false, "twitter-bootstrap3-sass-variables": false, "underscorejs": false, "react": false, // Your own completions?

// ~/Library/Application Support/Sublime Text 3/Packages/User

"my-angularjs": false, // ~/Library/Application Support/Sublime Text 3/Packages/User

"my-glossary": false, // ~/Library/Application Support/Sublime Text 3/Packages/User

"my-html": false, // ~/Library/Application Support/Sublime Text 3/Packages/User

"my-javascript": false

}

}

上面如果你觉得用的到，可以将对应的false改成true；

4、BracketHighlighter 高亮显示[], (), {}, "", '', #!xml <tag></tag>甚至是自定义的字符，方便查找；

Pa

官方地址：

官方文档：

另外这个插件我安装几次都失败了，刚开始报 pygments' is not currently installed错误，后来又安装几次发现 pygments又安装成功了，但又 报Unable to download python-markdown错误；这个应该是网络不好，大家可以开代理进行安装下载；我后来重新安装几次又好了。

5、AutoFileName

快捷输入文件名，文件路径自动提示的。自动完成文件名的输入，如图片选取，输入”/”即可看到相对于本项目文件夹的其他文件

6、SublimeLinter 代码校验工具

具体可看这篇文章：代码校验工具 SublimeLinter 的安装与使用

里面介绍了javascript语法检查SublimeLinter-jshint及css语法检查 SublimeLinter-csslint；

7、Emmet 必备的神器插件

Pa

输入“!”或“html:5”，然后按Tab键便可自动生成模版；

Pa

输入h1{foo}和a[href=#]，就可以自动生成上述代码；

大家具体可看这篇文章：Emmet：HTML/CSS代码快速编写神器

8、sublimeCodeIntel 代码自动补全

直接安装即可(我的直接安装重启即可使用)，如正常安装后还是使用不了可以参考只针对sublimecodeintel安装好之后不能正常完成补全的问题

9、livereload 解放F5(刷新)的开发工具

具体可见这篇文章： LiveReload一款解放F5的开发工具

以前我在这篇文章中提到过browser-sync也能实现该功能（它其实不光只有实时刷新功能，还有BrowserSync会在多个浏览器中同步滚动条位置，表单行为和点击事件功能具体见BrowserSync，迅捷从免F5开始），但是感觉它太麻烦了，需要打开node，当然有其他更好的单独软件（ 【F5】 Web开发免刷新）可以实现实时刷新的功能（F5使用示范）；

10、livestyle sublime text3和chrome双向实时编辑预览CSS

具体可见sublime text3和chrome双向实时编辑预览CSS

当然使用chrome的Workspace也能够实现该功能，具体见：使用chrome的Workspace实现js、css文件调试即时保存

我装的插件汇总

文/该帐号已被查封 (简书）