SublimeText 2/3插件大全（一直在更新）

最新推荐文章于 2020-03-28 09:51:05 发布

专注前端技术开发3-5年

最新推荐文章于 2020-03-28 09:51:05 发布

阅读量2.8k

点赞数 1

分类专栏：工具使用文章标签：插件 Sublime 常用插件插件安装

本文链接：https://blog.csdn.net/manshowman/article/details/43818451

版权

工具使用专栏收录该内容

3 篇文章 0 订阅

订阅专栏

作为一个开发者你不可能没听说过SublimeText。不过你没听说过也没关系，下面让你明白。 SublimeText是一款非常精巧的文本编辑器，适合编写代码、做笔记、写文章。它用户界面十分整洁，功能非同凡响，性能快得出奇。这些非常棒的特性包括任意跳转（Goto Anything）、多重选择（multiple selections）、指令面板（command palette）、免打扰模式（distraction free mode）、分区编辑（split editing）、快速项目切换（instant project switch），你还可以随意地自定义更多功能。还有，这款编辑器支持Mac、Windows和Linux平台。但这些并不是本文所要讨论的内容。

SublimeText本身已经非常强大，但是更棒的是有一长串的插件支持它，给它带来更强大的功能，这就是本文要讨论的内容。不多废话，让我们看看常用的SublimeText插件。如果你已经在使用他们，请告诉我们，并告诉我们你认为其中那款最出色。像往常一样，你的意见也很重要。

Package control 插件管理

通俗易懂地说，这个是你在完成安装SublimeText后必须安装的东西。你问为什么？因为有了这个特殊的“插件包”，你可以很容易地安装、升级、删除，甚至非常方便地查看您已经安装在SublimeText中的包或插件的列表。它通过菜单和对应的行为使这些过程变得非常容易和有组织。

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

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

Sublime Text 2：

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。

Package Control 主文件下载地址：Package Control
这里写图片描述

Emmet html/CSS快速编辑（原名Zen Coding）

Zen Coding估计大家都不会陌生，前不久改名为Emmet了，虽然用Emmet编辑html很快，但是要用好用快它需要付出不小的学习成本，学习的曲线有点陡峭，以至于让新手好奇而畏惧，我看看热闹就行了，感觉编辑得再快思维跟不上也是白搭，对我来说sublime text 3自带的代码提示够用了。

具体使用技巧教程（全）:Cheat Sheet
这里写图片描述
插件下载：Emmet

FTPSync 具备FTP的功能

默认情况下SublimeText不具备FTP的功能，如果你正在寻找能在您的SublimeText应用程序中使用的免费和易用的FTP工具，你可以考虑FTPSync。这是一个非常简单的FTP同步工具，它可以控制上传目标的多重命名。让我们知道您的想法。
这里写图片描述

具体使用方法：连接FTP, 安装及使用 FTPSync 图文步驟

BracketHighlighter 高亮显示匹配的括号、引号和标签

BracketHighlighter这个插件能在左侧高亮显示匹配的括号、引号和标签，能匹配的 [] , () , {} , “” , ” , 等甚至是自定义的标签，当看到密密麻麻的代码分不清标签之间包容嵌套的关系时，这款插件就能很好地帮你理清楚代码结构，快速定位括号，引号和标签内的范围。
这里写图片描述
插件下载：BracketHighlighter

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

有时候在代码结尾打多了几个空格或Tab，一般不会察觉，TrailingSpacer这款插件能高亮显示多余的空格和Tab，并可以一键删除它们，有代码洁癖的朋友应该会喜欢这个插件。
这里写图片描述

插件下载： TrailingSpacer

注意，在github上下载的插件缺少了一个设置快捷键的文件，可以新建一个名字和后缀为Default (Windows).sublime-keymap的文件，添加以下代码，即可设置“删除多余空格”和“是否开启TrailingSpacer ”的快捷键了。

[
    { "keys": ["ctrl+alt+d"], "command": "delete_trailing_spaces" },
    { "keys": ["ctrl+alt+o"], "command": "toggle_trailing_spaces" }
]

Sublime Prefixr私有前缀自动补全

Prefixr，CSS3 私有前缀自动补全插件，显然也很有用哇
这里写图片描述

插件下载： Sublime Prefixr

Alignment 等号对齐

按Ctrl+Alt+A，可以将凌乱的代码以等号为准左右对其，适合有代码洁癖的朋友。
这里写图片描述

插件下载： Alignment

Clipboard-history 粘贴板历史记录

有了这个插件，便可方便使用sublime text 3里的粘贴板历史记录内容，快捷键Ctrl+Shift+V可调出该历史记录面板，按方向键选择想要粘贴的历史记录。不过这是sublime text 2下的插件，Ctrl+Shift+D清除粘贴板历史记录好像不能生效，不过重启sublime也可清除粘贴板的历史记录。

使用：

Ctrl+alt+v：显示历史记录
Ctrl+alt+d：清空历史记录
Ctrl+shift+v：粘贴上一条记录（最旧）
Ctrl+shift+alt+v：粘贴下一条记录（最新）

