（干货）自定义使用Sublime Text 3

2017-03-17 本文已影响5807人 PeTu

程序编辑器层出不穷，但是有一款常青树——sublime text ，其底下的插件琳琅满目，这款软件也是我换了电脑后立马就安装的几款软件之一，我现在给大家介绍下我是怎么使用这款软件的
先上图：

所有的插件介绍时，都在标题链接了相应的Github仓库，我讲的不清楚时，可以进仓库查看官方解释。

package control

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

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 能用了，能看到Sublime Text -> Preference -> Package Control就表示安装成功了，一般情况下是不用重启 sublime 的，但是如果没有看到，就重启一下 sublime 就可以了。
通过快捷键super + shift + p调用命令行，因为支持模糊查询，所以输入 pc:ip，pc:list，pc:rm分别进行插件安装，插件浏览，插件删除

解决 There are no packages available for installation 问题

首先是网络上说的，在终端执行ping sublime.wbond.net，然后将ping出的ip地址添加到hosts文件中，macOS的hosts文件在/etc/hosts
此处借鉴这篇文章的处理方法，将channel_v3.json文件下载，放置到自己的电脑中，然后打开Sublime Text -> Preference -> Package Settings -> Package Control -> Settings-User，将

"channels":
    [
        " /Users/pengtuo/code/channel_v3.json "  // （此处填你的 channel_v3.json 文件路径）
    ],

复制进去，即可覆盖原先的默认路径，直接查找你的文件
channel_v3.json 文件下载_ 提取密码: bu2y

Alignment

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

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

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

如果某些时候因为网络原因而导致插件安装失败，可以手动安装
找到插件的Github仓库，下载zip

然后打开

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

并不是所有的插件都能这样安装，有的会有 bug

安装成功后，将你想要对齐等号的部分圈住，然后快捷键super + control + A即可，这地方可能和QQ的截屏快捷键冲突，有需要的自己改一下

Material Theme

这个是主题插件，就是我现在正在用的主题，我挑了一圈，发现还是这个最好看，就如一开始展示的图片，并且目前这个插件更新了很多版，bug已经非常少了，推荐给大家使用。这个主题要配合zz File Icon图标插件配合使用，因为它的文件图标是那个插件提供的，依然是在Package Control下载图标插件即可。

（2017.3.20更新）经评论提醒，发现主题GitHub的图标插件名改了叫：A File Icon，搜不到不能自动安装，可手动安装。不过主题应该自带图标。

主题具体的配置可以自己在标题链接的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"
}

然后你就会发现你的sublime界面已经不一样了

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

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

修改 sublime 在 dock 中程序图标

折腾了这么久，怎么能不修改一下程序图标呢，毕竟我感觉原先那个有些难看。

这里有一个仓库，里面有一些图标和参考教程

下载你想替换的图标，需要icns格式，推荐一个主题网站，里面有很多的sublime主题设计，包括程序图标，部分提供直接下载。
终端执行：open /Applications/Sublime\ Text.app/Contents/Resources/
找到里面的程序图标（一眼就能找到），然后将你下载的图标名字修改成一毛一样的，复制进去替换
终端执行 ./mac_replace_icons，这个文件是从上述的那个仓库中下载的
我的修改：

OK，到现在我的sublime如何使用介绍完了，后续肯定还会用到更多的插件，将在本文后直接更新。

推荐简书上另一个人的一篇文章，介绍的也很详细