Sublime Text 插件推荐

数据无价,谨慎操作

重装电脑之前急着要用,自认为数据容灾工作做得还可以,感觉没什么可备份的。
重装完才发现问题还是挺多的。

没问题的:

  1. 客户端本质就是个套壳浏览器,因此自带云端同步的还好,例如 Notion、Postman 之类。
  2. 配置及数据存储在安装目录,而且软件没有安在 C 盘的*,包括大部分「解压即用」的(即所谓的「绿色版」)。

* 这里点名表扬 Xshell,各种 SSH-Key 我是(弱智)真的忘了备份,如果丢了就炸了,幸好还在。

有问题的:

  1. 数据存储在 %APPDATA% 的,这个就多了。当然这个是我自己的问题,我的 %APPDATA% 太大 / 小文件太多太碎了,简单瞄了两眼感觉没啥特别重要的,就懒得备份直接放弃了。
  2. 配置及数据存储在安装目录,然而软件又安在 C 盘的,比如 Sublime Text。

安装

安装插件

Package Control

必首装,插件管理器 Package Control
Ctrl + Shift + P 打开命令面板,输入 Install Package Control 回车。

安装其他插件:
Ctrl + Shift + P 打开命令面板,输入 install 并选择 Package Control: Install Package 回车,继续输入插件名回车即可自动安装。

卸载插件:
前略,Package Control: Remove Package,后略。

Alignment


自动对齐等号 =
默认快捷键为(选中要处理的区域后)Ctrl + Alt + A

BeyondCompare


一键调起 Beyond Compare。
需要提前安装好 Beyond Compare,并配置好路径:

1
2
3
{
    "beyond_compare_path": "D:/Program/Beyond Compare 4/BCompare.exe"
}

右键选择 BeyondCompare(默认快捷键 Ctrl + Alt + D)即可直接打开 Beyond Compare。

为什么要用 Beyond Compare

其实一般的文本比较可以使用轻度插件 FileDiffs,或者别的桌面端生产力小工具,网页版也一搜一大堆,甚至 git diff 都行。
但有些大文件就是要频繁 高强度比较,就是要上 Beyond Compare,这个是刚需。
此时本插件就派上用场了,免去了启动 Beyond Compare 后还要慢慢手动选定文件的麻烦。

BracketHighlighter


开闭符号([], (), {}, "", '', <tag></tag>)高亮匹配。
如果你正在回调地狱饱受折磨,这个插件能在一定程度上救你一命。

1
2
3
4
5
6
7
8
fs.readFile('./sample.txt', 'utf-8', (err, content) => {
    let keyword = content.substring(0, 5);
    db.find(`select * from sample where kw = ${keyword}`, (err, res) => {
        get(`/sampleget?count=${res.length}`, data => {
           console.log(data);
        });
    });
});
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Balls</title>
  <style>
    .ball {
      width: 40px;
      height: 40px;
      margin-bottom: 5px;
      border-radius: 20px;
    }
    .ball1 {
      background: red;
    }
    .ball2 {
      background: blue;
    }
    .ball3 {
      background: yellow;
    }
  </style>
</head>
<body>
  <div class="ball ball1" style="margin-left: 0"></div>
  <div class="ball ball2" style="margin-left: 0"></div>
  <div class="ball ball3" style="margin-left: 0"></div>
  <script>
    let ball1 = document.querySelector(".ball1");
    let ball2 = document.querySelector(".ball2");
    let ball3 = document.querySelector(".ball3");
    function animate(ball, left, callback) {
      setTimeout(function () {
        let marginLeft = parseInt(ball.style.marginLeft, 10);
        if (marginLeft === left) {
          callback && callback();
        } else {
          if (marginLeft < left) {
            marginLeft += 2;
          } else {
            marginLeft -= 2;
          }
          ball.style.marginLeft = marginLeft + "px";
          animate(ball, left, callback);
        }
      }, 13);
    }
    animate(ball1, 100, function () {
      animate(ball2, 200, function () {
        animate(ball3, 300, function () {
          animate(ball1, 200, function () {
            animate(ball3, 200, function () {
              animate(ball2, 180, function () {
                animate(ball2, 220, function () {
                  animate(ball2, 200, function () {
                    console.log("over");
                  })
                })
              })
            })
          })
        })
      })
    });
  </script>
