摸鱼时间写一个 VScode 插件 给项目目录文件添加文本描述

Posted 流星蝴蝶没有剑

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了摸鱼时间写一个 VScode 插件 给项目目录文件添加文本描述相关的知识,希望对你有一定的参考价值。

VScode 插件 对项目的文件、目录描述

第一次写vscode插件,遇到不少坑,插件还在更新中。。。

想法其实在刚刚接触web代码编程的时候,就有想过要找这种功能的插件,一直没有找到,就拖到了现在。

代码编程的灵感来自于idea文件描述插件【TreeInfotip】。期待高效率开发。

在公司写了项目才发现,项目结构是真的长,过了一个礼拜天回来,忘记项目中文件的作用了,还得找半天。摸鱼的时间,写个目录描述插件。

1. 插件效果

  • 右键文件或者目录即可添加描述
  • 输入框输入描述
  • 点击插件生成的 DirectoryV2.json 文件 即可查看,文件在项目根目录
  • 这样以后想要修改代码的时候,可以很快的找到需要修改的文件,不用在想半天这个文件时干嘛的,省了不少蛋白质。
  • 支持右键菜单
    目前打开文件还有一些bug,遇到图片就无法打开了,还在优化中。

2. 本地安装【插件暂未发布微软,还在完善中】

  • Git 下载项目:
    不需要修改代码的朋友,下载之后可以直接将 vsix文件安装到软件中

3. 部分代码:

项目配置文件,主要需要注意 activationEventscontributes

package.json


    "name": "file-desc",
    "displayName": "file-desc",
    "publisher": "file-descr",
    "description": "file-description",
    "version": "1.0.7",
	"private": true,
	"license": "MIT",
    "engines": 
        "vscode": "^1.70.0"
    ,
    "categories": [
        "Other"
    ],
    "activationEvents": [
        "onCommand:vsplugin.fileDescJson",
        "onCustomEditor:catCustoms.catScratch"
    ],
    "main": "./dist/extension.js",
    "contributes": 
        "commands": [
            
                "command": "vsplugin.fileDescJson",
                "title": "编辑文件或目录描述"
            
        ],
        "menus": 
            "explorer/context": [
                
                    "command": "vsplugin.fileDescJson",
                    "group": "MyGroup@1"
                
            ]
        ,
        "customEditors": [
            
                "viewType": "catCustoms.catScratch",
                "displayName": "项目描述预览",
                "selector": [
                    
                        "filenamePattern": "DirectoryV2.json"
                    
                ]
            
        ]
    ,
    "scripts": 
        "vscode:prepublish": "npm run package",
        "compile": "webpack",
        "watch": "webpack --watch",
        "package": "webpack --mode production --devtool hidden-source-map",
        "compile-tests": "tsc -p . --outDir out",
        "watch-tests": "tsc -p . -w --outDir out",
        "pretest": "npm run compile-tests && npm run compile && npm run lint",
        "lint": "eslint src --ext ts"
    ,
    "icon": "static/image/wxgzh_logo.png",
    "keywords": [
        "file",
        "fileDescJson",
        "description",
        "desc",
        "descr"
    ],
    "repository": 
        "type": "git",
        "url": "https://gitee.com/beautiful_corridors/file-desc/tree/main/"
    ,
    "devDependencies": 
        "@types/vscode": "^1.70.0",
        "@types/glob": "^7.2.0",
        "@types/mocha": "^9.1.1",
        "@types/node": "16.x",
        "@typescript-eslint/eslint-plugin": "^5.31.0",
        "@typescript-eslint/parser": "^5.31.0",
        "eslint": "^8.20.0",
        "glob": "^8.0.3",
        "mocha": "^10.0.0",
        "typescript": "^4.7.4",
        "ts-loader": "^9.3.1",
        "webpack": "^5.74.0",
        "webpack-cli": "^4.10.0",
        "@vscode/test-electron": "^2.1.5",
        "vscode-test": "^1.4.0"
    ,
    "dependencies": 
        "fast-xml-parser": "^3.3.4",
        "fs-extra": "^10.1.0",
        "he": "^1.2.0",
        "mime": "^3.0.0",
        "xml-js": "^1.6.11",
        "xml2js": "^0.4.23"
    


