TL;DR

文章篇幅有點長 ，可以先收藏再看 。要是想直接看看怎么寫一個擴展，直接去第二部分 ，或者直接去github看源碼 。

第一部分 --- Extension 知識點

一、擴展的啟動

如何保證性能 --- 擴展激活（Extension Activation） 我們會往VS Code中安裝非常多的擴展，VS Code是如何保證性能的呢？ 在VS Code中有一個擴展激活（Extension Activation）的概念：VS Code會盡可能晚的加載擴展（懶加載），并且不會加載會話期間未使用的擴展，因此不會占用內存。為了完成擴展的延遲加載，VS Code定義了所謂的激活事件（activation events）。 VS Code根據特定活動觸發激活事件，并且擴展可以定義需要針對哪些事件進行激活。例如，僅當用戶打開Markdown文件時，才需要激活用于編輯Markdown的擴展名。

如何保證穩定性 --- 擴展隔離（Extension Isolation） 很多擴展都寫得很棒 ，但是有的擴展有可能會影響啟動性能或VS Code本身的整體穩定性。作為一個編輯器用戶可以隨時打開，鍵入或保存文件，確保響應性UI不受擴展程序在做什么的影響是非常重要的。 為了避免擴展可能帶來的這些負面問題，VS Code在單獨的Node.js進程（擴展宿主進程extension host process）中加載和運行擴展，以提供始終可用的，響應迅速的編輯器。行為不當的擴展程序不會影響VS Code，尤其不會影響其啟動時間 。

四、Activation Events --- package.json

既然擴展是延遲加載（懶加載）的，我們就需要向VS Code提供有關何時應該激活什么擴展程序的上下文，其中比較重要的幾個： - onLanguage:${language} - onCommand:${command} - workspaceContains:${toplevelfilename} - *

activationEvents.onLanguage

根據編程語言確定時候激活。比如我們可以這樣：

"activationEvents": ["onLanguage:javascript" ]

當檢測到是js的文件時，就會激活該擴展。

activationEvents.onCommand

使用命令激活。比如我們可以這樣：

"activationEvents": ["onCommand:extension.sayHello" ]

activationEvents.workspaceContains

文件夾打開后，且文件夾中至少包含一個符合glob模式的文件時激活。比如我們可以這樣：

"activationEvents": ["workspaceContains:.editorconfig" ]

當打開的文件夾含有.editorconfig文件時，就會激活該擴展。

activationEvents.*

每當VS Code啟動，就會激活。比如我們可以這樣：

"activationEvents": ["*" ]

五、Contribution Points --- package.json

其中配置的內容會暴露給用戶，我們擴展大部分的配置都會寫在這里： - configuration - commands - menus - keybindings - languages - debuggers - breakpoints - grammars - themes - snippets - jsonValidation - views - problemMatchers - problemPatterns - taskDefinitions - colors

contributes.configuration

在configuration中配置的內容會暴露給用戶，用戶可以從“用戶設置”和“工作區設置”中修改你暴露的選項。 configuration是JSON格式的鍵值對，VS Code為用戶提供了良好的設置支持。 你可以用vscode.workspace.getConfiguration('myExtension')讀取配置值。

contributes.commands

設置命令標題和命令，隨后這個命令會顯示在命令面板中。你也可以加上category前綴，在命令面板中會以分類顯示。

注意：當調用命令時（通過組合鍵或者在命令面板中調用），VS Code會觸發激活事件onCommand:${command}。

六、package.json其他比較特殊的字段

• engines:說明擴展程序將支持哪些版本的VS Code
• displayName:在左側顯示的擴展名
• icon:擴展的圖標
• categories:擴展所屬的分類。可以是：Languages, Snippets, Linters, Themes, Debuggers, Formatters, Keymaps, Other

第二部分 --- 自己寫個擴展玩玩

我們經常使用console.log來打印日志進行調試，我們就寫一個用來美化、簡化console.log的擴展玩玩。最終實現的效果：

special-console-log

實現這個擴展，需要注意以下幾點： 1. console.log使用css樣式 2. VS Code插入內容 3. VS Code光標和選區 4. VS Code刪除內容 5. VS Code讀取用戶配置

下面火速實操(p≧w≦q)。

如何開始

要開始寫VS Code擴展，需要兩個工具：

• yeoman：有助于啟動新項目
• vscode-generator-code：由VS Code團隊使用yeoman構建的生成器 可以使用yarn或npm安裝這兩個工具，安裝完成之后執行yo code，等一會之后它會幫我們生成起始項目，并會詢問幾個問題：

