从去年刚刚接触编程到现在已经一年时间过去了,用sublime Text的时间也有大半年了。用sublime Text也是因为一个cordova项目,从刚开始只用作txt文本编辑器,到现在每天都用它来敲代码。感觉自己越来越离不开他它,所以现在对常用的插件做个记录和分享。

package control

要在sublime Text上安装插件,那就离不开package control,它是插件的安装器,其实自身也是个插件。

安装方法:从菜单 View - Show Console 或者 ctrl + ~ 快捷键,调出 console。将以下 Python 代码粘贴进去并 enter 执行,不出意外即完成安装。以下提供 ST3 和 ST2 的安装代码:(ios和window一样。)

Sublime Text 3:

import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; 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 = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; 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')

插件安装方法

  • 按下 ctrl+shift+p/command+shift+p。此时会输出一个输入框, 输入install。

  • 选择package contrl: install package 回车 ,需要稍定一会儿,右下角状态栏会显示正在连接的提示文字。

    使用sublime时注意看右下角状态栏,很多插件的提示信息都显示在这里,这个状态栏很小,初次使用的人都有可能没有注意到它

  • 如果要卸载插件, ctrl+shift+p/command+shift+p 输入 remove, 选择package control:remove package 然后再选择已安装的插件, 回车即可卸载。

    备注:如果package control 安装插件时失败了, 我们可以采用手动安装的方式, 在google上去搜索插件, 下载插件的源代码。在sublime的菜单栏点击 preferences->Browse package.. 此时会打开插件目录。然后把你下载的插件源代码复制进去就可以

  • 可以通过这个网址https://packagecontrol.io/来查找自己喜欢的插件,了解插件的详细信息。

常用插件推荐

通用类

1. Sidebar Enhancements
增强侧边栏的插件

屏幕快照 2016-08-03 22.03.04.png

2. All Autocomplete

Sublime Text 默认的 Autocomplete 功能只考虑当前的文件,而 AllAutocomplete 插件会搜索所有打开的文件来寻找匹配的提示词;

3. Auto Filename 自动补全文件路径

4. clickableURLs url可点击

5. DeleteBlankLines 删除空白行

快速鍵:刪除選取範圍內的空白行

Mac:Ctrl + Alt + Delete

Win/Linux:Ctrl + Alt + Backspace

快速鍵:刪除剩餘的空白行

Mac:Ctrl + Alt + Shift + Delete

Win/Linux:Ctrl + Alt + Shift + Backspace

6. Insert Nums 用于添加可递增的数字

代码类

1. Sublime Code Intel 实现代码智能提示和自动完成功能。

目前该插件支持以下语言:

JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP

PHP:按住alt+鼠标左键,可以实现自定义函数之间的跳转,方便查找和修改函数内容和读写代码!

2. SublimeLinter 代码校验工具,检查代码语法是否有错误,并提示。

详细步骤

3. HTML-CSS-JS Prettify HTML+CSS+JAVASCRIPT+JSON快速格式化

快捷键:Ctrl+Shift+H/command+shift+H

4. Emmet 可以快速的编写 HTML、CSS 以及实现其他的功能

详细语法

5. ConvertToUTF8

为了支持sublime显示非utf8,如 GBK 等编码的内容

支持 GBK, BIG5, EUC-KR, EUC-JP, Shift_JIS 等编码的插件

6. Autoprefixer 自动添加厂商前缀

使用方法:按 Ctrl + Shift + P,然后选 Autoprefix CSS 或者设置键盘快捷键 – Preferences > Key Bindings – User

[
{ "keys": ["ctrl+alt+x"], "command": "autoprefixer" }
]

配置:

打开选项Preferences > Package Settings > Autoprefixer > Settings – User

默认设置:过去2个版本(如果 Chrome 30 是最新版的,这款插件自动选 Chrome 28 – 30 的版本来判断否需要前缀)

配置参数:

last n versions 支持过去n个版本
n% 全球使用率大于百分之 n
ff > 20 和 ff >= 20 Firefox 20 或者更新
none 消灭前缀

7. DocBlockr 注释自动完成

