自用Sublime Text 插件主题配置大全

2017-07-26 本文已影响1530人万物皆可搬

原则上收费的，但可以试用，试用期是免费的，在试用期间会提示你购买.

package control

首先必须要介绍的就是这个，它是用来进行插件管理的，插件的安装、查看、删除都可以用package control，非常的方便，安装package control也很方便，调出 sublime text 的控制台，在View -> Show Console，快捷键是ctrl + `，

然后在控制台复制进以下代码：

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

然后等待就行，等到 sublime 能用了，能看到Sublime Text -> Preference -> Package Control就表示安装成功了，一般情况下是不用重启 sublime 的，但是如果没有看到，就重启一下 sublime 就可以了。

通过快捷键ctrl+ shift + p调用命令行，因为支持模糊查询，所以输入pc:ip，pc:list，pc:rm分别进行插件安装，插件浏览，插件删除

插件

Alignment

自动安装（所有插件同理）

这个插件是用来规格化代码的，常用的是将等号对齐，打开命令板ctrl+ shift + p，输入pc:ip，然后输入插件的名字，回车即可安装

手动安装（所有插件同理）

如果某些时候因为网络原因而导致插件安装失败，可以手动安装

找到插件的 Github 仓库，下载zip

将下载的zip文件解压后放进刚打开的Browse Package里，重启 sublime 即可安装成功

Material Theme

自用主题，并且目前这个插件更新了很多版，bug 已经非常少了，推荐给大家使用。这个主题要配合A File Icon图标插件配合使用，因为它的文件图标是那个插件提供的，依然是在Package Control下载图标插件即可。

主题具体的配置可以自己在标题链接的 Github 仓库里去看，如果懒的去看的，可以直接复制我的配置，打开Sublime Text -> Preference -> Settings，在User界面复制进如下代码：

{

"always_show_minimap_viewport": true,

"bold_folder_labels": true,

"color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",

"fade_fold_buttons": false,

"font_options":

[

"gray_antialias" ],

"font_size": 15,

"ignored_packages":

[

"Vintage" ],

"indent_guide_options":

[

"draw_normal",

"draw_active" ],

"line_padding_bottom": 3,

"line_padding_top": 3,

"material_theme_accent_scrollbars": true,

"material_theme_arrow_folders": false,

"material_theme_big_fileicons": true,

"material_theme_bold_tab": true,

"material_theme_bright_scrollbars": true,

"material_theme_bullet_tree_indicator": true,

"material_theme_compact_panel": true,

"material_theme_compact_sidebar": true,

"material_theme_contrast_mode": true,

"material_theme_disable_folder_animation": false,

"material_theme_disable_tree_indicator": true,

"material_theme_panel_separator": true,

"material_theme_small_statusbar": true,

"material_theme_small_tab": true,

"material_theme_tabs_autowidth": false,

"material_theme_tabs_separator": false,

"material_theme_tree_headings": true,

"overlay_scroll_bars": "enabled",

"show_encoding": true,

"show_line_endings": true,

"theme": "Material-Theme.sublime-theme" }

再推荐个主题

Brogrammer

配置方法:

{

"theme": "Brogrammer.sublime-theme",

"color_scheme": "Packages/Theme - Brogrammer/brogrammer.tmTheme"

}

AutoFileName

这个插件是在双引号内默认自动导入当前同文件夹下的其他文件名，如果想导入其他文件夹下的文件名，支持绝对路径和相对路径。这个插件在写 Js 代码，需要导入图片时，或者是需要在一些配置文件里填写文件的路径时，全程可以自动补全，非常好用。安装即可用。

ConvertToUTF8

这个插件可以有效地解决中文乱码问题，因为 sublime 的默认编码方式 UTF-8，所以有些 GBK 编码或者其他的编码会出现乱码问题，这个插件可以进行编码转换

Compare side-by-side

这是个进行文件比对的软件，但只是简简单单的进行文件比对，如果只需要文件比对功能的童鞋们可以用这个插件，如果想要进行更多功能的文件比对功能，例如与剪贴板里的文件进行比对，可以使用SublimeFileDiffs，这个插件的提示方式和git diff的格式一样，所以喜欢使用git的童鞋可以尝试，但是我个人使用的是 Compare side-by-side ，因为我觉得够用了。

DocBlockr

这个是代码自动注释插件，也是我非常喜欢的插件之一，因为个人写函数时有进行该函数文档说明的习惯，而这个插件可以自动将函数类型、参数个数及类型、函数返回值等直接生成好，正如安装成功后插件文档中写的All you need is to complete descriptions。使用方法很简单，只要在函数上方输入文档注释/**，然后回车即可生成。

Emmet

这是一个经过广大技术开发者检验的软件，确实堪称为前端开发神器，效率倍增。只需要输入很简短的缩写，它就能扩展开来，默认扩展快捷键是Tab或者ctrl + E。例如一开始输入!符号，然后 Tab，就能扩展成一个 HTML 编码所需要的全部头部和尾部。

附一个 emmet 的使用文档

很多人在安装成功后发现Tab并没有实现扩展，那是因为需要你把 sublime 的语法格式手动调整为html格式，在 sublime 的右下角有调整。

GitGutter

这个插件看名字就能知道是干什么用的，也是我自己非常喜欢的一款插件。它能在 gutter 中显示你这次编辑的文件相比目前 git 暂存区中的文件的异同，相当于实时的git diff，并且显示的也很友好，如图

将鼠标放在修改的提示符不动，会自动显示修改前是什么样的，很方便。

SublimeCodeIntel

一个全功能的 Sublime Text 代码智能自动补全引擎，支持很多语言的补全。这个插件比较大，所以通过Package Control进行安装的时候会比较慢，我 50M 的水管都安了十几分钟，而且尝试了很多次，如果自动安装失败可以尝试手动安装。

并且这个插件是需要自己手动配置的，我目前用 php 比较多，就说一下我是会怎么配置的

如果不知道你的 php 的路径，在终端中执行whereis php，复制显示结果

打开Sublime Text -> Preference -> Package Settings -> SublimeCodeIntel-> Settings-Default

然后在设置的最后codeintel_language_settings里的 php 的路径修改为你刚复制的现实的结果

如图

wordcount

这个软件就不多介绍了，名字告诉了一切，插件很小，自动安装很快，安装即可用，右下角显示，无需配置，插件按照空格统计英语单词，无法统计汉字字数。

JsFormat

即可在 JS 文件中通过鼠标右键 ->JsFormat 或键盘快捷键 Ctrl+Alt+F 对 JS 进行格式化

使用效果如下图

SideBarEnhancements

SideBarEnhancements 是一款很实用的右键菜单增强插件,安装此插件后配置方法为,重启 Sublime text 3 后,打开任意一个 JS 文件，按 ctrl+shift+space,这时候第一次运行会去下载对应的类库,可以按 ctrl+`（也就是调出控制台）来看进度