原本此代码是按照idea的一个插件去实现的,原本想着可以适配idea的插件,可以实现idea,VScode共同一个描述文件,后来因为xml实在是太麻烦了,暂时放弃了,有时间在继续优化吧。

这是一个入口文件,一般注册所有的功能组件都写在这里

extension.ts

// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
import * as vscode from 'vscode';
import  Utility  from './main/utility';
// import  fileDesc  from './main/fileDesc';
import  fileDescJson  from './main/fileDescJson';
// 实例化描述类
// let filedesc = new fileDesc();
// filedesc.drawDesc();
// 插件激活时触发
// 执行一次
export function activate(context: vscode.ExtensionContext) 
	console.log('插件激活!');
	// 展示视图
	let filedescjson = new fileDescJson(context);
	context.subscriptions.push(fileDescJson.register(context));
	// 是否展示
	const isShowDesc = Utility.getConfiguration().get<number>('isShowDesc', 1);
	if (isShowDesc === 0)  return; 
	// 右键按钮
	const createIndexCommand = vscode.commands.registerCommand(
		'vsplugin.fileDescJson',
		async (uri: vscode.Uri) => 
			vscode.window.showInformationMessage("请在输入框中编辑描述");
			let dirPath = uri.fsPath;
			// 输入描述
			const input = await vscode.window.showInputBox(
				placeHolder: '编辑描述【' + dirPath + '】'
			);
			if (input) 
				filedescjson.createDesc(dirPath, input);
			 else 
				vscode.window.showErrorMessage('取消编辑');
			
		
	);
	context.subscriptions.push(createIndexCommand);
	// 读取配置文件【待 更新】
	// Utility.getConfiguration().update("isShowDesc", 0);



// 当插件失活时触发
export function deactivate()  

fileDescJson.ts


import * as fs from 'fs-extra';
import * as vscode from 'vscode';
import * as path from 'path';
import  writeFile  from 'fs';
// import * as mime from 'mime'

