(干货)自定义使用Sublime Text 3

96
PeTu
0.2 2017.03.17 13:28* 字数 2258

程序编辑器层出不穷,但是有一款常青树——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:ippc:listpc:rm分别进行插件安装,插件浏览,插件删除

解决 There are no packages available for installation 问题

  1. 首先是网络上说的,在终端执行ping sublime.wbond.net,然后将ping出的ip地址添加到hosts文件中,macOS的hosts文件在/etc/hosts
  2. 此处借鉴这篇文章的处理方法,将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 中程序图标

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

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

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

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

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

PHP
Web note ad 1