TrailingSpaces

有时候，在代码结尾打多了几个空格或 Tab,并没有任何显示效果,TrailingSpaces 这款插件能高亮显示多余的空格和 Tab

Tag

这是 HTML/XML 标签缩进、补全、排版和校验工具

安装该插件后，可以如上图方式使用 Tag 插件对 HTML/XML 进行自动排版等操作

Terminal

在编程过程中，我们经常需要使用到命令行窗口,Terminal 插件可以允许在 Sublime Text 3 中打开 cmd 命令窗口,安装好该插件后,即可使用快捷键 Ctrl+Shift+T 呼出命令行窗口

SublimeCodeIntel

这是一款代码提示插件，支持多种编程语言,该插件安装时间可能相对较长,更特别的是，安装该插件后需要根据您使用的编程语言进行配置,本部分将以配置 JavaScript 语言的代码提示功能为例,安装该插件后，点击Preferences->Browse Packages... 菜单

进入 SublimeCodeIntel 文件夹

再进入.codeintel 文件夹

将其中文件名为 config 的文件拖动到 Sublime Text 3 中,你会看到大概如下图的代码

将以下代码复制后粘贴到 Config 文件中

//注意上下文需要添加的逗号

"JavaScript":{

"javascriptExtraPaths":[]

}

复制粘贴后的效果如下图

保存后关闭 config 文件,在编写 JavaScript 时即可获得代码提示，如下图示

CssComb

CssComb 是为 CSS 属性进行排序和格式化插件 [官网],使用 Package Control 安装 CssComb 插件后，你可能发现它并不能运行,它依赖于 Node.js [官网],若您的计算机已安装过 NodeJS 环境，可跳过此步骤,若您的计算机中尚未安装过 Node.js 环境,应该到 Node.js 官网中 [下载] 并安装相应版本的 Node.js

安装 NodeJS 后，即可使用 CssComb 插件

使用方法：菜单 Tools->Run CSScomb 或在 CSS 文件中按快捷键 Ctrl+Shift+C

使用前，CSS 可能杂乱无章