Tech:Sublime配置

config sublime essentials as a old emacs users.

简述本文

配置 Sublime text3,够用就好 (轻量级使用)

由于我习惯于 emacs 的一些快捷键,所以配置时不兼容旧习惯的插件不会安装

后端亦可追求美,谢谢。(默认情况下,比 vscode 漂亮)

命令行启动 Sublime

-n 参数会启动一个新的实例(instance),不喜欢可以不加。

1
2
$ which sub
sub: aliased to open -n -a Sublime\ Text.app

Package Control

身边的很多人就是因为这里配置麻烦而放弃这个 sublime (麻烦么?)

安装插件,可以手动安装,当然简单的办法还是用 包管理器

如果能在 Preferences 菜单里面看到 Package Control(包管理器) 那说明已经安装了。

  • Command + shift + p ,或者输入 pci 效果相同

否则利用官网的代码试试自动安装。因为网络的缘故,所以这里还是手动安装吧:

  • 1.下载安装包,地址
  • 2.放到 “~/Library/Application Support/Sublime Text 3/Installed Packages” 下面

如果遇到 There are no packages available for installation 这样的问题:

经试验: 一般是因为 channel 配置文件无法被程序获取,此时手动下载下来,让 sublime 知道路径即可:

prefrences->package setting->Package control->setting-user

安装 Markdown 实时预览

说在前面,这个实时预览效果确实不大好。(我个人采用 hexo 了)

install-md

实时预览,需要 2 插件: MarkdownLivePreview + LiveReload。(前者只针对 md 一种格式热加载)

安装完成之后,会自动打开一个文本,然后告诉你怎么用:

1
2
3
4
To enable MarkdownLivePreview, you need to be on a markdown view (works with
Markdown Extended). Then just press `alt+m`, or search up in the command
palette: 'MarkdownLivePreview: Toggle'. Hit enter and you're done. As soon as
you type anything in, it'll show up with the preview in a new group.

简单的说,让 sublime 识别了 markdown 文件格式,然后 Meta + m 即可。

它会新建一个 sublime 的实例,然后分组左右两边(group)显示

live reload 安装完,在 preference enable插件,然后重启 sublime,效果图如下:

sample

如果不满意效果,需要自己调配 css。(预览效果不大好,习惯就好?)

安装 Outline 插件

预览可以不用,但大纲一定要有

有一个大纲显示脉络,那么写作时就很清楚了。不安装插件,可以用 Command + R, 只是不能一直显示。

下载 Outline 插件:

1
2
3
4
5
Outline

Thank you for installing the Outline package.

To start, bring up the Command Palette with `Ctrl + Shift + P`, and select `Browse Mode: Outline (Left)` or another preferred layout.

注意: 需要在 Commadn + R 生效的文件中,才可使用: Browse Mode: Outline (Left/Right)

安装 Compare 插件

文件对比 Compare-Side-by-Side,安装改插件,使用时需要基于 Tab/File-Browser 页面。

先打开文件,然后选择 Compare with,然后选择文件:

compare menu

左右对比,效果如下:

compare text

这里的对比(Compare插件)和 “文件夹侧边栏” 的不同:

The “Diff files” only appears with the “folders” sidebar (to open a folder: File->Open Folder) , not with “open files” sidebar.

安装代码美化插件

其实就是一个格式化工具

先要安装 node.js(它的依赖),下载安装包安装即可:

  • 1.Node.js to /usr/local/bin/node
  • 2.npm to /usr/local/bin/npm

然后安装 HTML-CSS-JS Prettify 插件。

安装完毕,打开一个相关的文件,然后: 右键 – “HTML/CSS/JS Prettify” – “Prettify Code”。

安装 Emmet 插件

后来我给 remove 掉了 (和 emacs 基本快捷键冲突,比如 Control + e且前端代码写的少)

前端代码快速编辑的工具,比如 ! 可以快速生成 HTML 的模板,li*3 可以快速生成三个 li。

  • 灵活使用 Tab 键或者 Control + E — 后者对于 Emacs 用户则冲突了

也就是说,TabControl + E,在前面输入有内容的情况下,不要随便使用:

1
2
3
4
5
6
7
ul>li.item${item $$}*3<TAB键>

<ul>
<li class="item1">item 01</li>
<li class="item2">item 02</li>
<li class="item3">item 03</li>
</ul>

貌似 h5builder, vscode 以及 webstorm 都有类似的功能。

安装 Autosave 插件

最后还有一个 autosave 可以安装一下(需要手动打开),非常方便。

可以绑定激活快捷键 Control + shift + s,编辑器底端状态栏(status bar)有提示。


Sublime 毕竟是一个 editor,一个漂亮的 editor

重度使用不推荐: (重度使用,比起 Jetbrains 家的 IDE 还是差了一些) — 收费的,毕竟是要钱的。

CH-YK 2019-03-30 书写,2019-04-03 发布


文章目录
  1. 1. 简述本文
  2. 2. 命令行启动 Sublime
  3. 3. Package Control
  4. 4. 安装 Markdown 实时预览
  5. 5. 安装 Outline 插件
  6. 6. 安装 Compare 插件
  7. 7. 安装代码美化插件
  8. 8. 安装 Emmet 插件
  9. 9. 安装 Autosave 插件
|