首页 > 技术文章 > 我使用的Sublime插件及配置

gymmer 2016-10-16 18:03 原文

我使用的Sublime插件及配置

增强型插件

Package Control

快捷键ctrl+~,调出命令行,运行:

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; 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)

Terminal

方便地调出CMD。

  • 快捷键Ctrl+Shift+T

  • 在Windows下默认会打开Windows PowerShell, 可配置为原生CMD:
    配置:preference–>Package Settings–>Terminal–>Terminal Settings-users

{
    "terminal": "C:\\WINDOWS\\system32\\cmd.exe",
    //"terminal": "C:\\Program Files\\cmder\\Cmder.exe",
    "parameters": ["/START", "%CWD%"]
}

Sidebar Enhancements

增强侧边栏。

AdvancedNewFile

快速新建文件。

  • 可以指定目录,若目录不存在,也会新建该目录。

  • 使用:Ctrl+Alt+N,输入文件夹以及文件名,回车,子目录下的文件新建完成。

Browser Refresh

保存文件自动刷新浏览器。

配置:Preferences > Package Settings > Browser Refresh > Key Bindings – Users

{  
    "keys": ["ctrl+s"], "command": "browser_refresh", "args": {  
        "auto_save": true,  
        "delay": 0.0,  
        "activate": true,  
        "browsers" : ["chrome"]  
    }  
}

Sublime功能型插件

SublimeREPL

解释器。

  • SublimeREPL 可以直接在编辑器中运行一个解释器,支持很多语言:
    Clojure, CoffeeScript, F#, Groovy, Haskell, Lua, MozRepl, NodeJS, Python, R, Ruby, Scala, shell

  • Tools->sublimeREPL->Python->选择相应模块

  • 定制快捷键:preference->Key Bindings-User

[
  {
      "keys":["f5"],
      "caption": "SublimeREPL: Python - RUN current file",
      "command": "run_existing_window_command", "args":
      {"id": "repl_python_run","file": "config/Python/Main.sublime-menu"}
  },
  {
      "keys": ["f6"],
      "caption": "SublimeREPL: Python - IPython",
      "command": "run_existing_window_command","args":
      {"id": "repl_python_ipython","file":"config/python/Main.sublime-menu"}
  }
]
  • 使用:F5:运行当前文件 F6:调出ipython命令行

SublimeCodeIntel