这里写图片描述
插件下载：Clipboard-history

SideBarEnhancements 侧边栏增强

SideBarEnhancements本是增强侧边栏的插件，这里将教大家如何用来做sublime text 3浏览器预览插件，并可自定义浏览器预览的快捷键。
这里写图片描述

安装此插件，点击工具栏的preferences > package setting > side bar > Key Building-User，键入以下代码，这里设置按Ctrl+Shift+C复制文件路径，按F1~F5分别在firefox，chrome，IE，safari，opera浏览器预览效果，当然你也可以自己定义喜欢的快捷键，最后注意代码中的浏览器路径要以自己电脑里的文件路径为准。

[
    { "keys": ["ctrl+shift+c"], "command": "copy_path" },
    //firefox
    { "keys": ["f1"], "command": "side_bar_files_open_with",
             "args": {
                "paths": [],
                "application": "C:\\software\\Browser\\Mozilla Firefox\\firefox.exe",
                "extensions":".*" //匹配任何文件类型
            }
    },
    //chrome
    { "keys": ["f2"], "command": "side_bar_files_open_with",
            "args": {
                "paths": [],
                "application": "C:\\Users\\Mr.DenGo\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe",
                "extensions":".*"
            }
     },
    //ie
     { "keys": ["f3"], "command": "side_bar_files_open_with",
             "args": {
                "paths": [],
                "application": "C:\\Program Files\\Internet Explorer\\iexplore.exe",
                "extensions":".*"
            }
    },
    //safari
    { "keys": ["f4"], "command": "side_bar_files_open_with",
            "args": {
                "paths": [],
                "application": "C:\\software\\Browser\\Safari\\safari.exe",
                "extensions":".*"
            }
     },
     //opera
     { "keys": ["f5"], "command": "side_bar_files_open_with",
             "args": {
                "paths": [],
                "application": "C:\\software\\Browser\\opera\\opera.exe",
                "extensions":".*"
            }
    }
]

ColorPicker 调色盘

在编辑CSS样式的时候，要加个自己喜欢颜色或改改颜色啥的，要到PS里去调色？ColorPicker可以让sublime text 3内置一个调色盘，调好颜色，点击OK就会在光标处生成十六进制颜色代码。
使用快捷键：ctrl+shift+c就可以调用凋色盘了。
这里写图片描述

插件下载： ColorPicker

注意：convertToUTF8和ColorPicker快捷键会产生冲突，convertoUTF8的默认转换GBK的快捷键和 ColorPicker打开调色板的快捷键都是ctrl+shift+c 。如果你两个插件都安装了的话，就需要进行自定义了，例如：

解决方法：打开Sublime Text –> Preferences –> Browse Packages，找到ConvertToUTF8文件夹并进入，找到对应操作系统的Default.sublime-keymap文件，直接修改成如下就行！

[ 
{ "keys": ["ctrl+shift++alt+c"], "command": "convert_to_utf8", "args": {"encoding": "GBK", "stamp": "0" } } 
]

Hex-to-HSL-Color Hex颜色模式转HSL颜色模式

在用CSS3的一些属性时会用到HSL颜色模式，用软件转来转去确实麻烦，用Hex-to-HSL-Color这个插件便可轻松解决，鼠标选中一个或多个十六进制颜色代码，按下Shift+Ctrl+U立马转换为HSL颜色模式。
这里写图片描述

CSS Compact Expand CSS属性展开收缩

每个人写CSS都有不同的风格，有些人喜欢写成一行，有些人喜欢写成多行，各有各的好处，我倒喜欢将CSS写成一行，这样能减少CSS文件大小，且屏幕能显示更多的Class方便查找。如果阅读别人的代码不符合自己的习惯，可以用CSS Compact Expand这个插件将CSS格式化一下，按 Ctrl+Alt+[ 收缩CSS代码为一行显示，按 Ctrl+Alt+] 展开CSS代码为多行显示。
这里写图片描述

插件下载： CSS Compact Expand

JsFormat javascript格式化

功能：Javascript的代码格式化插件
简介：很多网站的JS代码都进行了压缩，一行式的甚至混淆压缩，这让我们看起来很吃力。而这个插件能帮我们把原始代码进行格式的整理，包括换行和缩进等等，是代码一目了然，更快读懂~

使用：在已压缩的JS文件中，右键选择jsFormat或者使用默认快捷键（Ctrl+Alt+F）
这里写图片描述
插件下载：JsFormat javascript

javascript-API-Completions

支持Javascript、JQuery、Twitter Bootstrap框架、HTML5标签属性提示的插件，是少数支持sublime text 3的后缀提示的插件，HTML5标签提示sublime text 3自带，不过JQuery提示还是很有用处的，也可设置要提示的语言。
这里写图片描述

插件下载： javascript-API-Completions

jQ函数提示

功能：jQ函数提示

简介：快捷输入jQ函数，是偷懒的好方法
这里写图片描述
插件下载：jQuery

DocBlockr

