需求

由于经常记笔记,手打 Markdown 的 Code Fence 很累。所以想开发一个插件,能够直接从代码复制到 markdown 格式。

开发一个 VSCode 插件,能够:

  • 复制选中代码,并以 Markdown 格式存放于剪贴板中
  • 能够显示代码所属的文件名,最好还能有行数。能自动检测语言。

已有信息

Liiked/VS-Code-Extension-Doc-ZH: VS Code 插件开发文档 - 中文版 (github.com)

搭建脚手架

执行:

PS C:\Users\i> yarn global add yo generator-code

然后输入有关信息:


     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of extension do you want to create? New Extension (JavaScript)
? What's the name of your extension? Copy Code as Markdown
? What's the identifier of your extension? copy-code-as-markdown
? What's the description of your extension? Help you to copy code with markdown fences and filename
? Enable JavaScript type checking in 'jsconfig.json'? No
? Initialize a git repository? Yes
? Which package manager to use? yarn

进入项目:

cd copy-code-as-markdown
code-insiders .

然后直接按下 F5,就能运行插件。

在命令面板 (Ctrl+Shift+P) 中输入 Hello World 命令。然后你会看到右下角的欢迎消息

如何实现需求

可以分为几步:

  1. 注册一个命令
  2. 获取选中的文本
  3. 获取当前文件的扩展名
  4. 获取当前文件的文件名
  5. 设置剪贴板内容

activiate 方法中,加入:

	let disposable2 = vscode.commands.registerCommand('copy-code-as-markdown.CopySelectionAsMarkdown', function () {
		var editor = vscode.window.activeTextEditor;
		var selection = editor.selection;
		var text = editor.document.getText(selection);
		vscode.window.showInformationMessage(text);
	});

	context.subscriptions.push(disposable2);

package.json 中加入命令:

	"activationEvents": [
        "onCommand:copy-code-as-markdown.helloWorld",
+       "onCommand:copy-code-as-markdown.CopySelectionAsMarkdown"
	],
	"contributes": {
		"commands": [{
            "command": "copy-code-as-markdown.helloWorld",
            "title": "Hello World"

+		},{
+            "command": "copy-code-as-markdown.CopySelectionAsMarkdown",
+            "title": "Copy selection code as Markdown"
+		}]
	},

测试下:

image-20210806141657096

修改代码:


	let disposable2 = vscode.commands.registerCommand('copy-code-as-markdown.CopySelectionAsMarkdown', function () {
		var editor = vscode.window.activeTextEditor;
		var selection = editor.selection;
		var text = editor.document.getText(selection);
		if(text){
			const lang = editor.document.languageId
			const filename = editor.document.uri.path
			const mdText = `*${filename}\*\\n\\`\\`\\`${lang}\n${text}\n\`\`\``			
			vscode.env.clipboard.writeText(mdText)
		}
		vscode.window.showInformationMessage(text);
	});

	context.subscriptions.push(disposable2);

测试代码:

#define N 123
int main() {
    int acc = 0;
    for (int i = 0; i < N; i++){
        acc += i;
    }
    return 0
}

插件上架

访问 Azure DevOps Services | Microsoft Azure,用 Github 账号登进去。绑定 Microsoft 账号,创建组织,获取 Token:

image-20210807150934562

image-20210807151101457

安装发布工具:

$ yarn global add vsce

创建作者:

Create Publisher | Visual Studio Marketplace

设置作者名:

image-20210807151419759

打包和发布:

$ vsce package
$ vsce publish

直接发布

也可以不获取 token,直接到:

https://marketplace.visualstudio.com/manage/publishers/yourname

发布

main.go 22:

resp := commands.Execute(os.Args[1:])

更新

修改版本号,提交到 Git。然后重新打包发布即可。

我的插件

此插件已经上架,在这:Copy Code as Markdown - Visual Studio Marketplace

开源地址:pluveto/copy-code-as-markdown: VSCode extension. It helps you to copy code with markdown fences and filename (github.com)