確認信息之后，會幫我們初始化好整個項目，此時的目錄結構是這樣的：

我們只需要關注src/extension.ts和package.json即可，其中package.json里面的內容之前已經介紹過。

console.log使用css樣式

這里有一篇比較完整的文章：https://www.telerik.com/blogs/how-to-style-console-log-contents-in-chrome-devtools 簡單的說，這句代碼執行之后打印的是下面圖片那樣console.log("%cThis is a green text", "color:green");:

后面的樣式會應用在%c后面的內容上

vscode擴展讀取用戶配置

上文提到過，我們可以在contributes里面定義用戶配置：

"contributes": {"configuration": {"type": "object","title": "Special-console.log","properties": {"special-console.log.projectName": {"type": "string","default": "MyProject","description": "Project name"},"special-console.log.showLine": {"type": "boolean","default": true,"description": "Show line number"},"special-console.log.deleteAll": {"type": "boolean","default": false,"description": "delete all logs or delete the log containing [color] and [background]"}}} },

然后使用vscode.workspace.getConfiguration()讀取用戶配置

激活擴展

前面提到擴展是延遲加載（懶加載）的，我們只需要向VS Code提供有關何時應該激活什么擴展程序的上下文即可。我們在package.json中定義兩個激活的事件：

"activationEvents": ["onCommand:extension.insertLog","onCommand:extension.deleteLogs" ],

接著在contributes中添加快捷鍵：

"keybindings": [{"command": "extension.insertLog","key": "shift+ctrl+l","mac": "shift+cmd+l","when": "editorTextFocus"},{"command": "extension.deleteLogs","key": "shift+ctrl+d","mac": "shift+cmd+d"} ],

還可以將命令添加到命令面板里面，也就是按Ctrl +Shift+P彈出來的面板：

"commands": [{"command": "extension.insertLog","title": "Insert Log"},{"command": "extension.deleteLogs","title": "Delete console.log"} ],

insertLog表示往內容中插入console.log，deleteLogs則表示刪除。具體的實現我們放到src/extension.ts的activate中：

export function activate(context: vscode.ExtensionContext) {const insertLog = vscode.commands.registerCommand('extension.insertLog', () => {})context.subscriptions.push(insertLog)const deleteLogs = vscode.commands.registerCommand('extension.deleteLogs', () => {})context.subscriptions.push(deleteLogs) }

插入console.log

插入console.log 大概的過程是獲取當前選區的內容，獲取用戶配置，根據用戶配置和當前選區的內容填充console.log，最后插入到選區的下一行。

const insertLog = vscode.commands.registerCommand('extension.insertLog', () => {const editor = vscode.window.activeTextEditorif (!editor) { return }const selection = editor.selectionconst text = editor.document.getText(selection) // 當前選區內容// 用戶配置if (userConfig) {projectName = userConfig.projectName || projectNameshowLine = userConfig.showLine || showLineline = showLine?`%cline:${lineNumber}`:'%c'}// 設置console.log...// 在下一行插入vscode.commands.executeCommand('editor.action.insertLineAfter').then(() => {insertText(logToInsert, !text, noTextStr.length)})})

插入內容：

const insertText = (val: string, cursorMove: boolean, textLen: number) => {const editor = vscode.window.activeTextEditorif (!editor) {vscode.window.showErrorMessage('Can't insert log because no document is open')return}editor.edit((editBuilder) => {editBuilder.replace(range, val) // 插入內容}).then(() => {// 修改選區}) }

刪除console.log

刪除的時候只需要遍歷找一下console.log在判斷一下是不是我們加入的內容，是就刪除

const deleteLogs = vscode.commands.registerCommand('extension.deleteLogs', () => {const editor = vscode.window.activeTextEditorif (!editor) { return }const document = editor.documentconst documentText = editor.document.getText()let workspaceEdit = new vscode.WorkspaceEdit()// 獲取logconst logStatements = getAllLogs(document, documentText)// 刪除deleteFoundLogs(workspaceEdit, document.uri, logStatements)})

刪除的時候可以使用workspaceEdit.delete(docUri, log)，當然，刪除之后我們可以右下角搞個彈窗提示一下用戶刪除了幾個console.log：

vscode.workspace.applyEdit(workspaceEdit).then(() => {vscode.window.showInformationMessage(`${logs.length} console.log deleted`) })

具體的代碼可以看看github

發布

這個就注冊一下賬號然后發布就行

總結

以上是生活随笔為你收集整理的vscode弹出cmd_先看看 VS Code Extension 知识点，再写个 VS Code 扩展玩玩的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。