功能：生成优美注释

简介：标准的注释，包括函数名、参数、返回值等，并以多行显示，手动写比较麻烦

使用：输入/、/*然后回车
这里写图片描述
插件下载：DocBlockr

SublimeTmpl 快速生成文件模板

一直都很奇怪为什么sublime text 3没有新建文件模板的功能，像html头部的DTD声明每次都要复制粘贴。用SublimeTmpl这款插件终于可以解脱了，SublimeTmpl能新建html、css、javascript、php、python、ruby六种类型的文件模板，所有的文件模板都在插件目录的templates文件夹里，可以自定义编辑文件模板。

SublimeTmpl默认的快捷键

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

快捷键在这里\Packages\SublimeTmpl\Default (Windows).sublime-keymap, 模板文件在这里\Packages\SublimeTmpl\templates，可修改。
如果想要新建其他类型的文件模板的话，先自定义文件模板方在templates文件夹里，再分别打开Default (Windows).sublime-keymap、Default.sublime-commands、Main.sublime-menu、SublimeTmpl.sublime-settings这四个文件照着里面的格式自定义想要新建的类型，这里就详细介绍了，请各位自己折腾哈~
插件下载：SublimeTmpl

sublimeLinter 代码错误提示

好话写在前面：sublimeLinter是少数几个能在sublime text 3工作的代码检查插件，sublimeLinter能检查html、css、javascript、php等众多语言的错误代码并给出提示，前提是需要配置相应语言的环境，要检查js代码需要安装node.js，检查php代码需要安装php并配置环境等，用这个插件能及时帮我们纠正代码的错误，并培养我们良好的编码习惯和风格。

丑话说在后面：对这货“强制性”的代码风格检查有点不爽，有意义无意义的代码提示经常打乱我敲代码的节奏，并且在后台运行检查机制造成sublime text 3有点小卡顿，虽然部分问题可以设置sublimeLinter来解决，用了sublimeLinter一小段时间后还是放弃了，觉得代码提示对我应该没必要了。
这里写图片描述
插件下载：sublimeLinter

SASS Build

SASS Build 是一个编写CSS的预处理器。这个特别的插件将帮助你妥善构建包括压缩选项在内的SASS文件。一旦你安装了这个插件，你可以很容易地通过按Ctrl+ B（MAC系统是 Command +B）来启动它。

LESS高亮插件

简介：用LESS的同学都知道，sublime没有支持less的语法高亮，所以这个插件可以帮上我们

使用：打开.less文件或者设置为less格式
插件下载：LESS

Git

在工作中，版本控制软件最常用的软件之一，而最流行的 VCS 是 Git。你是否厌倦了保存文本文件，并切换回终端运行一些 Git 命令。如果你能从文本编辑器本身执行 Git 命令，岂不是很好？
Git

插件下载： Git

GitGutter

ublime Text 有了 Git 插件之后，GitGutter 更好的帮助开发者查看文件之前的改动和差异，提升开发效率。这些插件可以高亮相对于上次提交有所变动的行，换句话说是实时的diff工具。
这里写图片描述

插件下载： GitGutter

AllAutocomplete搜索所有打开的文件匹配提示词

传统的Sublime Text自动补全插件仅仅在当前文件下工作。AllAutocomplete 可以搜索全部打开的标签页，这将极大的简化开发进程。当然，还有一个插件叫 CodeIntel，实现了一些IDE的功能并且为一些语言提供了“代码情报”： 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.
这里写图片描述

插件下载： AllAutocomplete

MarkdownPreview本地编写 Markdown 文件

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

GBK to UTF8

功能：文件转码成utf-8
Install Package->CovertToUTF8
简介：通过本插件，您可以编辑并保存目前编码不被 Sublime Text 支持的文件，特别是中日韩用户使用的 GB2312，GBK，BIG5，EUC-KR，EUC-JP ，ANSI等。ConvertToUTF8 同时支持 Sublime Text 2 和 3。

使用：安装插件后自动转换为utf-8格式。
这里写图片描述
插件下载：这里写链接内容

AutoFileName

功能：快捷输入文件名

简介：自动完成文件名的输入，如图片选取

使用：输入”/”即可看到相对于本项目文件夹的其他文件
这里写图片描述

Autoprefixe

功能：CSS添加私有前缀

简介：CSS还未标准化，所以要给各大浏览器一个前缀以解决兼容问题

使用：Ctrl+Shift+P，选择autoprefixer即可。需要安装node.js。
这里写图片描述
插件下载：Autoprefixe

专注前端技术开发3-5年

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SublimeText 2/3插件大全（一直在更新）

作为一个开发者你不可能没听说过SublimeText。不过你没听说过也没关系，下面让你明白。 SublimeText是一款非常精巧的文本编辑器，适合编写代码、做笔记、写文章。它用户界面十分整洁，功能非同凡响，性能快得出奇。这些非常棒的特性包括任意跳转（Goto Anything）、多重选择（multiple selections）、指令面板（command palette）、免打扰模式（distr
复制链接

扫一扫