</body>
</html>

简单写个 vue:

  • )}})})})?我要加一个可选参数,加在哪个括号后面?
  • 结尾用什么?加 ,?还是加 ;
  • 什么时候可以加?什么时候可以不加?
  • 什么时候必须加?什么时候不能加?

ts 大法好,早转保平安。

DocBlockr


/** 自动生成函数注释。

Emmet


神仙插件,ul#nav>li.item$*4>a{Item $} 按下 Tab 见证奇迹。
具体用法参看 官方文档

MarkDownEditing


更好的 Markdown 显示。

TrailingSpaces


多余空格的高亮显示以及更智能的自动清除

Q:你不会 "trim_trailing_white_space_on_save": "not_on_caret" 吗,一行代码就设置好的,还专门安个插件。
A:我确实不会,详见《Sublime & VSCode 配置删除行尾空格》。

ConvertToUTF8


自动文本编码转换为 UTF-8,支持汉语及汉语衍生语系:

  • 简体中文(GBK / GB18030 / GB2312)
  • 繁體中文(BIG5)
  • 日本語(Shift_JIS / EUC-JP / CP932)
  • 한국어(EUC-KR)
  • 以及其他所有 Python 支持的编码

SFTP


顾名思义。

个人玩法

我的私人文档和本地版博客(以供开发调试)是跑在局域网下另一台树莓派上的。
技术栈:Markdown 写,Git 做版本控制,Hugo 渲染。
软件:正经写长文还是 Typora,小修小补 Sublime(Typora 的启动速度是真的慢得离谱)。
配合本插件(SFTP)可以做到改完 Ctrl + S 都不用按直接切到浏览器,一秒内出效果*。

原理
  1. Sublime Text 设置「失焦时自动保存(save_on_focus_lost)」
  2. SFTP 设置「保存时自动上传(upload_on_save)」
  3. 修改后通过 SFTP 上传新文件覆盖树莓派上的旧版本
  4. 树莓派的 Hugo 通过 --watch 参数(hugo server 默认启用)监听文件变动即时重载

到这里自动化程度已经非常高了,但仍然要 F5 刷新才能看到效果。
因为已经打开的网页是下载到本地的,理论上已经加载完毕,服务器上再怎么变都和你(已经打开的网页)没关系了。

通过常识我们得知,网页局部刷新(动态加载)当然是可以做到的:

  1. 要么加载完的网页无限轮询服务器接口,一旦查询到新数据就立刻下载并进行重新渲染。
  2. 要么加载完的网页直接与服务器建立长连接。

巧了,Hugo 刚好内置了第二个黑科技。
每个页面成功加载后都会和服务器建立 websocket 长连接。
前面提到监听文件变动即时重载,一旦站点重新构建完成,它就会告诉浏览器上已经加载完成的 http://192.168.x.x:[port]/livereload.js 热重载。

Hugo 真正牛批的地方在于它的构建速度,快到几乎无感,完全吊打 Hexo。
就算不上 SFTP,hugo server 本地调试也能窥见一斑,双屏幕一边浏览器一边编辑器的话,不用离开编辑器,只要保存就可以看到另一边实时生效的效果。
那叫一个丝滑,体验拉了同类竞品一大截。

代码格式化

我是基本不用 Sublime 写业务的,哪怕是前端(VSCode Prettier 了解一下)。
就跨语言看源码,或者小修小补才会用,只求快,要的就是一个速度。
说白了就是我完全当成记事本在用。
所以没有推荐类似插件,有需求请自行查找。

updatedupdated2022-05-012022-05-01