VS Code插件開發指南(view-readme)

yy736044583 發布于2019-08-21 15:32 / 2888人閱讀

摘要：本次給大家帶來的分享是關于插件的一些經驗，分享的內容是我寫的一個插件。為了解決上面這個問題，我開發了這個插件。

本次給大家帶來的分享是關于VS Code插件的一些經驗，分享的內容是我寫的一個插件：view-readme。

開發背景

在本地安裝好所有npm包后，有的時候想看看某個模塊的文檔，了解其特性以及如何使用。于是打開node_modules文件夾，大家都知道，這個文件夾里面的文件是非常多的，很難定位到我們想看的模塊，并且這么多的目錄樹展開后，嚴重影響到編輯的使用。

為了解決上面這個問題，我開發了view-readme這個插件。在任何時候你想查看npm包的文檔時，按快捷鍵并輸入想要查看的模塊名稱，自動為你打開該模塊的README.md文檔。

環境準備

1.安裝Yeoman和VS Code腳手架

npm install -g yo generator-code

2.生成項目模版

yo code

3.配置選項

選擇第二項（JavaScript）

擴展名稱

擴展唯一標識

擴展描述

發布作者

是否創建git倉庫

4.模版目錄

.
|____.eslintrc.json       
|____.gitignore                
|____.vscode                     // vscode配置目錄
| |____extensions.json
| |____launch.json
| |____settings.json
|____.vscodeignore               // 發布時過濾掉的文件
|____CHANGELOG.md                // 發布記錄
|____extension.js                // 插件入口
|____jsconfig.json               // js規則
|____package.json                // 資源配置
|____README.md                   // 文檔
|____test                        // 自動化測試目錄
| |____extension.test.js
| |____index.js
|____vsc-extension-quickstart.md

5.運行

打開新窗口

加載插件目錄

進入調試

Launch Extension

打開命令面板（cmd+shift+p）

輸入hello world，回車

彈窗Hello World提示

插件代碼

資源配置介紹

{
    "name": "vscode-view-readme",
    "displayName": "view-readme",
    "description": "Open readme.md at nearly path of node_modules quickly. ",
    "version": "0.1.3",
    "publisher": "ansenhuang",
    "icon": "images/logo128.png",
    "engines": {
        "vscode": "^1.10.0"
    },
    "galleryBanner": {                     // 發布后的預覽頁配置
        "color": "#eff1f3",                // banner顏色
        "theme": "light"                   // 主題（light, dark）
    },
    "categories": [
        "Other"                            // 插件分類
    ],
    "activationEvents": [                  // 啟動項
        "onCommand:viewReadme.showLocal"   // 觸發這個命令時啟動
    ],
    "main": "./src/extension",             // 插件入口
    "contributes": {                       // 配置
        "configuration": {                 // 定義默認參數
            "type": "object",
            "title": "View readme configuration",
            "properties": {                // 這里定義的參數可以在vscode中取到
                "view-readme.savePath": {
                    "type": "string",
                    "default": "",
                    "description": "Save in local path when request remote."
                },
                "view-readme.npmUrl": {
                    "type": "string",
                    "default": "https://registry.npmjs.org/",
                    "description": "Get data from remote url."
                }
            }
        },
        "commands": [                                 // 命令配置
            {
                "command": "viewReadme.showLocal",    // 注冊的命令
                "title": "Readme: Open markdown file" // 命令顯示在面板的標題
            }
        ],
        "keybindings": [                              // 快捷鍵配置
            {
                "command": "viewReadme.showLocal",    // 要觸發的命令
                "key": "ctrl+shift+l",                // windows系統的快捷鍵
                "mac": "cmd+shift+l"                  // mac系統的快捷鍵
            }
        ]
    },
    "scripts": {
        "postinstall": "node ./node_modules/vscode/bin/install"
    },
    "devDependencies": {
        "@types/mocha": "^2.2.32",
        "@types/node": "^6.0.40",
        "eslint": "^3.6.0",
        "mocha": "^2.3.3",
        "typescript": "^2.0.3",
        "vscode": "^1.0.0"
    }
}

src/extension.js

var vscode = require("vscode");
var Local = require("./Local");
var { INPUT_PROMPT } = require("./config");

function activate (context) {
    // 注冊命令
    var disposableLocal = vscode.commands.registerCommand("viewReadme.showLocal", function () {
        vscode.window.showInputBox({  // 調出輸入框
            prompt: INPUT_PROMPT
        }).then(function (moduleName) {
            new Local(moduleName);    // 回車后執行
        });
    });

    context.subscriptions.push(disposableLocal);
}

function deactivate () {}

// exports
exports.activate = activate;
exports.deactivate = deactivate;

src/Local.js

var fs = require("fs");
var path = require("path");
var vscode = require("vscode");
var {
    MARKDOWN_PREVIEW,
    README_NAMES,
    NO_FILE,
    NOT_FOUND
} = require("./config");

function Local (moduleName) {
    this.moduleName = moduleName;

    moduleName && this.init();
}

