vscode 自己实现补全提示插件

vscode 自己实现补全提示插件

月光魔力鸭

2020-11-04 02:58 阅读 77 喜欢 1 vs code 补全插件

最近做个nodejs的项目,使用了thinkjs 3.0 的框架,编辑器为vs code ,之前用的好好的,每次 . 后都有提示的,可是使用了多模块后发现.. model的提示没有了..

太惆怅了,用了一阵子后实在难受,想起了vs code 可以加插件,当然找了下也没有找到,于是准备做个简易的插件自用。

功能

实现一个vs code 的插件,用于thinkjs 多模块下的model的函数提示,类似以下。

文档

就大部分简易插件来说,看下官方文档+demo,基本就差不多了,如果还需要一些更加深入的实现,就需要详细看api了。

按照文档进行准备

需要安装一些脚手架或打包工具。

npm install -g yo generator-code

脚手架命令

yo code 
//然后生成后,直接 code ./demo ,按F5 调试。

打包工具

npm install vsce -g 

打包命令

vsce package
代码

文件总共有两个:package.json ,extension.js

package.json

{
    "name": "completions-sample",
    "displayName": "Completion Item Provider Sample",
    "version": "0.0.2",
    "publisher": "chrunlee",
    "engines": {
        "vscode": "^1.32.0"
    },
    "categories": [
        "Other"
    ],
    "activationEvents": [
        "*"
    ],
    "main": "extension.js"
}

extension.js

/**
 * 主要用于thinkjs开发的时候查找对应的函数
 * model的函数。
 */

const vscode = require('vscode');
const path = require('path');
const fs = require('fs');
const vm = require('vm');

module.exports.activate = function activate(context) {

    const provider2 = vscode.languages.registerCompletionItemProvider(
        'javascript',
        {
            provideCompletionItems(document, position) {

                // get all text until the `position` and check if it reads `console.`
                // and if so then complete if `log`, `warn`, and `error`
                const linePrefix = document.lineAt(position).text.substr(0, position.character);
                //当符合 this.model(.*). 的时候出发
                if(!/this\.model\([\s\S]*\)\.$/.test(linePrefix)){
                    return undefined;
                }

                //匹配出路径
                const fileName = document.fileName;
                //根据fileName 查找
                let rootPath = fileName.substr(0,fileName.indexOf('src'));
                if(!rootPath){
                    return undefined;
                }
                let srcPath = path.join(rootPath,'src');
                //扫描该路径下所有model文件夹,直到查找到目标位置。
                let rst = /model\((.*)\)/.exec(linePrefix)[1];
                let finalPath = '';
                if(rst.indexOf(',') >-1){//多级模块
                    let arr = rst.split(',');
                    let moduleName = arr[2].replace(/'/g,'').trim();
                    let modelName = arr[0].replace(/'/g,'').trim();
                    finalPath = path.join(srcPath,moduleName,'model',modelName+'.js');
                }else{
                    let modelName = rst.replace(/'/g,'').trim();
                    finalPath = path.join(srcPath,'model',modelName+'.js');
                }
                console.log(finalPath);
                //解析js文件 ,获取内部函数数据
                if(fs.existsSync(finalPath)){
                    let content = fs.readFileSync(finalPath).toString('utf8');
                    let list = content.split('\r\n');

                    return list.filter(t=>{
                        return t.indexOf('async') > -1;
                    }).map(function(t){
                        return t.replace('async','').replace('{','').trim();
                    }).map(t=>{
                        return vscode.CompletionItem(t,vscode.CompletionItemKind.Method);
                    })

                }else{
                    return undefined;
                }

            }
        },
        '.' // triggered whenever a '.' is being typed
    );

    context.subscriptions.push(provider2);
}

说明

本插件自用,所以做的校验很粗糙,基本上只符合自己的文档目录体系,其实本来想做的更加适配来着..实在太困,先自己用着再说。 至于获取函数.. 这个没有找到,应该是vm方面的知识,虽然经常用nodejs ,但是vm 实在没啥接触,也卡了壳了,直接用字符串去识别了。

打包后安装

在此处,选择打包后的vsix ,安装成功,然后试了试,感觉还是挺爽的 。。 O(∩_∩)O哈哈~

转载请注明出处: https://chrunlee.cn/article/vs-code-tip-model.html


感谢支持!

赞赏支持
提交评论
评论信息(请文明评论)
暂无评论,快来快来写想法...
推荐
错误:The operation is insecure . 在使用canvas的 toDataUrl的时候报错,看了很多资料,基本上都说是设置跨域,但是我一直都有的啊。其实,只是顺序错了,setAttribute('crossOrigin','Anonymous') 要在设置 src之前设置。
整理下关于axios的使用,一些常用的调用、处理以及其他。
在今天之前,我对canvas中rotate其实是一脸蒙逼的... 虽然之前有做过图片旋转,但那是在他人的基础上直接修改的,至于为啥会这样..讲真,还真没注意过,但是今天又需要用到这块了,实在搞不定了,找了各种资料,终于明白了.. 坐标系的问题。
在使用echarts 来做统计报表的时候,由于数量较多,准备将同类型的相同属性抽取出来,然后用来做默认属性的。结果发现一个问题
需求如下:有一张大图,需要显示大图中的一小部分,目前能知道的时候小图的宽高和坐标,同时大图有一个旋转角度可以知道,目标就是把小图正确的显示出来。
在页面中不同的frame之间进行相互调用的话,我们可以通过frame获取对应的window然后进行调用,但是如果是浏览器不同的tab之间呢?
jsQR 是一款纯粹的由javascript实现的二维码识别库,可以在浏览器端使用,也可以在后端node.js环境使用。我之前使用过其他的识别库,例如:qrcode-reader 或其他,在使用上都比较麻烦,而且识别率并不高。jsQR是后来发现的,感觉(没有实际对比验证)jsQR识别率要更高些,使用起来也更简单,不需要安装其他依赖软件。
this 是 JavaScript 的一大难点,多年经验的前端程序员都可能对这方面模糊。this 在大量的函数、类库中都有使用,理清显式绑定和隐式绑定有助于理解或书写这类函数。