// eslint-disable-next-line @typescript-eslint/naming-convention
export class fileDescJson implements vscode.CustomTextEditorProvider 

    // 插件所在路径
    private resourcesDir = path.posix.join(__dirname);
    // 项目路径
    private cwd = vscode.workspace.rootPath;
    // 项目路径下的配置文件
    private jsonName = "/DirectoryV2.json";
    // 保存所有的描述
    private nowJson: any;
    private static readonly viewType = 'catCustoms.catScratch';

    // 注册页面打开自定义重绘
    public static register(context: vscode.ExtensionContext): vscode.Disposable 
        const provider = new fileDescJson(context);
        const providerRegistration = vscode.window.registerCustomEditorProvider(fileDescJson.viewType, provider);
        return providerRegistration;
    

    // 构造
    constructor(
        private readonly context: vscode.ExtensionContext
    ) 
        this.cwd = this.cwd.replace(/\\\\/g, '/');
    


    // 定义更新页面数据函数
    updateWebview() 
    ;
    // 实现重绘编辑器方法
    public async resolveCustomTextEditor(document: vscode.TextDocument, webviewPanel: vscode.WebviewPanel, token: vscode.CancellationToken): Promise<void> 
        webviewPanel.webview.options = 
            enableScripts: true,
        ;

        // 接受页面事件
        webviewPanel.webview.onDidReceiveMessage(e => 
            switch (e.type) 
                case 'reDesc': // 编辑描述
                    this.reNameJson(e.path);
                    return;
                case 'openFile': // 打开文件
                    this.openFile(e.path);
                    return;
                case 'delJson': // 删除文件
                    this.delJson(e.path);
                    return;
            
        );
        // 发送事件到页面
        this.updateWebview = async () => 
            console.log("更新");
            await this.readDesc();
            webviewPanel.webview.html = this.getHtmlForWebview(webviewPanel.webview);
        ;
        const changeDocumentSubscription = vscode.workspace.onDidChangeTextDocument(e => 
            if (e.document.uri.toString() === document.uri.toString()) 
                this.updateWebview();
            
        );
        this.updateWebview();
    


    async delJson(path: any) 
        try 
            await this.readDesc();
         catch (error) 
            this.nowJson = ;
        
        if (this.nowJson && this.nowJson.trees) 
            let i: number;
            for (i = 0; i < this.nowJson.trees.length; i++) 
                if (this.nowJson.trees[i]["path"] === path) 
                    break;
                
            
            if (i < this.nowJson.trees.length) 
                this.nowJson.trees.splice(i, 1);
                await this.writeFileJson();
                this.updateWebview();
            
        
    
    openFile(path: any) 
        throw new Error('Method not implemented.');
    
    async reNameJson(path: any) 
        const input = await vscode.window.showInputBox(
            placeHolder: '编辑描述【' + path + '】'
        );
        if (input) 
            this.createDesc(this.cwd + path, input);
         else 
            vscode.window.showErrorMessage('取消编辑');
        
    

    // 添加一项写入文件 dirPath 文件路径,内容input
    async createDesc(dirPath, input) 
        try 
            await this.setPathAndName(dirPath, input);
         catch (error) 
            console.log("配置文件写入失败");
        
        this.writeFileJson();
    

    // 数据写入文件
    async writeFileJson() 
        try 
            await fs.writeFileSync(this.cwd + this.jsonName, JSON.stringify(this.nowJson, null, 4), 
                encoding: "utf8",
                flag: "w+"
            );
         catch (error) 
            console.log("文件写入有点错了");
        
    

    // 读取xml并解析
    async readDesc() 
        let jsonStr: any;
        try 
            jsonStr = await fs.readFileSync(this.cwd + this.jsonName, "utf8");
         catch (error) 
            this.nowJson = ;
            return;
        
        if (jsonStr) 
            try 
                this.nowJson = JSON.parse(jsonStr);
                vscode.window.showInformationMessage("文件目录备注加载完成!");
             catch (error) 
                console.log(error.message);
                this.nowJson = ;
            
        
    


    // 编辑路径描述xml
    async setPathAndName(dirPath, title) 
        var extension = "";
        try 
            if (!fs.lstatSync(dirPath).isDirectory()) 
                extension = path.extname(dirPath).slice(1);
                if (extension === "")  extension = "*"; 
            
         catch (error) 
            console.log(error);
        
        dirPath = dirPath.replace(/\\\\/g, '/');
        dirPath = dirPath.replace(this.cwd, '');
        // eslint-disable-next-line @typescript-eslint/naming-convention
        let tree =  "path": dirPath, "title": title, "extension": extension ;
        try 
            await this.readDesc(); // 实时同步描述文件
         catch (error) 
            this.nowJson = ;
        
        if (this.nowJson && this.nowJson.trees) 
            let i: number;
            for (i = 0; i < this.nowJson.trees.length; i++) 
                if (this.nowJson.trees[i]["path"] === tree["path"]) 
                    break;
                
            
            if (i >= this.nowJson.trees.length) 
                this.nowJson.trees.push(tree);
             else 
                this.nowJson.trees[i] = tree;
            
         else 
            this.nowJson =  trees: [tree] ;
        
        console.log(this.nowJson);
    

    // json解析为html目录结构
    private getHtmlForWebview(webview: vscode.Webview): string 
        // Local path to script and css for the webview
        const jqueryUri = webview摸鱼时间写一个 VScode 插件 给项目目录文件添加文本描述

摸鱼时间写一个 VScode 插件 给项目目录文件添加文本描述

VSCode摸鱼插件 — FreeWindow

VSCode摸鱼插件 — FreeWindow

上班摸鱼,刚刚发现在 VScode 中可玩魂斗罗,超级玛丽

vscode必装插件