HyperSnips:VSCode上的自动补全神器

2021-12-16

发现一个小众但是巨好用的VSCode自动补全插件:HyperSnips

image

作者显然受到了 这位小哥 的启发,将 Vim Ultisnips 的大部分功能搬到了VSCode上。并用 JavaScript 重写了 Python 的部分程序。有了这个插件,你不需要使用令人望而生畏的Vim,就能愉快地写 LaTeX/markdown,甚至在数学课上用 markdown/LaTeX 做笔记。

更有趣的是,由于这个插件具有可编程能力,你甚至可以拿到 VSCode 的 API 接口,用这个插件写“插件”,或者干一些有趣的事情。

你可以实现 这篇文章 中的几乎所有功能,足以看出其强大:

  • 一个自动变大的盒子:
    image

  • 可以自动给\(\LaTeX\)的命令加斜杠\
    image

  • 可以自动展开分数(//\frac{}{}1/\frac{1}{})

  • 使用后缀片段修改字母样式(Ecal\mathcal{E}q_idot\dot{q_i}等等);
    image

    image

  • 自动生成m*n矩阵:
    image

以上演示使用markdown完成(不是LaTeX,但是LaTeX同样可以使用该插件),预览是Markdown Preview Enhanced插件。这是非常好用的markdown同步预览插件,只是更新有些慢。

使用方法

安装

  • 下载VSCode,在插件市场安装 HyperSnips
    注意安装后右键插件选择“安装另一个版本”,安装0.2.3版本。最新的0.2.4有严重的bug,会导致无法使用,暂时不要更新。(2021/12/16)

image

  • 按下 Ctrl+Shift+P ,搜索 Open Snippets Directory ,打开存放代码片段的文件夹
    新建 *.hsnips 文件,如希望在LaTeX补全就建立latex.hsnips,希望补全markdown就建立markdown.hsnips 。如果希望使用全局片段,则建立 all.hsnips
    然后就可以输入片段了。

基本用法

输入片段的方法基本按照 Vim Ultisnips 的方法,参照帮助文档。这和VSCode自带的片段是对应的。同样也可以使用占位符,可以使用Tab跳来跳去(如$1表示第一个Tab Stop,$2第二个,特别的,$0是最后一个,${1:text}表示第一个占位符中有预设的文本)。

举例:

snippet hello "greeting"
Welcome to ${1:HyperSnips}!
endsnippet

snippetendsnippet标志了片段的开始和结束,hello是触发字符。"greeting"是片段名称(没什么用)。第二行就是要展开的片段。如果用 VSCode 内置片段的写法(json),就是:

{
    "greeting":{
        "perfix":"hello",
        "body":"Welcome to ${1:HyperSnips}!"
    }
}

基本的功能都有的。输入片段(或者其中的几个字母),按下 Tab ,你可以得到:

image

自动展开

使用 A 标记,可以自动展开:

snippet hello "greeting" A
Welcome to HyperSnips!
endsnippet

这样只要输入触发字符,整个片段就会立即展开。上面的快速输入,几乎都是使用了A标记。另外还有iwM等标记,详见帮助文档( @infinity1900 翻译,感谢!):

A:自动展开。默认是按下tab时触发代码段,Flag 设置为 A,代码段将在 Trigger 匹配后立即激活,这对于 regex 正则表达式代码段特别有用。

i: 词内展开*。默认情况下,触发器仅在前面带有空格字符时才匹配触发。如果设置 为 i,则不管前面的字符如何,都会触发带有此选项的代码段,例如,可以在单词的中间触发代码段。

w: 单词边界*。使用此选项时,触发器将在单词边界处匹配。

M: Multi-line mode - By default, regex matches will only match content on the current line, when this option is enabled the last hsnips.multiLineContext lines will be available for matching.

  • 只对非正则表达式有效

内嵌代码、动态片段、正则识别

HyperSnips支持在片段中使用JavaScript代码。如下面可以返回当前日期:

snippet dategreeting "Gives you the current date!"
Hello from your hsnip at ``rv = new Date().toDateString()``!
endsnippet

image

其中,JavaScript片段使用四个 ` 括起来,其中rv表示返回的片段。

  • 一开始那个小盒子,是插件中的示例代码:
snippet box "Box" A
``rv = '┌' + '─'.repeat(t[0].length + 2) + '┐'``
│ $1 │
``rv = '└' + '─'.repeat(t[0].length + 2) + '┘'``
endsnippet

同样支持正则表达式。如“自动数字下标”的片段是这样写的:

snippet `(?<=[A-Za-z])(\d)` "auto subscript" iA
_``rv = m[1]``
endsnippet

效果就是:a1a_1m[1]表示正则识别处的第一个组合。除此之外还有t变量,用的不多。

  • 自动展开分数 会麻烦一些。

image

//\frac{}{} 最容易,直接写就行;
如果要实现1/\frac{1}{}:

snippet `((\d+)|(\d*)(\\)?([A-Za-z]+)((\^|_)(\{\d+\}|\d))*)/` "Fraction no ()" A
\frac{``rv = m[1]``}{$1}$0
endsnippet

而如果要实现(1+2)/\frac{1+2}{} ,可能还需要借助JavaScript:

snippet `^.*\)/` "Fraction with ()" A
``
    let str = m[0];
    str = str.slice(0, -1);
    let lastIndex = str.length - 1;

    let depth = 0;
    let i = str.length - 1;

    while (true) {
        if (str[i] == ')') depth += 1;
        if (str[i] == '(') depth -= 1;
        if (depth == 0) break;
        i -= 1;
    }

    let results = str.slice(0, i) + "\\frac{" + str.slice(i+1, -1) + "}";
    results += "{$1}$0";
    rv = results;
``
endsnippet

这和原作者的逻辑是一样的,但是转写成了JavaScript。

全局程序

.hsnips文件开头加入如下片段:

global

endglobal

即可在其中定义全局函数。这里定义的函数可以在当前文件中的任何片段中使用。
比如生成矩阵的函数:

// generate matrix

function gen_matrix(nrow, ncol, index) {
    let results = "\n";
    let order = 1;
    for (var i=0; i<nrow; i++){
        results += '    ';
        for(var j = 0;j <ncol;j++){
            results += "$" +(order ).toString() + ((j == ncol -1) ?  " \\\\\\" : " & ");
            order ++;
        }
        results += index ? "\n" : "";
    }
    return results;
}

再使用以下片段:

snippet `(bm|pm|m|vm)at([1-9])([1-9])` "matrix" iA
\begin{``rv = m[1]``atrix}``
    rv = gen_matrix(m[2],m[3],1);
    ``\end{``rv = m[1]``atrix}$0
endsnippet

bmat33 就能给出一个3*3 的\bmatrix 矩阵:

image

环境/作用域

有时我们希望片段只有在数学环境中展开,或者只在文本环境中展开。比如,你不希望在正文中写“green”的时候突然展开成“gr_en"吧(下标自动展开)。HyperSnips提供了这一方法:

在开头的global 中,定义如下:

function math(context) {
    return context.scopes.some(s => s.includes("math"));
}

这个作用是,检查当前文本的标记和作用域(token & scope),如果其中含有math,判断为数学环境并返回true。然后再我们需要的片段前面加上:

context math(context)

就可以让片段只在数学环境中展开。如前面片段如果写成:

context math(context)
snippet // "frac" A
\frac{$1}{$2}
endsnippet

效果:

image

检查哪一种环境,可以按下Ctrl+Shift+P ,使用开发人员: 检查编辑器标记和作用域(Inspect Editor Tokens and Scopes) 命令,得到如下窗口,框中就是作用域(scope)。这个标志了当前所处的环境。

image

更多玩法

上述我们提到,HyperSnips支持Javascript,且放在global中的函数可以全局通用。考虑到VSCode插件本质上也是JavaScript写的,那么一些小插件能做的事情,HyperSnips为什么不能做?

在global区域中放置如下代码:

const vscode = require("vscode");
var editor=vscode.window.activeTextEditor
var document=editor.document

然后发现,你可以使用 VSCode 的 API 接口了!

可能只需要几行代码,你就能做出一个“插件”!

好么,既然能够编程了,那就……没有什么好怕的了( ̄︶ ̄*))

  • 比如,四行代码加在global区域中:
setInterval(function(){myTimer()},1000);
function myTimer(){
    vscode.window.setStatusBarMessage(new Date().toLocaleTimeString());
}

你就得到了一个在状态栏显示时间的小插件!

image

  • 再比如,在global 中加入如下函数
function cycle(arr,str){
    let count = 0 ;
    while (str!=arr[++count]&&count<arr.length);
    return arr[(count+1)%arr.length]
}

然后考虑到分号;在LaTeX中几乎用不到,而且Tab太容易和其他快捷键冲突,于是放一些类似于这样的片段

snippet `(\\rightarrow|\\Rightarrow|\\longrightarrow|\\Longrightarrow|\\to|\\implies)(| );` "change ⇨" Ai
``
let r=["\\rightarrow","\\Rightarrow","\\longrightarrow","\\Longrightarrow","\\to","\\implies"];
rv=cycle(r,m[1])+m[2];
``
endsnippet

然后有趣的就来了:

image

按下分号,可以换一个样式。虽然没什么用,但是很好玩啊哈哈哈哈 灵感来自 @张同学

甚至括号也不在话下(当然程序就更长一些):

image

  • 再比如,原生的hyperSnips插件没有提供{VISUAL} 变量(当前选中的文本),不妨利用API写一个:在global里加上:
// get ActiveTextEditor

vscode.window.onDidChangeActiveTextEditor((e) => {
    editor=vscode.window.activeTextEditor;
    document=editor.document
});


let selectedText = "";

// get selected text

vscode.window.onDidChangeTextEditorSelection((e) => {
    const newSelectedText = e.textEditor.document.getText(e.selections[0]);
    if (newSelectedText) {
        selectedText = newSelectedText;
    }
});

// return text

function VISUAL() {
    let sText=selectedText.replace(/\\\\/g,"\\\\\\ ").replace(/\}/g,"\\}");
    selectedText="";
    return sText;
}

然后比如配置如下的片段:

context math(context)
snippet `Aln` "align" iA
\begin{aligned}
    ``rv = VISUAL();``$0
\end{aligned}
endsnippet

就可以使用了
image

尽管有时有bug,但是至少管用啊

所以现在,仅剩的限制就是想象力了吧

Bug

  • 当叠加了太多的占位符时,可能出现多光标。这是VSCode自身的Bug
  • 偶尔的环境/作用域识别错误,需要重开一下文件

参考:

欢迎关注、点赞、交流~~~