lucky npm
此插件的主要功能是方面使用 npm install,npm run dev,npm run build 命令；搭配 vue 腳手架 Vue+webpack+vuex+router更加舒適哦
效果圖：
一、環境搭建
1、npm install -g yo generator-code 安裝腳手架;
2、yo code 創建項目
本人選擇的是：javascript
創建好之後系統會自動生成一個 package.json 和 extension.js 文件；
二、package.json 配置
{
"name": "lucky-npm", //插件名稱
"displayName": "lucky npm",
"description": "",
"version": "1.0.1",
"publisher": "mrgao",
"engines": {
"vscode": "^1.32.0"
},
"repository": {
"type": "git",
"url": "git+https://github.com/MrGaoGang/lucky_start.git"
},
"categories": [
//分類
"Other"
],
"icon": "icon/logo.png", //logo
"activationEvents": [
//激活方式
"workspaceContains:package.json",
"onCommand:lucky.gao.extension.install",
"onCommand:lucky.gao.extension.start_dev",
"onCommand:lucky.gao.extension.build_pro"
],
"main": "./extension.js", //入口文件
"contributes": {
"snippets": [
//自定義一些代碼模板（可以嘗試輸入fetch）
{
"language": "javascript",
"path": "./src/snippet/snippet.json"
}
],
"views": {
//視圖
"explorer": [
{
//在資源管理器中的視圖，id爲mrgao_luckys，名字爲LUCKY NPM
"id": "mrgao_luckys",
"name": "LUCKY NPM"
}
]
},
"commands": [
//有哪些命令
{
"command": "lucky.gao.extension.install",
"title": "安裝依賴(install)"
},
{
"command": "lucky.gao.extension.start_dev",
"title": "啓動測試環境(dev)"
},
{
"command": "lucky.gao.extension.build_pro",
"title": "構建生產版本(pro)"
}
],
"menus": {
//菜單，是否右鍵顯示菜單，其中group爲分類,
"editor/context": [
{
"when": "editorFocus",
"command": "lucky.gao.extension.install",
"group": "6_luck"
},
{
"when": "editorFocus",
"command": "lucky.gao.extension.start_dev",
"group": "6_luck"
},
{
"when": "editorFocus",
"command": "lucky.gao.extension.build_pro",
"group": "6_luck"
}
]
}
},
"scripts": {
"postinstall": "node ./node_modules/vscode/bin/install",
"test": "node ./node_modules/vscode/bin/test"
},
"devDependencies": {
"typescript": "^3.3.1",
"vscode": "^1.1.28",
"eslint": "^5.13.0",
"@types/node": "^10.12.21",
"@types/mocha": "^2.2.42"
}
}
1. activationEvents 介紹
激活插件的方式
- onLanguage 激活
發出此激活事件，只要解析爲某種語言的文件被打開，就會激活感興趣的擴展。
"activationEvents"：[
" onLanguage：python "
]
可以使用數組中的單獨 onLanguage 條目聲明多種語言 activationEvents。
"activationEvents"：[
" onLanguage：json ",
" onLanguage：markdown ",
" onLanguage：typescript "
]
- onCommand 加載方式
發出此激活事件，並且只要調用命令，就會激活當前擴展：
" activationEvents "：[
" onCommand：extension.sayHello "
]
- onDebug 加載方式
並在啓動調試會話之前激活當前擴展：
" activationEvents "：[
" onDebug "
]
onDebugInitialConfigurations
onDebugResolve
這是兩個更細粒度的 onDebug 激活事件：
onDebugInitialConfigurations 在調用 provideDebugConfigurations 方法之前觸發 DebugConfigurationProvider。
onDebugResolve:type 在調用指定類型的 resolveDebugConfiguration 方法之前觸發 DebugConfigurationProvider。
經驗法則：如果調試擴展的激活是輕量級的，請使用 onDebug。如果它是重量級的，則使用 onDebugInitialConfigurations 和/或 onDebugResolve 取決於是否 DebugConfigurationProvider 實施相應的方法 provideDebugConfigurations 和/或 resolveDebugConfiguration。有關這些方法的更多詳細信息，請參閱使用 DebugConfigurationProvider。
- workspaceContains 激活方式
每當打開文件夾並且文件夾包含至少一個與 模式匹配的文件時，就會激活此激活事件並激活當前擴展。
" activationEvents "：[
" workspaceContains：** /。editorconfig "
]
- onFileSystem 激活方式
發出此激活事件，只要讀取特定方案中的文件或文件夾，就會激活感興趣的擴展。這通常是 file-scheme，但是對於自定義文件系統提供程序，有更多的方案可以實現，例如 ftp 或 ssh。
" activationEvents "：[
" onFileSystem：sftp "
]
- onView 激活方式
發出此激活事件，只要展開指定 ID 的視圖，就會激活當前擴展：
" activationEvents "：[
" onView：nodeDependencies "
]
- onUri 激活方式
發出此激活事件，只要打開該擴展的系統範圍的 Uri，就會激活感興趣的擴展。Uri 計劃固定爲 vscode 或 vscode-insiders。Uri 權限必須是擴展的標識符。Uri 的其餘部分是任意的。
" activationEvents "：[
" onUri "
]
如果 vscode.git 擴展名定義 onUri 爲激活事件，則會在以下任何一個 Uris 中打開它：
vscode://vscode.git/init
vscode://vscode.git/clone?url=https%3A%2F%2Fgithub.com%2FMicrosoft%2Fvscode-vsce.git
vscode-insiders://vscode.git/init （對於 VS Code Insiders）
- onWebviewPanel 激活方式
每當 VS Code 需要使用匹配恢復 webview 時，將發出此激活事件並激活當前擴展 viewType。
例如，onWebviewPanel 的聲明如下：
" activationEvents "：[
" onWebviewPanel：catCoding "
]
當 VS Code 需要使用 viewType 恢復 webview 時，將導致擴展被激活：catCoding。viewType 在調用中設置 window.createWebviewPanel，您需要有另一個激活事件（例如，onCommand）來初始激活您的擴展並創建 webview。
- * 激活方式
該*激活事件發出後，每當 VS 代碼啓動感興趣的擴展將被激活。爲確保良好的最終用戶體驗，請僅在您的用戶使用其他激活事件組合時纔在擴展中使用此激活事件。
" activationEvents "：[
" * "
]
contributes介紹
詳情請見 contributes介紹
三、常用 API
這裏主要介紹一下 extension 中的一些常用命令。官方 API 請見: vscode api
1. 命令
- 命令註冊
//註冊命令
vscode.commands.registerCommand('lucky.hello', () => {
});
//註冊之後必須在package.json中配置:
{
"contributes": {
"commands": [{
"command": "lucky.hello",
"title": "Hello World"
}]
}
}
//
- 命令執行
//vscode.open爲vscode自帶命令（也可以使用自己的命令），可以用來打開一個頁面
vscode.commands.executeCommand(
"vscode.open",
vscode.Uri.parse(`https://code.visualstudio.com/updates/`)
);
- 獲取所有命令
vscode.commands.getCommands(false);
//會返回所有命令 接收一個參數:是否顯示系統自帶的內部命令,此處Wiefalse
2. 顯示
vscode.window.showInformationMessage("我是info信息！");
vscode.window.showErrorMessage("我是錯誤信息！");
vscode.window.setStatusBarMessage("設置狀態欄的消息");
//帶回調的提示
vscode.window
.showInformationMessage("是否要做什麼.....？", "是", "否", "不再提示")
.then(result => {
if (result === "是") {
} else if (result === "不再提示") {
// 其它操作
}
});
3. window
- 創建一個終端並輸入命令
let terminalA = vscode.window.createTerminal({ name: "我是終端的名字" });
terminalA.show(true);
terminalA.sendText("npm start"); //輸入命令
- 顯示一個輸入框，讓用戶輸入一個字符串
/**
* 打開輸入框以詢問用戶輸入。
undefined如果輸入框被取消（例如按ESC），則返回值。否則，返回的值將是用戶鍵入的字符串，如果用戶沒有輸入任何內容，則返回值爲空，但是單擊"確定"將輸入框解除。
* */
const result = vscode.window.showInputBox({
prompt: "請輸入版本號，",
value: "默認值",
placeHolder: "提示",
valueSelection: [len, len]
});
result.then(inputValue => {
// 是按下ESC鍵
if (typeof _versionName === "undefined") return;
//按下enter鍵
});
- 創建樹狀視圖
vscode.window.registerTreeDataProvider('viewId', treeProvider);
//viewId對應package.json中id
"contributes": {
"views": {
"explorer": [
{
"id": "viewId",
"name": "NPM Tools"
}
]
},
}
//treeProvider請見此插件源碼。
- 打開文檔
vscode.workspace.openTextDocument(vscode.Uri.file("文件路徑)).then(
document => vscode.window.showTextDocument(document)
)
4、環境
- vscode.env.appName //當前編輯器的名稱
- vscode.env.appRoot //打開的根目錄
- vscode.env.language //用戶的語言環境