vscode-扩展插件
title: vscode-擴(kuò)展插件
categories: VSCode
tags: [vscode, 插件, 擴(kuò)展]
date: 2018-10-31 14:44:18
comments: false
因為 vscode 已經(jīng)是我的主用開發(fā)工具, 已經(jīng)拋棄了 sublime text, vs. 開發(fā) unity, shader, lua, h5 等幾乎都是用它了. 很多時候需要偷懶, 就寫個插件輔助一下. ( 工欲善其事必先利其器 )
相關(guān)資料
- https://segmentfault.com/a/1190000009795672
- 官方文檔 - https://code.visualstudio.com/docs/extensions/example-hello-world
- 中文文檔 - https://liiked.github.io/VS-Code-Extension-Doc-ZH/#/
- 官方api - https://code.visualstudio.com/docs/extensionAPI/overview
- 官方插件示例 - https://github.com/Microsoft/vscode-extension-samples
- 參考
- VSCode插件開發(fā)急速入門 - http://jdc.jd.com/archives/212586
- VSCode 插件開發(fā)初體驗 - https://www.jianshu.com/p/2ae7668785c7
- 插件機(jī)制詳述 - http://www.ayqy.net/blog/插件機(jī)制詳述_vscode插件開發(fā)筆記1/
- 清單文件package.json 說明 - https://jeasonstudio.gitbooks.io/vscode-cn-doc/content/md/擴(kuò)展API/擴(kuò)展manifest文件.html
本地插件保存路徑
可以參考 別人 寫插件的方式來寫 自己 的插件.
-
已有插件所在目錄
ospath windows %USERPROFILE%.vscode\extensions macOS ~/.vscode/extensions Linux ~/.vscode/extensions -
插件保存文件夾名字規(guī)則, [作者名].[插件名].[版本號] , 例如
官方samples
-
官方插件示例 - https://github.com/Microsoft/vscode-extension-samples
-
如果運(yùn)行時報錯. 一下步驟逐步執(zhí)行測試
-
安裝相關(guān)依賴, 直接在工作區(qū)輸入命令: npm install
-
當(dāng)前工作區(qū)已有 npm watch 任務(wù)在運(yùn)行. 可以在終端 kill. 也可直接切換成別的工作區(qū) 再切回來
-
可能是舊版本未更新, 更新一下
-
package.json 文件中 scripts 字段修改為一下內(nèi)容
"scripts": {"vscode:prepublish": "npm run compile","compile": "tsc -p ./","watch": "tsc -watch -p ./","postinstall": "node ./node_modules/vscode/bin/install","test": "npm run compile && node ./node_modules/vscode/bin/test"}, -
tasks.json 文件中
{"version": "2.0.0","tasks": [{"type": "npm","script": "watch","problemMatcher": "$tsc-watch","isBackground": true,"presentation": {"reveal": "never"}}] } -
launch.json 文件修改
{"version": "0.2.0","configurations": [{"name": "Extension","type": "extensionHost","request": "launch","runtimeExecutable": "${execPath}","args": ["--extensionDevelopmentPath=${workspaceFolder}"],"outFiles": ["${workspaceFolder}/out/**/*.js"],"preLaunchTask": "npm: watch"}] }
前置物料
初始化工程
初始化一個新工程, 命令: yo code . 這里選擇的是 ts extension 工程. 然后照著提示輸入 name, description 等等
C:\Users\Administrator>yo code_-----_ ╭──────────────────────────╮| | │ Welcome to the Visual │|--(o)--| │ Studio Code Extension │`---------′ │ generator! │( _′U`_ ) ╰──────────────────────────╯/___A___\ /| ~ |__'.___.'__′ ` |° ′ Y `? What type of extension do you want to create? New Extension (TypeScript) ? What's the name of your extension? VSC-Plugin001 ? What's the identifier of your extension? wilkeryun ? What's the description of your extension? my custom plugin ? What's your publisher name (more info: https://code.visualstudio.com/docs/tools/vscecli#_publishing-extensions)? yangxuan0261 ? Enable stricter TypeScript checking in 'tsconfig.json'? Yes ? Setup linting using 'tslint'? Yes ? Initialize a git repository? Yescreate wilkeryun\.vscode\launch.json... vscode.d.ts successfully installed!wilkeryun@0.0.1 C:\Users\Administrator\wilkeryun-
生成目錄結(jié)構(gòu)
-
package.json : 定義 入口文件, 命令, 顯示在那些地方 (左邊欄, 標(biāo)題欄 等等), 插件描述等 信息. 基本所有的配置這里
新建一個命令
在 package.json 文件中加入相關(guān)配置
{ ..."activationEvents": ["onCommand:extension.sayHello","onCommand:myext.copyLuaFileName" // 3. 激活這個命令],"main": "./out/extension","contributes": {"commands": [{"command": "extension.sayHello","title": "Hello World title"},{ // 1. 新增一個命令 myext.copyLuaFileName"command": "myext.copyLuaFileName","title": "復(fù)制lua文件" // 命名顯示名稱}],"menus": {"explorer/context": [{ // 2. 設(shè)置這個定義出現(xiàn)在左邊欄"when": "!explorerResourceIsFolder", // 自定義顯示條件, 非文件夾就顯示"command": "myext.copyLuaFileName","group": "navigation"}]}},... }在 extension.ts 文件中 注冊這個命令及對應(yīng)的相關(guān)自定義邏輯
export function activate(context: vscode.ExtensionContext) {...let run = vscode.commands.registerCommand("myext.copyLuaFileName", (fileUri) => {vscode.window.showInformationMessage('復(fù)制的文件 fileUri:' + fileUri);});context.subscriptions.push(run); }測試. 按 F5 , 會運(yùn)行一個 新的vscode進(jìn)程
打包 使用 插件
打包
-
在插件根目錄下使用命令: vsce package , 會在該目錄下生產(chǎn)一個 xxx.vsix 插件文件
F:\git_repo\wilkeryun>vsce package Executing prepublish script 'npm run vscode:prepublish'... ... A 'repository' field is missing from the 'package.json' manifest file. Do you want to continue? [y/N] y Created: F:\git_repo\wilkeryun\wilkeryun-0.0.1.vsix (7 files, 3.21KB)- TODO: 這個報錯暫時未去查
- 過程中可能會提示你先修改 README.md 文件才能打包，簡單描述功能即可。
使用
安裝, 手動安裝插件文件
然后選擇 從 VSIX 安裝…, 選擇 xxx.vsix 文件即可
可以在插件列表中看到這個插件, ctrl + shift + x 顯示插件列表
打包, 發(fā)布 參考: http://jdc.jd.com/archives/212586
發(fā)布
- 參考: https://liiked.github.io/VS-Code-Extension-Doc-ZH/#/extension-authoring/publish-extension , 獲取Personal Access Token (PAT)
創(chuàng)建發(fā)布者,
F:\git_repo\wilkeryun>vsce create-publisher wilker // wilker 這個隨意 Publisher human-friendly name: (wilker) E-mail: wolegequ@live.com // 這個郵箱是微軟的登錄賬號 Personal Access Token: **************************************************** // (PAT)Successfully created publisher 'wilker'.發(fā)布
F:\git_repo\wilkeryun>vsce publish -p hqg5tqkkjsdasdasdasdadasdasdasdasd //(PAT) Executing prepublish script 'npm run vscode:prepublish'...> wilkeryun@0.0.1 vscode:prepublish F:\git_repo\wilkeryun > npm run compile> wilkeryun@0.0.1 compile F:\git_repo\wilkeryun > tsc -p ./A 'repository' field is missing from the 'package.json' manifest file. Do you want to continue? [y/N] y Publishing yangxuan0261.wilkeryun@0.0.1... Successfully published yangxuan0261.wilkeryun@0.0.1! // 發(fā)布成功 Your extension will live at https://marketplace.visualstudio.com/items?itemName=yangxuan0261.wilkeryun (might take a few seconds for it to show up).-
然后就可以看到發(fā)布結(jié)果 (這是改了名稱和版本的截圖)
搜索使用
踩坑
-
報錯
Error: Failed Request: Unauthorized(401) - https://marketplace.visualstudio.com/_apis/gallery Be sure to use a Personal Access Token which has access to **all accessible accounts**. See https://code.visualstudio.com/docs/tools/vscecli#_common-questions for more information.沒有賦予最高權(quán)限
擴(kuò)展清單文件 package.json
每個VS Code擴(kuò)展需要一個清單文件package.json，該文件位于擴(kuò)展的根目錄中。
字段
| name | 是 | string | 擴(kuò)展的名稱，該名稱必須為小寫且不能有空格。 |
| version | 是 | string | SemVer 兼容版本. |
| publisher | 是 | string | 發(fā)布人名字 |
| engines | 是 | object | 一個至少包含vscode鍵值對的對象，該鍵表示的是本擴(kuò)展可兼容的VS Code的版本，其值不能為*。比如 ^0.10.5 表示擴(kuò)展兼容VS Code的最低版本是0.10.5。 |
| license | 否 | string | 參考 npm’s 文檔. 如果你確實需要在擴(kuò)展根目錄下有一個授權(quán)文檔，那么應(yīng)該把license值設(shè)為"SEE LICENSE IN <filename>"。 |
| displayName | 否 | string | 用于在擴(kuò)展市場中本擴(kuò)展顯示的名字。 |
| description | 否 | string | 一份簡短的說明，用來說明本插件是什么以及做什么 |
| categories | 否 | string[] | 你希望你的擴(kuò)展屬于哪一類，只允許使用這幾種值：[Languages, Snippets, Linters, Themes, Debuggers, Other] |
| keywords | 否 | array | 一組 關(guān)鍵字 或者 標(biāo)記，方便在市場中查找。 |
| galleryBanner | 否 | object | 幫助格式化市場標(biāo)題以匹配你的圖標(biāo)，詳情如下。 |
| preview | 否 | boolean | 在市場中把本擴(kuò)展標(biāo)記為預(yù)覽版本。 |
| main | 否 | string | 擴(kuò)展的入口點(diǎn)。 |
| contributes | 否 | object | 一個描述擴(kuò)展 貢獻(xiàn)點(diǎn)的對象。 |
| activationEvents | 否 | array | 一組用于本擴(kuò)展的 激活事件。 |
| dependencies | 否 | object | 你的擴(kuò)展所需的任何運(yùn)行時的Node.js依賴項，和 npm’s dependencies一樣。 |
| devDependencies | 否 | object | 你的擴(kuò)展所需的任何開發(fā)的Node.js依賴項. 和 npm’s devDependencies一樣。 |
| extensionDependencies | 否 | array | 一組本擴(kuò)展所需的其他擴(kuò)展的ID值。擴(kuò)展的ID值始終是 ${publisher}.${name}。比如：vscode.csharp。 |
| scripts | 否 | object | 和 npm’s scripts一樣，但還有一些額外VS Code特定字段. |
| icon | 否 | string | 一個128x128像素圖標(biāo)的路徑。 |
也可以查看npm’s package.json參考文檔.
范例
這里有一個完整的package.json：
{"name": "Spell","displayName": "Spelling and Grammar Checker","description": "Detect mistakes as you type and suggest fixes - great for Markdown.","icon": "images/spellIcon.svg","version": "0.0.19","publisher": "seanmcbreen","galleryBanner": {"color": "#0000FF","theme": "dark"},"license": "SEE LICENSE IN LICENSE.md","bugs": {"url": "https://github.com/Microsoft/vscode-spell-check/issues","email": "smcbreen@microsoft.com"},"homepage": "https://github.com/Microsoft/vscode-spell-check/blob/master/README.md","repository": {"type": "git","url": "https://github.com/Microsoft/vscode-spell-check.git"},"categories": ["Linters", "Languages", "Other"],"engines": {"vscode": "0.10.x"},"main": "./out/extension","activationEvents": ["onLanguage:markdown"],"contributes": {"commands": [{"command": "Spell.suggestFix","title": "Spell Checker Suggestions"}],"keybindings": [{"command": "Spell.suggestFix","key": "Alt+."}]},"scripts": {"vscode:prepublish": "node ./node_modules/vscode/bin/compile","compile": "node ./node_modules/vscode/bin/compile -watch -p ./"},"dependencies": {"teacher": "^0.0.1"},"devDependencies": {"vscode": "^0.11.x"} }相關(guān)api
關(guān)于 contributes.configuration
參考: https://code.visualstudio.com/docs/extensionAPI/extension-points#_contributesconfiguration
關(guān)于 contributes.commands
參考: https://code.visualstudio.com/docs/extensionAPI/extension-points#_contributescommands
關(guān)于 contributes.menus
參考: https://code.visualstudio.com/docs/extensionAPI/extension-points#_contributesmenus
踩坑
-
在 左邊欄 或 這編輯區(qū) 右鍵時, 可以辦當(dāng)前文件 uri 傳進(jìn)去的, 但是如果將這個 命令 注冊為快捷鍵, 使用快捷鍵時是無法獲取到這個uri的, 為 null
let run = vscode.commands.registerCommand("myext.copyLuaFileName", (fileUri) => {console.log("--- fileUri 111:", fileUri);});但是可以通過api獲取到當(dāng)前激活的文檔, 從而獲取到 fileUri
if (fileUri === undefined) {fileUri = vscode.window.activeTextEditor!.document.uri; } -
目前還不支持 vscode.window.showInformationMessage 提示框的關(guān)閉, 必須手動關(guān)閉
參考 - https://stackoverflow.com/questions/34893733/how-to-programmatically-close-vscode-windows-showinformationmessage-box
但是支持在 底部狀態(tài)欄 中顯示信息, 并設(shè)置自動關(guān)閉時間. vscode.window.setStatusBarMessage
關(guān)于 when
-
在顯示在相關(guān)菜單時有個條件 (when) 可以讓其判斷是否顯示.
"contributes": {"menus": {"editor/context": [{"when": "config.wilker-cfg.showLuaCopy && editorLangId == lua && !inOutput", // 在 configuration 中定義這個配置, 必須是 bool 值"command": "wilker-ext.copyLuaFileName","group": "myGroup@110"}]},"configuration": {"type": "object","title": "Wilker Plugin Configuration","properties": {"wilker-cfg.showLuaCopy": { // 這個值可以暴露給用戶設(shè)置在 全局 或 工作區(qū)"type": "boolean","default": false,"description": "是否顯示 復(fù)制lua 在右鍵菜單中","scope": "resource"}}} } -
這樣是 配死 定義, 不能動態(tài)變化 根據(jù)文件是否是某些特定文件 才讓其 是否顯示在 右鍵 中. 有個方法可以動態(tài)修改這個值, 不過應(yīng)該是有點(diǎn)消耗性能的, 就是注冊一個 切換編輯文件回調(diào), 動態(tài)修改 配置值
vscode.window.onDidChangeActiveTextEditor((e) => {// 判斷條件let isShow = true;let cfg = vscode.workspace.getConfiguration("wilker-cfg");cfg.update("showLuaCopy", isShow, vscode.ConfigurationTarget.Workspace); }); -
ps: 這是曲線救國的方式, 不知道正確的姿勢是怎么樣. 局限性是只能在 切換編輯文件 時能觸發(fā)到
內(nèi)置when條件
- 參考 vscode 源碼, 所屬關(guān)鍵字 new RawContextKey<boolean>( , 看到的都是可用內(nèi)置條件
使用正則表達(dá)式
-
格式: sameName =~ /正則表達(dá)式/
{"when": "editorLangId =~ /(lua|csharp)/", // 表示只有文件是 lua或者csharp 時, 條件才為 true... },- 注意中間的符號是 =~, 如果使用的是 == 則為普通的判斷
-
參考: https://github.com/Microsoft/vscode/issues/26044
關(guān)于 activate deactivate
這兩個函數(shù)都在入口文件 extension.ts 中
activate
這個函數(shù)的調(diào)用時機(jī)可以根據(jù)需要配置.
"activationEvents": ["onCommand:wilker-ext.copyLuaFileName" // 調(diào)用這個命令是才調(diào)用 activate],"activationEvents": ["*" // 已啟動vscode 調(diào)用 activate],參考 Activation Events - package.json - https://code.visualstudio.com/docs/extensionAPI/activation-events
deactivate
關(guān)閉vscode時會觸發(fā), 如果有異步的必須返回 Promise. Extension must return a Promise fromdeactivate()if the cleanup process is asynchronous
export function deactivate() {return new Promise<boolean>(async (resolve, reject) => {await mycleanfunc();resolve();}); }關(guān)于 TextDocument.languageId
切換編輯文件時可用于一些邏輯判斷
參考 Language Identifiers - https://code.visualstudio.com/docs/languages/identifiers
顯示命令的各種地方
配置在 package.json
{"contributes": {"menus": { // 配置在這個字段中"explorer/context": [{"when": "!explorerResourceIsFolder","command": "myext.copyLuaFileName","group": "navigation"}]...}},}左邊欄 右鍵
key : "explorer/context"
編輯區(qū) 右鍵
key: "editor/context"
總結(jié)
以上是生活随笔為你收集整理的vscode-扩展插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python爬虫自学之第（零）篇——爬虫
- 下一篇： 在github中使用pages上传自己的