Sublime Plugin Details

Sublime plugin

First, the installation of plug-ins

There are two ways to install:

1. Put the plug-in directly into the corresponding file package of its installation path. If you don't know where it is, you can directly open the preferences->Browse packages. After putting it in, the software will automatically detect it.

2. Use the command method to directly let the software download and install by itself. (using the package control component) (premise: install the following package control plugin first)

Press Ctrl+Shift+P to bring up the command panel, enter install, bring up the Install Package option and press Enter, then select the plugin to be installed in the list.

Download a copy: then put it in the package file package. Friends who have never used Github do not know where to download. Download ZIP. Then unzip it, put the folder into the package file package, and it can detect the package!

Code installation: Ctrl+shift+p, enter install, select package install After a few seconds, another box will pop up. Then enter the plugin keyword you want in the input box to install it! That's about it, plain and simple. The following introduces other commonly used plug-ins, and the installation method is the same!

2. Common plugins:

• package control
  • Open the console via the shortcut key ctrl+` or the View > Show Console menu, then paste the corresponding version code into it, and press Enter to install it.

For Sublime Text 3:

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())  *

For Sublime Text 2:

import  urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();  * os.makedirs(ipp)ifnotos.path.exists(ipp)elseNone;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')

Of course, sometimes if you can't install it, you can only download the installation package and put it in the package file (that is, the folder I mentioned above). If you see Package Control in Preferences → Package Settings One item, indicating that the installation was successful.

Second, the plug-in organization

1. Code finishing:

• Tag (code formatting)
  • 全选Ctrl+A，Ctrl+Alt+F
• HTMLBeautify（）
  • Format HTML.
• HTML/CSS/JS Prettify (code formatting)
  • Ability to format css html and js.
  • 注意：格式化的文件路径中不能有中文，不然会报找不到node的错误（windows下）。
• YUI Compressor（压缩JS和CSS文件）
• PHPTidy（整理与排版PHP代码）
• JsFormat（javascript格式化）
  • 格式化js代码，这个插件很有用，我们有时在网上看到某些效果，想查看是怎么实现的，但是代码被压缩过，很难阅读，不用怕，用ST2打开，按下ctrl+alt+5（这是我设置的快捷键），即可让代码还原，莫非是武林中失传已久的“还我靓靓拳”。

    注释：

• DocBlockr（代码自动注释生成）
• HtmlTidy（清理与排版你的HTML代码）
• AutoPEP8（）
  • 格式化Python代码。
• Alignment安装案例
• Alignment（代码补齐）补齐就是补齐~就像这样

 

2、代码简写：

• SublimeCodeIntel（代码提示）
  • 自动提示我们，可能要输入HTML代码内容
• snippets（自定制代码补齐机制）
  • 自定制代码补齐机制，
• Emmet（Zen Coding 代码自动补齐）
  • 通过简单的命令直接生成一大段代码！一个字又快又准，安装好插件后，使用Ctrl＋Alt＋Enter呼出ZenCoding。
    我们可以用 div#content>ul>li3>a [href="javascript:void(0);"]{Links$} 这样短短的一句话，生成下面一段代码：
    技巧：
    前端必备，快速开发HTML/CSS

输入 div.wrapper>div.header+div.main+div.footer 按下Tab，立刻变成

或者按下ctrl+alt+enter，激发zencoding控制台，可看到整个动态的过程。

 

• AllAutocomplete

• AllAutocomplete
  • 自定制代码补齐机制，

 

 

3、高亮显示：

• BracketHighlighter
  • BracketHighlighter高亮显示匹配的括号、引号和标签，BracketHighlighter这个插件能在左侧高亮显示匹配的括号、引号和标签，能匹配的 [] , () , {} , "" , '' , <tag></tag>等甚至是自定义的标签，当看到密密麻麻的代码分不清标签之间包容嵌套的关系时，这款插件就能很好地帮你理清楚代码结构，快速定位括号，引号和标签内的范围。
• TrailingSpacer（高亮显示多余的空格和Tab）

  颜色：

• ColorPicker （调色盘）
  • 在编辑CSS样式的时候，ColorPicker可以让sublime text 内置一个调色盘，调好颜色，点击OK就会在光标处生成十六进制颜色代码。

    CSS：

• CSScomb（CSS属性排序）
• CSS3_Syntax（css语法高亮）
  • 对css语法高亮的支持，view-syntax-css3选中css3就能使用css3高亮了。必须每条属性都加上分号，并且属性必须小写，不然不会高亮，有点鸡肋啊。
• Prefixr（自动加-webkit前缀）
  • 写 CSS可自动添加 -webkit 等私有词缀，Ctrl+Alt+X触发。
• Autoprefixer（自动加前缀）
  • 可以给css自动加前缀功能
• Goto-CSS-Declaration（CSS文件跳转）
  • 跳转到css文件该class的声明处，方便修改查看，如图下所示，注意对应的css文件要同时打开才行。

    编码：

• GBK Encoding Support（GBK中文编码）
  • 这个插件还是非常有用的，因为sublime 本身 不支持gbk编码，在utf8如此流行的今天，我们整站还是gbk编码，o(︶︿︶)o 唉，所以全靠这个插件了。
• GBK to UTF8（编码转换）
  • 将文件编码从GBK转换成UTF8，菜单 – File里面找。

4、文档管理：

• Nettus+ fetch （管理一些开源框架）
  • 配置文件修改，Ctrl+Shift+P输入Fetch Manage，配置文档。通过输入fetch file，搜索框架名进行导入。
• SideBarEnhancements（侧边栏增强）
• SyncedSideBar（侧边栏打开文件定位）
  • 支持当前文件在左侧面板中定位，不错。
• Hex-to-HSL-Color Hex（颜色模式转HSL颜色模式）
• advanceNewfile（面板随意添加文件）
  • 按Ctrl+Alt+N，下方输入A\B\test.css就好了，test.css这个文件出现在某个文件夹。

• Terminal
  • 当你想要打开在当前文件所在的目录的终端，这个插件可以帮助你。不过，在默认情况下，它设置按 Ctrl / Cmd + Shift + T 键的快捷方式打开终端。不过这也是打开上次关闭的文件的快捷方式，你需要修改一个快捷键来兼容两个功能

• SublimeTmpl （自定义新建文件）
  • 默认已经添加了html、css、js等常见类型的面板，按ctrl+alt+h/ctrl+alt+c/ctrl+alt+j可新建这 3钟类型的文件，快捷键在这里\Packages\SublimeTmpl\Default (Windows).sublime-keymap, 模板文件在这里\Packages\SublimeTmpl\templates，可修改。 比如下边简单的html文件
• DocBlockr（代码建立文档）
  • DocBlockr 可以使你很方便地对代码建立文档。它会解析函数，变量，和参数，根据它们自动生成文档范式，你的工作就是去填充对应的说明。
• GotoRecent（历史文档记录）
• 打开最近的文件，系统有这个功能，但只能看最近8个，有点不爽，按ctrl+e，选择即可。

   

5、语法识别：

• jQuery（jQuery语法识别）
  • 支持jquery的只能语法提示，很赞。
• JavaScriptNext - ES6 Syntax（ES6语法识别）
  • 提供ES6的语法支持。
• WordPress（WordPress的函数）
  • 集成一些WordPress的函数，对于像我这种经常要写WP模版和插件的人特别有用
• Vintage（Vim模拟）
  • 如果你习惯使用vim，那么可以安装这个插件，这个插件可以让sublime像vim一样。
• LESS（LESS语法识别）
  • 这是一个非常棒的插件，可以让sublime支持less的语法高亮和语法提示，对于搞less的同学灰常重要，不过多解释。
• SCSS（SCSS语法识别）
  • 支持scss的语法高亮，里面附带了好多CSS Snippet，无论现用或者改造成，都可节省不少时间。
• Liquid（Liquid语法识别）
  • 提供Liquid语法支持，如果你也写博客的话不妨试试。
• Smarty（Smarty语法识别）
  • 提供smarty语法的支持。Smarty插件默认的分隔符是{}，如果你使用的分隔符不同可以更改插件目录的Smarty.tmPreferences文件，找到其中的SMARTY_LDELIM和SMARTY_RDELIM，修改为你的分隔符即可。

6、文件传输：

• SFTP（编辑 FTP 或 SFTP 服务器上的文件）
• Package Syncing
  • 最后推荐一个同步插件，这个插件可以在不同的机器同步配置信息和插件，非常方便，但鉴于国内的墙太高，我都是直接把插件给手动备份了，然后直接拖进去，或者直接去github上下载对应的包。

7、其他：

• Gits（集成 GitHub）
• Clipboard-history（粘贴板历史记录）
  • 可以保存粘贴的历史，很赞的功能，再也不用担心历史丢失了。ctrl+alt+v可打开历史面板，上下选择即可，安装后会和默认的ctrl+shift+v（粘贴缩进）冲突，干掉这个快捷键。
• lint（语法校验）：
• SublimeLinter（代码错误提示） 总体架构
• Jslint编程风格
  • Sub
• Tradsim（中文繁字体和简体字转换）
• Terminal
  • 可以sublime中，打开命令行，非常方便哦。
• AllAutocomplete
  • 自动完成插件，可在全部打开的文件中，自动完成。
• HexViewer
  • 提供十六进制文件查看功能。
• MultiEditUtils
  • 扩展多行编辑的功能。

 

• IMESupport（输入框不更随着光标）
  • 三、主题（Themes）
    Sublime Text有大量第三方主题：

    1、Facebook Material Theme

2、Soda

 

SublimeREPL

这可能是对程序员最有用的插件。SublimeREPL 允许你在 Sublime Texxt 中运行各种语言（NodeJS ， Python，Ruby， Scala 和 Haskell 等等）

 

ColorPicker

通常，如果你想使用一个颜色选择器则可能打开 Photoshop 或 GIMP。而在 Sublime Text 中，你可以使用内置的颜色选择器。安装完成后，只要按下Ctrl / Cmd + Shift + C 快捷键。

 

MarkdownPreview

虽然许多开发人员更喜欢在云端（GitHub Gists，StackEdit，Markable）创建 Markdown 文件 。不过另外一些喜欢在本地编写 Markdown 文件的开发者， MarkdownPreview 很有用，可以预览文件，还有颜色高亮显示

 

DocBlockr

如果你遵循的编码的风格很严格，这款插件能够使你的任务更容易。DocBlokr 帮助你创造你的代码注释，通过解析功能，参数，变量，并且自动添加基本项目

 

文／世平阜康（简书作者）
原文链接：http://www.jianshu.com/p/f0e311490c4d
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。