支持js,php等多种编程语言的注释自动补全,输入/**回车即可自动补全注释代码,而去支持自动补全注释信息,如author等。

20150418165435271753093870.jpg

8. Terminal 从当前文件或根项目文件夹中启动终端

快捷键是Command+Shift+T,默认是调用自带终端,可以修改为iterm,要修改插件的设置如下:

{
// The command to execute for the terminal, leave blank for the OS default
// On OS X the terminal can be set to iTerm.sh to execute iTerm
"terminal": "iTerm.sh",

// A list of default parameters to pass to the terminal, this can be
// overridden by passing the "parameters" key with a list value to the args
// dict when calling the "open_terminal" or "open_terminal_project_folder"
// commands
"parameters": []
}

9. Bracket Highlighter 代码匹配

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

使用:点击对应代码即可

10. SublimeREPL

功能:允许你在 Sublime Text 中运行各种语言(NodeJS , Python,Ruby, Scala 和 Haskell 等等)

详情链接

11.JavaScript Next 完美支持ECMAScript 6

JavaScript Next 提供了比默认JavaScript Package更好的语法高亮,而且他完美支持ECMAScript 6。

建议完全使用 JavaScript Next代替JavaScript Package。

12. CSS3 CSS3语法高亮

默认安装的Sublime Text对CSS3的支持让人抓狂,帧动画?别开玩笑了你只会看到一片白色的纯文本一样的代码。

事实上不光CSS3,我建议用CSS3 Package完全替代原来的CSS Package来完成语法高亮。把原来的禁用了吧

Mac:       cmd+shift+p  -> Package Control: Disable Package -> CSS
Linux/Win: ctrl+shift+p -> Package Control: Disable Package -> CSS

13. Color Highlighter CSS颜色高亮

Color Highlighter这个插件会检测CSS文件中的颜色码,不论是Hex码或者RGB码都能很好的显示。

Color Highlighter能够设置成用背景色或者边框提示颜色,我一般在Settings里做这样的设置:

{
"ha_style": "filled",
"icons": false
}
//"Filled", "outlined", "none", "colored text" in ST2.
//"Filled", "outlined", "none", "underlined" (solid, strippled, squiggly), "colored text" in ST3.

效果如下:

Color_Highlighter.jpg

14. GitGutter:

实时显示当前工作区的文件与以下四种的区别:

Compare against HEAD(默认选项)
Compare against particular branch
Compare against particular tag
Compare against specific commit

如果选择默认的第一个选项,就可以实时看到当前的工作区(workplace)相对于最近一次提交(HEAD)的修改。若出现无法工作情况,请先修改用户配置,Preferences > Package Settings > GitGutter > Settings – User

mac配置:

{
"git_binary": "/usr/local/bin/git",
"non_blocking" : "true",//解决sublime卡顿问题
"live_mode" : "false"//解决sublime卡顿问题
}

windows配置:

{
"git_binary": "C:/Program Files (x86)/Git/bin/git.exe",
}

15. ESLint

用于检测JavaScript代码质量工具

安装

使用此插件之前要先全局安装eslintnpm install -g eslint

使用:

  1. 右键选择ESLint或者使用快捷键:Ctrl + Alt + e (Cmd + Option + e on OSX)

  2. F4: 跳转到下一条错误行;Shift + F4 : 跳转到上一条错误行

配置:

mac:

{
"node_path": "/usr/local/bin",
"node_modules_path": "/usr/local/lib/node_modules",
"config_file": "/Users/mac/code/personal/eslint/.eslintrc.yml"
}

windows:

{
"node_path": "C:/Program Files/nodejs",
"node_modules_path": "%APPDATA%/npm/node_modules",
"config_file": "/path/to/.eslintrc.js"
}

16. sublime Tmpl 快速生成文件模板

快捷键:

ctrl+alt+h //html
ctrl+alt+j //javascript
ctrl+alt+c //css
ctrl+alt+p //php
ctrl+alt+r //ruby
ctrl+alt+shift+p //python

写作类

1. OmniMarkupPreviewer

Sublime Text 内 Markdown 标签页点击鼠标右键 - 选择Preview Current Markup in Browser。 或者使用快捷键 (OSX ⌘+⌥+O; Windows, LinuxCtrl+Alt+O) 来预览。

配置:Sublime Text > Preferences > Package Settings > OmniMarkupPreviewer > Settings - User

{
"renderer_options-MarkdownRenderer": {
"extensions": ["tables", "fenced_code", "codehilite"]
}
}

2. MarkdownEditing

MarkdownEditing是Markdown写作者必备的插件,它可以不仅可以高亮显示Markdown语法还支持很多编程语言的语法高亮显示。

快捷键:

  • Option + Command + V - 粘贴为链接格式;
  • Shift + Command + K - 插入图片。

其他

1. 更换Sublime Text程序图标

不仅主题可以更换,图标也可以。在Dribbble上有大量重新设计的Sublime Text精美图标。更换方法:

  1. 下载一个图标,有.icns格式的最好。如果没有,用iConvert转换之。
  2. 终端执行:open /Applications/Sublime\ Text.app/Contents/Resources/
  3. 替换Sublime Text 3.icns或Sublime Text 2.icns文件。

转载请标注原文地址