Local.prototype = {
    init: function () {
        var files = vscode.workspace.textDocuments; // 獲取當前打開的文件路徑
        if (files.length) {
            var last = files.length - 1;
            this.handlePath(path.dirname(files[last].fileName)); // 取最后打開的文件目錄，基于這個路徑去查找node_modules目錄
        } else {
            vscode.window.showInformationMessage(NO_FILE); // 彈出提示信息
        }
    },
    handlePath: function (dir) {
        if (dir === "/") { // 已到達根目錄
            vscode.window.showInformationMessage(NOT_FOUND);
            return;
        }

        var modulePath = path.join(dir, "node_modules", this.moduleName);
        if (fs.existsSync(modulePath)) {
            this.handleReadme(modulePath); // 找到了模塊目錄
        } else {
            this.handlePath(path.dirname(dir)); // 未找到則繼續向上查找
        }
    },
    handleReadme: function (modulePath) {
        var readmeName = README_NAMES.find(function (name) {
            return fs.existsSync(path.join(modulePath, name));
        });

        if (readmeName) {
            var readmePath = path.join(modulePath, readmeName);
            vscode.commands.executeCommand(MARKDOWN_PREVIEW, vscode.Uri.parse("file://" + readmePath)); // 執行markdown命令，打開文件
        } else {
            vscode.window.showInformationMessage(NOT_FOUND);
        }
    }
};

module.exports = Local;

src/config.js

exports.MARKDOWN_PREVIEW = "markdown.showPreview";
exports.README_NAMES = ["README.md", "readme.md", "Readme.md", "README", "readme"];
exports.INPUT_PROMPT = "Enter module name";
exports.NO_FILE = "Please open file firstly.";
exports.NOT_FOUND = "Module not found!";

插件編寫完成，重新運行一下試試效果吧。

發布插件

賬號

賬號注冊

Create new account

添加Personal Access Token（地址：https://[your name].visualstudio.com/_details/security/tokens，注意Token只顯示一次，最好自己保存一份）

發布工具

安裝

npm install -g vsce

創建發布作者

vsce create-publisher (publisher name)

發布

vsce publish

打包成二進制文件

vsce package

結尾

大家可以在VS Code插件中搜索view-readme來安裝這個插件。

項目倉庫：https://github.com/ansenhuang/vscode-view-readme

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88216.html

VS Code插件開發介紹（一）

摘要：發布插件插件開發完后就可以發布了，需要安裝安裝完后，需要去注冊并生成一個。總結本文介紹了插件開發的基本流程，實現了一個簡單的插件。更多的開發技巧，可以看這個系列的第二篇插件開發介紹二前言前段時間做了一個基于命令行的效率工具，可以自動生成組件的模板代碼。自己用起來還覺得挺好，但在組內案例幾次后大家都不愿意用，究其原因還是命令行工具使用起來門檻有點高，不方便。由于組內已經統一使用VS ...

thursday 2019-08-23 12:17 評論0 收藏0
我為 VS Code 開發了一個 Deno 插件

摘要：自發布以來就備受關注，也有很多媒體和開發者稱為下一代。所以在寫這個插件之前，我又為寫了一個插件。插件提供了開箱即用的支持，開發者不需要任何配置，但是有一個前提是開發者需要使用內置的。這幾天為 Deno 開發了一個 VS Code 插件：Deno support for VSCode，GitHub 地址：https://github.com/justjavac/...。自 Deno ...

YanceyOfficial 2019-08-26 13:32 評論0 收藏0
VS Code上手與超實用插件安利

摘要：軟件跨平臺支持以及，運行流暢，可謂是微軟的良心之作微軟有這個宇宙最強，自然也不會弱宇宙最強編輯器說到代碼編輯器，我們有必要提一提還有。原文鏈接：VS Code上手與超實用插件安利工欲善其事必先利其器 Visual Studio Code (簡稱 VS Code / VSC) 是一款免費開源的現代化輕量級代碼編輯器，支持幾乎所有主流的開發語言的語法高亮、智能代碼補全、自定義熱鍵、括號...

miracledan 2019-08-21 17:46 評論0 收藏0
vs code 插件折騰記（一）

摘要：以下簡稱是微軟開發同時支持和系統且開放源代碼的代碼編輯器，并且是開源免費使用的，也是當下最受歡迎的代碼編輯器之一官網下載地址文章已更新插件折騰記二經過我一段時間的使用，發現一些插件是必不可少的，現在給大家推薦一些非常實用的插件下載好安裝打開 Visual Studio Code（以下簡稱vs code）是微軟開發同時支持Windows、Linux、和macOS系統且開放源代碼的代碼...

lidashuang 2019-08-02 16:12 評論0 收藏0
vs code 插件折騰記（一）

摘要：以下簡稱是微軟開發同時支持和系統且開放源代碼的代碼編輯器，并且是開源免費使用的，也是當下最受歡迎的代碼編輯器之一官網下載地址文章已更新插件折騰記二經過我一段時間的使用，發現一些插件是必不可少的，現在給大家推薦一些非常實用的插件下載好安裝打開 Visual Studio Code（以下簡稱vs code）是微軟開發同時支持Windows、Linux、和macOS系統且開放源代碼的代碼...

vslam 2019-08-23 16:53 評論0 收藏0