vscode插件学习:notebookforcode-vscode笔记插件前言二、使用步骤三、插件代码-导出四、学习借鉴总结

106 阅读 0 评论 70 点赞

我是靠谱客的博主落后灰狼，最近开发中收集的这篇文章主要介绍vscode插件学习:notebookforcode-vscode笔记插件前言二、使用步骤三、插件代码-导出四、学习借鉴总结，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

前言

本插件的作用,这个插件仅仅是在学习vscode插件时编写的,其中操作界面主要是使用webview,这在vscode中是非常消耗性能的,但是在学习的时候我们还是可以深入学习一下的;

插件灵感来源于根哥的同类型插件!

一、插件的功能？

根据代码片段记录笔记;如下图所示

导出笔记为markdown文件,如下图所示

对笔记进行分类,等等

功能很少,还需完善

二、使用步骤

插件市场进行搜索 "jovi" 后进行插件安装

鼠标选中您需要保存笔记的代码片段,点击鼠标右键

在显示的菜单中"新增代码笔记" 即可打开笔记本新增界面如一图显示

三、插件代码-导出

导出时目前只有markdown的文本格式

同时使用vscode自带的api进行相关保存操作!

importNote(global, message) {
    let saveData = `
### 梦回笔记本
---
    `;
    util.mhReadFile(exContext, message.value.dataPath, async (err, data) => {
      if (err) {
        vscode.window.showErrorMessage(err.msg || '笔记获取失败!');
        invokeCallback(global.panel, message, { data: null, type: 'error' });
      } else {
        data.data.forEach((item, index) => {
          saveData += `
### ${index + 1}, ${item.title} 
<kbd>文件路径:</kbd> ${'`' + item.filePath + '`'}
${'```' + item.type} 
${item.code} 
${'```'} 
${item.des} 
          `;
        });
        // 让用户手动选择文件的的存储路径
        const uri = await vscode.window.showSaveDialog({
          title: '选择保存笔记的路径(必须输入文件名称!)',
          filters: {
            markdown: ['md'],
          },
          saveLabel: '保存笔记',
        });
        if (!uri) {
          return false;
        }
        vscode.workspace.fs.writeFile(uri, new Uint8Array(Buffer.from(saveData))); // 写入文件
        invokeCallback(global.panel, message, { data: null, type: 'ok' });
      }
    });
  },