教程指导

SublimeText3插件整理

SublimeText3是一款轻量级代码编辑器，自定义功能强大。比如：设置常用操作习惯(快捷键等)、UI主题(可自定义)、智能提示、代码判断、集成各种工具、可自己编写插件等。

插件安装准备

  • 先安装编辑器，具体见官网 ‘Sublime Text3’ ,以及注册码之类的

  • 准备插件安装，需依赖Package Control

  • 安装Package Control

可以参考: https://packagecontrol.io/installation#st3

一：简单安装

使用Ctrl+`快捷键或者通过View->Show Console菜单打开命令行，粘贴如下代码：

1
import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

安装成功后，就可以在Preferences菜单下看到Package Settings和Package Control两个菜单。
顺便贴下Sublime Text2 的代码：

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')

二：手动安装

可能由于各种原因，无法使用代码安装，那可以通过以下步骤手动安装Package Control：

  1. 点击Preferences > Browse Packages菜单
  2. 进入打开的目录的上层目录，然后再进入Installed Packages/目录
  3. 下载Package Control.sublime-package并复制到Installed Packages/目录
  4. 重启Sublime Text。

插件安装

常用命令：

  • 安装插件： Ctrl+shift+p -> 输入 ‘inp’ 确认(Package Control:Install Package) -> 输入插件名称(emmet)确认即可

  • 查看已安装插件： Ctrl+shift+p -> 输入 ‘lip’ 确认(Package Control:List Package) -> 所有已安装插件列表，如具体点击某个插件跳转至当前插件安装目录并选中

  • 删除已安装插件： Ctrl+shift+p -> 输入 ’remp’ 确认(Package Control:remove Package) -> 所有已安装插件列表，选中点击某个插件(即可执行删除)

  • 禁用已安装插件：Ctrl+shift+p -> 输入 ’dip’ 确认(Package Control:disable Package) -> 所有已安装插件列表，选中点击某个插件(即可禁用)

  • 启用已安装插件：Ctrl+shift+p -> 输入 ’enp’ 确认(Package Control:enable Package) -> 所有已禁用插件列表，选中点击某个插件(即可启用)

安装及注册可参考另一篇文章：《SublimeText3-3080安装及各种插件教程》

插件列表

  1. 3D Tool (Async Burst-Mode)：3D是用于描述基于扩展突发模式规范的异步电路的工具。
  2. All Autocomplete：扩展升级自动完成以在当前窗口的所有打开文件中查找匹配项
  3. ASCII Decorator：将选定的文字转换成由ASCII艺术组成的横幅。
  4. AutoFileName：自动提示路径及文件名
  5. Autoprefixer：css前缀
  6. Better Completion：工具配置自动提示
  7. Can I Use：是用于检查CSS属性支持的高级浏览器
  8. ChineseLoremIpsumL：中文文字实例
  9. ChineseTranslator：中英翻译(互译：主要是句子)
  10. Codec：编码转换->支持安全哈希/消息摘要，如MD5，SHA-1，SHA-256，SHA-512，Base64，Base32，Base16，URL编码，引用可打印，JSON，XML，Punycode，IDNA等的编码/解码
  11. CodeFormatter：支持多种代码格式化，如PHP、JavaScript/JSON、HTML、CSS、SCSS、Python、Visual Basic/VBScript、Coldfusion/Railo/Lucee
  12. ConvertToUTF8：GBK，BIG5，EUC-KR，EUC-JP，Shift_JIS等编码转换
  13. CSS Format：CSS/SASS/SCSS/LESS代码转换为Expanded，Compact或Compressed格式
  14. CSS Snippets：css代码判断
  15. CSScomb: css风格化(更具配置)，如：样式属性按字母排序
  16. Ctranslator tool：翻译工具即单词或词语(Ctrl+alt+h)
  17. DocBlockr: Javascript，PHP，CoffeeScript，Actionscript，C＆C ++中编写DocBlock注释
  18. Emmet：Web开发人员的基本工具包(大部分编辑器的插件)，HTML和CSS等代码快捷编辑（可参考：https://emmet.io/及http://emmet.evget.com/）
  19. FileDiffs: 显示当前文件或当前文件中的选择，剪贴板，另一个文件或未保存的更改之间的差异。
  20. Format JSDoc @params : 格式化JSDoc @param 块
  21. Git：集成git工具
  22. GitGutter：监控git对比文件变化
  23. Handlebars: Handlebars语法支持或代码着色
  24. Highlight：用于将突出显示的代码导出为RTF或HTML(直接导出或浏览器展示选中代码)
  25. HTML Snippets：html代码片段
  26. HTML-CSS-JS Prettify：HTML、CSS、JavaScript和JSON等代码格式化(依赖node.js)
  27. Http Requester：将所选文本的HTTP请求用作URL +标头。遵循 REST APIs（https://packagecontrol.io/packages/Http%20Requester）
  28. iLorem: 多语言文字实例，如英语/波斯语（فارسی）/ italian / polski / spanish语言编写的片段
  29. JavaScript & NodeJS Snippets： javaScript和NodeJS片段提示
  30. JavaScript Completions：Javascript智能提示
  31. JavaScript Console: 支持JavaScript和CoffeeScript(控制台打印的多种方法)
  32. JavaScript Refactor：转到变量或函数方法
  33. JavaScript Snippets：JavaScript代码片段
  34. JS Snippets: js代码片段
  35. JsFormat：js/json格式化可配置格式风格
  36. Keymaps：快捷键映射(快熟查找遗忘快捷键)
  37. LoremIpsum：默认英文文字实例
  38. Markdown Preview：快速导出html或不同风格在浏览器预览
  39. MarkdownEditing：markdown着色及语法
  40. Monokai - Spacegray：Monokai主题 - Spacegray风格（黑色八十年代）的背景
  41. MySQL Snippets： Mysql代码片段
  42. Nodejs：nodejs代码片段及语法提示
  43. Open: 打开文件更快更容易：动态浏览或静态文件列表
  44. Package Control: 全功能的包管理器(其他包均依赖)
  45. PlainTasks：todo文档着色及任务状态管理参考
  46. QuoteHTML：将HTML代码段引用为字符串
  47. Search Stack Overflow：在Stack Overflow搜索问题(选中文本或输入文本)
  48. Seti_UI：Seti_UI主题(优点比如文件小图标)
  49. SideBarEnhancements：sublime编辑器侧边栏的增强
  50. SublimeCodeIntel: 全功能的代码智能和智能自动完成引擎(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.)
  51. SublimeLinter: linter插件，用于检查风格或编程错误的代码。 Linters可用于大多数语法，从Python到HTML。以下是语法及其短语列表：(Python->flake8,JavaScript->jshint,CSS->csslint,Ruby->ruby-wc)可参考
  52. SublimeREPL：SUblime交互式编译环境及在编辑器内部即可编译(Clojure, CoffeeScript, F#, Groovy, Haskell, Lua, MozRepl, NodeJS, Python + virtualenv, R, Ruby, Scala…)等程序
  53. SyncedSidebarBg：根据活动视图的配色方案更改侧栏主题(及活动区与侧栏同步)
  54. Terminal：从当前文件或根项目文件夹启动终端
  55. Theme - Spaceblack: 一个迷你的黑色主题
  56. Themr：UI主题选择器(即快速切换主题)
  57. TrailingSpaces: 突出显示尾随空格并将其删除！
  58. Trimmer: 清理空白
  59. UMD snippets: UMD代码片段
  60. Vue Syntax Highlight: Vue语法高亮
  61. VueFormatter：Vue代码格式化
  62. Vuejs Complete Package：一套完整的片段和语法语法突出显示
  63. Vuejs Snippets：Vuejs 代码片段
  64. floobits : 代码预览（不同IDE或远程用户-查看）

其他插件查找方法

  • 打开https://packagecontrol.io官网
  • 在搜索框输入关键，如‘react’
  • 查看已搜索列表也可排序查看,如:Popularity人气
  • 点击进入查看是否支持或相关用法,如：React​JS
  • 如果确认要安装此插件，即编辑器Ctrl+Shift+p->inp->插件名称‘React​JS’->确认即可

自定义主题

图解

Emmet(18)

emmet

Http Requester(27)

Http Requester