设置Sublime侧边栏

Sublime Text 3 安装之后,由于设备的屏幕尺寸和分辨率的原因,左边负责显示项目树形结构的侧边栏(Sidebar)字体可能会非常小,导致视觉上很不舒服,找文件和目录的时候有点费劲,本片博客咱们就看看如何调节Sidebar 侧边栏字体大小和行高,让侧边栏符合咱们的显示要求。 

更改侧边栏网上的教程很多,但是很多都比较麻烦,尤其很多人还会安装 Sublime主题,更改了主题之后,默认的设置方式就失效了。本片博客我们就以安装了 Material Theme 之后,设置 Sidebar 的方法,不管你使用的是默认的 Sublime 主题还是安装了第三方的 Theme,都可以使用这种方式很方便的对显示效果进行设置,并不局限于 Sidebar 侧边栏。

1. 安装 Package Control 这是Sublime Text 3 必备的工具,有了它之后,我们就可以通过它下载和使用 Sublime Text 丰富的第三方插件系统。如果你的 Sublime 已经安装了 Package Control ,可以跳过此步骤,如果你使用的是系统默认的主题,你也可以直接跳过步骤 2 和 3 :

Windows,Linux: 

Preferences > Package Control

MacOS: 

Sublime Text 3 > Preferences > Package Control

通过点击上面即可安装 Package Control,不过大部分开发者肯定早都已经安装了 Package Control 。

 

2. 既然咱们以 Material Theme 第三方主题为例,那咱们就需要首先安装 Material Theme。Package Control 安装完成之后,我们可以通过步骤 1 的菜单,打开 Package Control 安装插件;当然咱们也可以通过快捷键打开 Package Control,快捷键如下:

Windows,Linux: 

Ctrl + Shift + P

MacOS: 

Command + Shift + P

选择 Package Control:Install Package,出现插件选择列表之后,输入 Material Theme,在列表中点击 Material Theme 等待一些时间,即可安装完成。如果你使用 Package Control 安装插件遇到 “There are no packages available for installation” 这个问题,可以根据下面的方法解决:

Sublime Text 安装插件遇到 There are no packages available for installation 如何解决 

3. 激活 Material Theme 主题 

Preferences > Theme > Material-Theme.sublime-theme (以这个主题为例)
Preferences > Color Schema > Material-Theme 

Sublime Text Material Theme

经过这样的设置,Sublime Text 3 的主题的调调就会格外突出了~

 

4. 这一步是咱们的重点,要对 Sidebar 设置,尤其要对安装了第三方主题的 Sidebar 进行设置,咱们需要安装一个能够访问第三方插件资源的插件 PackageResourceViewer,安装方式与安装 Material Theme 的方式完全相同。

 

5. 使用快捷键 Command + Shift + P ( Windows Linux : Ctrl + Shift + P ),调出 命令输入框 ,输入 PackageResourceViewer: Open Resource,回车后,出现一个新的列表,继续在命令输入框中输入 Material Theme 进行过滤,选中后继续回车,继续在命令输入框输入 sublime-theme,选择 Material-Theme.sublime-theme 后,会进入对应的设置文件。我们只需要修改这个文件里的设置项即可(如果修改自带的主题,搜索并选择 Theme - Default):

搜索 sidebar_label找到第一个 "class": "sidebar_label" 设置组,在里面添加:"font.size": 18,将字体大小设置为18,保存后你就可以看到侧边栏的变化了~ 

{
"class": "sidebar_label",
"color": [96, 125, 139],
"font.bold": false,
"font.size":18,
"font.italic": false,
"shadow_color": [255, 255, 255, 0],
"shadow_offset": [0, 0]
}

 如果觉得行间距太小,可以继续找或者搜索,找第一个 class:"sidebar_tree"调整一下里边的 row_padding 配置即可,数组中第二个数据是调整行高的项 ~ 

{
"class": "sidebar_tree",
"row_padding": [24, 10],
"indent": 16,
"indent_offset": 0,
"indent_top_level": false,
"layer0.tint": [38, 50, 56],
"layer0.opacity": 1.0,
"layer1.tint": [0,0,0],
"layer1.opacity": 0.0
}

 

OK,看着东西很多,其实操作一下的话你会发现也没啥,就那么几个步骤,知道怎么弄就得了,这类东西也没啥好记的,忘了就来看看就行了,我也从来没记住过,对自己说两个字:“呵呵” ~