代码提示插件。

  • 点击 Preferences->Browse Packages->SublimeCodeIntel

  • 添加一个.codeintel文件夹(Windows创建.codeintel文件夹需要输入.codeintel.

  • 在文件夹里面添加一个config文件:

  {
      "PHP": {
          "php": '/usr/bin/php',
          "phpExtraPaths": [],
          "phpConfigFile": 'php.ini'
      },
      "JavaScript": {
          "javascriptExtraPaths": []
      },
      "Perl": {
          "perl": "/usr/bin/perl",
          "perlExtraPaths": []
      },
      "Ruby": {
          "ruby": "/usr/bin/ruby",
          "rubyExtraPaths": []
      },
      "Python": {
          "python": '/usr/bin/python',
          "pythonExtraPaths": []
      },
      "Python3": {
          "python": '/usr/bin/python3',
          "pythonExtraPaths": []
      }
  }

SublimeLinter

行内语法检测插件。

支持: C/C++, Java, Python, PHP, JS, HTML, CSS, etc.

版本控制

Git

  • 快捷键Ctrl+Shift+P,输入Git命令,在下拉框中选择即可。

  • 特别的,输入git diff,还可以比较文件差异。

GitGutter

在gutter区域显示一个标记,标记任何你在代码中做的编辑,添加或删除。

SVN

  • 快捷键Ctrl+Shift+P,输入Git命令,在下拉框中选择即可

  • 或者在相应文件上右键,选择SVN命令

  • 或者在侧边栏的文件、文件夹上右键,选择SVN命令

Modific

标记代码的改变,支持git和svn。

除了高亮变化,还可以通过按Ctrl + Alt + D来查看或比较当前的代码与最近提交的代码之间的区别。

颜色、匹配

ColorPicker

取色器改变颜色。

  • 使用方法: Ctrl + Shift + C,快捷键有冲突,需修改。

  • 可以通过Ctrl+Shift+P:搜索Colorpicker调用。

Color Highlighter

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

  • Color Highlighter能够设置成用背景色或者边框提示颜色,

  • 配置:preference->Package Setting->Color Highlighter->Settings User

{
  "enabled": true,
    "ha_style": "filled",
    "icons": false
}
  • Color Highlighter有自带的Color Picker。在CSS文件中选中颜色,右键菜单中选择Choose Color

Gutter Color

在gutter显示css文件的颜色。需依赖imagemagick,没配置成功。

BracketHighlighter

在gutter上显示与鼠标位置匹配的括号、引号、HTML标签

自动补全

AutoFileName

文件路径自动提示。

AllAutocomplete

搜索全部打开的标签页。

Doc Blockr

生成优美的注释。

简单用法:输入/**并且按下Tab键的时候,会自动解析任何一个函数并且为你准备好合适的模板。

HTML与标记语言

Emmt

代码快速补全。

  • 有一套Emmt语法,可以快速创建HTML标签。

  • 按下Tab键,Emmet就能把一个缩写展开成一个HTML和CSS代码块。

HTML-CSS-JS Prettify

HTML-CSS-JavaScript 代码格式化。

这个代码格式化插件可以代替很多其他格式化插件,如TAG,CssComb和JSFormat。

IconFont

字体图标补全。

  • 为许多流行的图标字体提供了snippet(代码片段),比如 FontAwesome, PaymentFont,Typicons 和 Github Octicons。

  • 它的工作原理类似于常规的HTML代码段,每个图标的缩写将扩展成完整的class和HTML代码。

Bootstrap 3 Snippetes / bs3

Bootstrap 3 代码片段

  • 配置:Preferences->Settings-User:

"auto_complete_triggers": [{"selector": "text.html", "characters": "<"},{"selector": "text.html", "characters": "bs3"}]
  • 使用:代码片段触发字符为bs3

MarkDown Editing

Markdonw最好的插件了:语法高亮,缩略词,自动补全,配色方案。

MarkDown Preview

以用浏览器浏览 Sublime Text 中编写的 markdown文件。

  • 配置浏览器路径:* Preferences->Package Settings->Markdown Preview->Setting User*

{
    "browser" : "C:\\Users\\gymmer\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe"
}
  • 设置快捷键:Preferences->Key Binding User

{ 
    "keys": ["f3"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"}
}
  • 使用:在Markdown文件页面按下快捷键

CSS

AutoPrefixer

CSS文件中浏览器私有属性前缀补全 。

  • 需依赖Node.js。

  • 使用:在输入CSS3属性后(冒号前)按Tab

  • 配置:Preferences>package setting>AutoPrefixer>Setting-User

{
    "browsers": ["last 7 versions"],
    "cascade": true,
    "remove": true
}

或者

{
    "browsers": ["last 2 versions","last 2 Chrome versions",">5%","Firefox >= 20","ie 6-8","iOS 7"]
}
  • 快捷键绑定:Preferences>Key Bindings-User

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

CSScomb

CSS属性排序。

使用:选中要排序的CSS代码,右键菜单选择Run CSScomb

Goto CSS Declaration

快速跳转到CSS定义位置。

  • 选中HTML文件中的class或id名,右键菜单选择Go To CSS Declaration

  • 注意对应的css文件要同时打开才行。

Inc Dec Value

调整数字、日期、十六进制颜色。

  • 将光标放在数字的右边,然后按Alt +↑增加或Alt +↓减少。也可以使用鼠标滚轮。

  • 允许你同时增加或减少数字,即使他们在不同的行。

Less

Less语法高亮

Less2css

自动编译less文件为CSS文件

  • 需依赖Node.js环境

  • npm install -g less

  • npm install -g less-plugin-clean-css

  • npm install -g less-plugin-autoprefix

JavaScript

jQuery

jQuery的API代码片段。

JavaScript Completions

JS最基本的API快查片段。

Nodejs

node代码提示。

Minify

HTML、CSS、JS压缩

  • 需依赖Node.js环境

  • npm install -g clean-css uglifycss js-beautify html-minifier uglify-js minjson svgo

  • 使用:在相应文件上右键,选择Minify。会自动生成一个同名的.min文件

Python

Anaconda

配置:preference->Package Setting->Acaconda->Settings User

[
  {"python_interpreter": "C/Python27/python.exe"}
]

Djaneiro

Django插件。

Python PEP8 Autoformat

代码格式更正。

快捷键ctrl+shift+R

Python点操作符智能提示

复制Python.sublime-package文件,到C:/Program Files/Sublime Text 3/Packages/

中文与编码

ChineseLocalization

Sublime中文汉化包。

ConvertToUTF8

GBK编码兼容。文件转码成utf-8.

  • 可以编辑并保存目前编码不被 Sublime Text 支持的文件。

  • 使用:安装插件后自动转换为utf-8格式。

IMESupport

输入中文时,候选词跟随鼠标.

GBK Encoding Support

中文识别

  • Sublime Text可识别UTF-8格式的中文,不识别GBK和ANSI,因此打开很多含中文的文档都会出现乱码。

  • 通过安装插件GBK Support,来识别GBK和ANSI。

有用的配置

添加到右键菜单

修改sublime text3 注册右键菜单.reg,将路径换为sublime_text.exe所在路径。注意,路径中是双斜杠\

验证License

配置:打开Help -> Enter License,粘贴下列代码:

—– BEGIN LICENSE —–
Michael Barnes
Single User License
EA7E-821385
8A353C41 872A0D5C DF9B2950 AFF6F667
C458EA6D 8EA3C286 98D1D650 131A97AB
AA919AEC EF20E143 B361B1E7 4C8B7F04
B085E65E 2F5F5360 8489D422 FB8FC1AA
93F6323C FD7F7544 3F39C318 D95E6480
FCCC7561 8A4A1741 68FA4223 ADCEDE07
200C25BE DBBC4855 C4CFB774 C5EC138C
0FEC1CEF D9DCECEC D3A5DAD1 01316C36
—— END LICENSE ——

安装主题Brogrammer

  • 下载压缩包,解压缩

  • 重命名为Theme - Brogrammer

  • 打开Sublime包目录:Preferences -> Browse Packages

  • Theme - Brogrammer复制到包目录下

  • 配置:Preferences -> Settings - User

{
  "theme": "Brogrammer.sublime-theme",
  "color_scheme": "Packages/Theme - Brogrammer/brogrammer.tmTheme"
}

用浏览器快速打开页面

需先安装Sidebar Enhancements.
-设置快捷键:Preferences->Key Bindings - User

//chorme
{
    "keys": ["f1"],
    "command": "side_bar_files_open_with",
    "args": {
        "paths": [],
        "application": "C:\\Users\\gymmer\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe",
        "extensions": ".*"
  }
},
//IE
{
    "keys": ["f2"],
    "command": "side_bar_files_open_with",
    "args": {
        "paths": [],
        "application": "C:\\Program Files\\Internet Explorer\\iexplore.exe",
        "extensions": ".*"
    }
}

其中:

  • keys是按键。

  • application是浏览器应用程序路径,注意反斜杠的要转义。

  • extensions是匹配所有的文件后缀格式。

  • 直接按下快捷键即可

关闭自动更新

  • 配置:Preferences -> Settings-User

  • 加入这条语句:"update_check":false

  • 关闭Submine Text并重启,即不会再弹出更新提醒了

其他没用过的

Alignment:代码对齐

TrailingSpacer:高亮显示多余的空格和Tab

JavaScriptNext:ES6语法识别

YUI Compressor:压缩JS和CSS文件

Pretty JSON:格式化出漂亮的json

推荐阅读