{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"前言"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Visual Studio Code（簡稱 VSCode）憑藉其佔用內存小、文件加載快、穩定性好、插件豐富等等特點，從衆多 IDE 中脫穎而出，受到了廣大開發人員的青睞。工欲善其事，必先利其器。選擇適合自己的 VSCode 插件，能夠讓你的開發效率突飛猛進。VSCode 插件市場 上面插件百花齊放，但實際開發過程中問題複雜且多變，有時候並不能找到完全滿足你實際開發需求的插件，那就自己動手 DIY 一個吧。VSCode 提供以下擴展能力：代碼自動補全、自定義命令\/菜單\/快捷鍵、懸浮提示、自定義跳轉、主題定製、自定義 WebView 等等。你可以根據自己的需要隨意組合使用。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"快速上手"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下來，將以一個簡單的代碼片段自動補全插件爲例，讓大家 10 分鐘快速上手。代碼片段自動補全也是大家編寫代碼時使用頻率最高、最能幫助提高編碼速度的功能。Demo 源碼（"},{"type":"text","marks":[{"type":"underline"}],"text":"https:\/\/github.com\/Angela-Chen\/vscode-test-extension"},{"type":"text","text":"）"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/c7\/c7da3ed721a778da7fc4e9393556fde7.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"開發環境準備"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Visual Studio Code"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Nodejs，建議使用 LTS 版本"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Npm"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"官方推薦使用的腳手架工具 Yeoman 和 Generator-code"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"npm install -g yo generator-code"}]}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"插件打包和發佈工具 vsce"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"npm install -g vsce"}]}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"腳手架使用"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":null,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"執行以下命令："}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"yo code"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":2,"normalizeStart":2},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"選擇 New Extension 類型，然後依次填寫插件名稱、描述、包管理工具等基礎信息。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/9f\/9f6ba6564ad0ed6f092837fa9bbc8ed0.jpeg","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"PS：腳手架工具支持創建插件（New Extension）、主題（New Color Theme）、新語言支持（New Language Support）、代碼片段（New Code Snippets）、鍵盤映射（New Keymap）、插件包（New Extension Pack）。以上不同類型的腳手架模板只是側重的預設功能不同，其本質還是 VSCode 插件。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":"br"}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/50\/50fff2d5162f10b11e239382a7be368b.jpeg","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"Snippets 代碼片段自動補全"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":1,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"添加 Snippets 配置項"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null}}]}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\/\/ package.json\n...\n\"contributes\": {\n\t\"snippets\": [\n \t{\n \"language\": \"javascript\",\n \"path\": \".\/snippets\/javascript.json\"\n\t \t},\n\t\t{\n \"language\": \"typescript\",\n \"path\": \".\/snippets\/javascript.json\"\n\t\t},\n ...\n\t\t]\n\t},\n...\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在 package.json 的 contributes 下添加自定義的 Snippets。language 表示在某種特定語言下，對應的代碼片段纔會被加載生效。path 表示代碼片段文件的存放路徑。上面配置即表示 javascript 或 typescript 語言環境下，將加載 .\/snippets\/javascript.json 文件中的代碼片段。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":2,"normalizeStart":2},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"編寫 Snippets 代碼片段"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\/\/ .\/snippets\/javascript.json\n{\n \"forEach\": {\n \"prefix\": \"fe\",\n \"body\": [\n \"${1:array}.forEach(function(item) {\",\n \"\\t${2:\/\/ body}\",\n \"});\"\n ],\n \"description\": \"Code snippet for 'forEach'\"\n },\n \"setTimeout\": {\n \"prefix\": \"st\",\n \"body\": [\n \"setTimeout(function() {\",\n \"\\t${0:\/\/ body}\",\n \"}, ${1:1000});\"\n ],\n \"description\": \"Code snippet for 'setTimeout'\"\n }\n ...\n}\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上述例子中："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"forEach"},{"type":"text","text":"、"},{"type":"text","marks":[{"type":"strong"}],"text":"setTimeout"},{"type":"text","text":" 是代碼片段的名稱。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"prefix"},{"type":"text","text":" 中定義一個或多個（設置數組時可以指定多個）觸發詞（trigger words），當用戶輸入內容是觸發詞時編輯器會彈出自動補全提示。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"body"},{"type":"text","text":" 中定義的就是填充的代碼段內容。body 中可以使用佔位符（placeholders），如上面的 "},{"type":"codeinline","content":[{"type":"text","text":"${1:array}"}]},{"type":"text","text":"、 "},{"type":"codeinline","content":[{"type":"text","text":"{2:\/\/ body}"}]},{"type":"text","text":"，使用佔位符方便在引用代碼段的時候可以通過 tab 鍵快速切換跳轉到對應位置編輯。冒號前面的序號表示切換的順序，冒號後面的內容則是佔位顯示的默認文本。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"description"},{"type":"text","text":" 顧名思義就是代碼段的描述說明，編輯器彈出補全提示的時候會展示該描述，如果沒有設置 description 字段，那麼會直接展示代碼段名稱。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"至此，插件的編碼工作已經完成，是不是很簡單~ 接下去，我們運行插件看下效果。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"運行調試"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"選擇 VSCode 的調試菜單（command+shift+D），點擊運行按鈕，彈出一個名爲擴展開發主機的窗口，這個窗口就是包含這個插件的臨時調試窗口。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/0a\/0a7f8fa46a4bec81ebe27464106ccd99.jpeg","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/c7\/c7da3ed721a778da7fc4e9393556fde7.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"打包和發佈"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"打包"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"打包命令："},{"type":"codeinline","content":[{"type":"text","text":"vsce package"}]},{"type":"text","text":"，打包完成後會生成 .vsix 後綴的安裝包。如果插件僅爲個人或者團隊內部共享，那麼手動安裝即可使用，無需發佈到 VSCode 插件市場。"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"發佈"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"發佈命令："},{"type":"codeinline","content":[{"type":"text","text":"vsce publish"}]},{"type":"text","text":"。發佈需要發佈者賬號，前往 Azure DevOps 註冊，註冊後需申請 Personal Access Tokens ，詳細申請細節見 說明文檔。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"插件詳解"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"目錄結構"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":".\n├── .vscode\n\t├── launch.json # 插件加載和調試的配置\n├── CHANGELOG.md # 變更記錄\n├── extension.js # 插件執行入口文件\n├── jsconfig.json # JavaScript 類型檢查配置\n├── node_modules\n├── package-lock.json\n├── package.json # 聲明當前插件相關信息\n├── README.md # 插件使用說明\n└── vsc-extension-quickstart.md\n"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"核心文件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"1. package.json：插件的聲明文件，包含 2 個重要配置項 activationEvents、contributes。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"activationEvents 用於定義插件何時被加載\/激活。例子中用到的是 onCommand，在 Hello World 命令被調用時，插件纔會被激活。目前支持 9 種激活事件："}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"onLanguage:${language}"}]},{"type":"text","text":" 打開特定語言文件時"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"onCommand:${command}"}]},{"type":"text","text":" 調用某個 VSCode 命令時"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"onDebug"}]},{"type":"text","text":" Debug 時"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"workspaceContains:${toplevelfilename}"}]},{"type":"text","text":" 當打開包含某個命名規則的文件夾時"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"onFileSystem:${scheme}"}]},{"type":"text","text":" 以某個協議（ftp\/sftp\/ssh 等）打開文件或文件夾時"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"onView:${viewId}"}]},{"type":"text","text":" 指定 id 的視圖展開時"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"onUri"}]},{"type":"text","text":" 插件的系統級 URI 打開時"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"onWebviewPanel"}]},{"type":"text","text":" webview 觸發時"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"*"}]},{"type":"text","text":" VSCode 啓動時。不建議使用，性能上會受到一定影響。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"PS：出於性能考慮，插件都是懶加載的，只有特定場景下才會加載\/激活，纔會消耗內存等資源。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"contributes 用於定義擴展項的具體配置。常用擴展項有代碼片段（snippets）、命令（commands）、菜單（menus）、快捷鍵（keybindings）、主題（themes）。通常完成命令的開發後，會將其與菜單\/快捷鍵進行關聯，以便調用。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\/\/ package.json\n{\n \/\/ 插件名稱\n \"name\": \"vscode-test-extension\",\n \/\/ 顯示名稱\n \"displayName\": \"vscode-test-extension\",\n \/\/ 描述信息\n \"description\": \"An awesome vscode extension\",\n \/\/ 版本號 semver格式\n \"version\": \"0.0.1\",\n \/\/ 在插件市場展示的圖標\n \"icon\": \"icon.png\",\n \/\/ 發佈者名字\n \"publisher\": \"chenmenglan\",\n \/\/ 插件最低支持的vscode版本號\n \"engines\": {\n \"vscode\": \"^1.12.0\"\n },\n \/\/ 所屬分類，可選 Languages\/Snippets\/Linters\/Themes\/Other 等等\n \"categories\": [\"Snippets\", \"Other\"],\n \/\/ 加載\/激活方式\n \"activationEvents\": [\"onCommand:extension.helloWorld\"],\n \/\/ 入口文件路徑\n \"main\": \".\/extension.js\",\n \/\/ 註冊擴展項配置\n \"contributes\": {\n\t\t\"commands\": [\n\t\t\t{\n\t\t\t\t\"command\": \"extension.helloWorld\",\n\t\t\t\t\"title\": \"Hello World\"\n\t\t\t}\n\t\t],\n \t\"snippets\": [\n \t\t{\n \"language\": \"javascript\",\n \"path\": \".\/snippets\/javascript.json\"\n\t \t\t},\n ...\n\t\t]\n\t}\n}\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"2. extension.js：插件的執行入口文件，通常包括激活（activate）和禁用（deactivate）2 個方法。命令必須先使用 vscode.commands.registerCommand 進行註冊，然後將返回的實例添加至 context.subscriptions 中。當命令被激活時，會執行相應的回調方法。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\nconst vscode = require('vscode');\n\n\/**\n * @param {vscode.ExtensionContext} context\n *\/\nfunction activate(context) {\n\n\tconsole.log('Congratulations, your extension \"vscode-test-extension\" is now active!');\n\n\tlet disposable = vscode.commands.registerCommand('extension.helloWorld', function () {\n\t\t\/\/ 右下角消息提示\n vscode.window.showInformationMessage('Hello World!');\n\t});\n\n\tcontext.subscriptions.push(disposable);\n}\nexports.activate = activate;\n\nfunction deactivate() {}\n\nexports.deactivate = deactivate;\n"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"結語"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果你重複處理同一類問題超過 3 次，那麼是時候該停下來思考下如何來化繁爲簡了。不妨花上些時間，梳理下使用頻率最高或者最佳實踐的代碼片段，DIY 一個自己的插件，將重心放到更核心更復雜代碼邏輯上。豐富的 擴展 API 讓一切都比想象中來的簡單，Just do what you want~"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"插件推薦"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Auto Close Tag，自動補全關閉標籤。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Auto Rename Tag，自動重命名標籤。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Bracket Pair Colorizer，括號配對着色，方便查看多層嵌套的代碼。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Beautify，快速格式化代碼。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"ESLint，語法規則和代碼風格的檢查工具。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Path Autocomplete，文件路徑自動補全。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Document This，快速生成註釋。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Todo Highlighter，高亮標記 TODO 註釋，以便更容易追蹤任何未完成的業務。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"GitLens，增強了 VSCode 中內置的 Git 功能，包括查看代碼作者、查看歷史提交記錄等等。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"還有其他好用的插件，歡迎補充~~"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"horizontalrule"},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"頭圖：Unsplash"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"作者：沫沫"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原文：https:\/\/mp.weixin.qq.com\/s\/XhU2BLncy1yKGPi-yPxfqw"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原文：DIY VSCode 插件，讓你的開發效率突飛猛進"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"來源：政採雲前端團隊 - 微信公衆號 [ID：Zoo-Team]"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"轉載：著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。"}]}]}
DIY VSCode 插件，讓你的開發效率突飛猛進
{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"前言"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Visual Studio Code（簡稱 VSCode）憑藉其佔用內存小、文件加載快、穩定性好、插件豐富等等特點，從衆多 IDE 中脫穎而出，受到了廣大開發人員的青睞。工欲善其事，必先利其器。選擇適合自己的 VSCode 插件，能夠讓你的開發效率突飛猛進。VSCode 插件市場 上面插件百花齊放，但實際開發過程中問題複雜且多變，有時候並不能找到完全滿足你實際開發需求的插件，那就自己動手 DIY 一個吧。VSCode 提供以下擴展能力：代碼自動補全、自定義命令\/菜單\/快捷鍵、懸浮提示、自定義跳轉、主題定製、自定義 WebView 等等。你可以根據自己的需要隨意組合使用。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"快速上手"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"接下來，將以一個簡單的代碼片段自動補全插件爲例，讓大家 10 分鐘快速上手。代碼片段自動補全也是大家編寫代碼時使用頻率最高、最能幫助提高編碼速度的功能。Demo 源碼（"},{"type":"text","marks":[{"type":"underline"}],"text":"https:\/\/github.com\/Angela-Chen\/vscode-test-extension"},{"type":"text","text":"）"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/c7\/c7da3ed721a778da7fc4e9393556fde7.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"開發環境準備"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Visual Studio Code"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Nodejs，建議使用 LTS 版本"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Npm"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"官方推薦使用的腳手架工具 Yeoman 和 Generator-code"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"npm install -g yo generator-code"}]}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"插件打包和發佈工具 vsce"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"npm install -g vsce"}]}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"腳手架使用"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":null,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"執行以下命令："}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"yo code"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":2,"normalizeStart":2},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"選擇 New Extension 類型，然後依次填寫插件名稱、描述、包管理工具等基礎信息。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/9f\/9f6ba6564ad0ed6f092837fa9bbc8ed0.jpeg","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"PS：腳手架工具支持創建插件（New Extension）、主題（New Color Theme）、新語言支持（New Language Support）、代碼片段（New Code Snippets）、鍵盤映射（New Keymap）、插件包（New Extension Pack）。以上不同類型的腳手架模板只是側重的預設功能不同，其本質還是 VSCode 插件。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":"br"}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/50\/50fff2d5162f10b11e239382a7be368b.jpeg","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"Snippets 代碼片段自動補全"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":1,"normalizeStart":1},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":1,"align":null,"origin":null},"content":[{"type":"text","text":"添加 Snippets 配置項"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null}}]}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\/\/ package.json\n...\n\"contributes\": {\n\t\"snippets\": [\n \t{\n \"language\": \"javascript\",\n \"path\": \".\/snippets\/javascript.json\"\n\t \t},\n\t\t{\n \"language\": \"typescript\",\n \"path\": \".\/snippets\/javascript.json\"\n\t\t},\n ...\n\t\t]\n\t},\n...\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在 package.json 的 contributes 下添加自定義的 Snippets。language 表示在某種特定語言下，對應的代碼片段纔會被加載生效。path 表示代碼片段文件的存放路徑。上面配置即表示 javascript 或 typescript 語言環境下，將加載 .\/snippets\/javascript.json 文件中的代碼片段。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"numberedlist","attrs":{"start":2,"normalizeStart":2},"content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":2,"align":null,"origin":null},"content":[{"type":"text","text":"編寫 Snippets 代碼片段"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\/\/ .\/snippets\/javascript.json\n{\n \"forEach\": {\n \"prefix\": \"fe\",\n \"body\": [\n \"${1:array}.forEach(function(item) {\",\n \"\\t${2:\/\/ body}\",\n \"});\"\n ],\n \"description\": \"Code snippet for 'forEach'\"\n },\n \"setTimeout\": {\n \"prefix\": \"st\",\n \"body\": [\n \"setTimeout(function() {\",\n \"\\t${0:\/\/ body}\",\n \"}, ${1:1000});\"\n ],\n \"description\": \"Code snippet for 'setTimeout'\"\n }\n ...\n}\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上述例子中："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"forEach"},{"type":"text","text":"、"},{"type":"text","marks":[{"type":"strong"}],"text":"setTimeout"},{"type":"text","text":" 是代碼片段的名稱。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"prefix"},{"type":"text","text":" 中定義一個或多個（設置數組時可以指定多個）觸發詞（trigger words），當用戶輸入內容是觸發詞時編輯器會彈出自動補全提示。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"body"},{"type":"text","text":" 中定義的就是填充的代碼段內容。body 中可以使用佔位符（placeholders），如上面的 "},{"type":"codeinline","content":[{"type":"text","text":"${1:array}"}]},{"type":"text","text":"、 "},{"type":"codeinline","content":[{"type":"text","text":"{2:\/\/ body}"}]},{"type":"text","text":"，使用佔位符方便在引用代碼段的時候可以通過 tab 鍵快速切換跳轉到對應位置編輯。冒號前面的序號表示切換的順序，冒號後面的內容則是佔位顯示的默認文本。"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"description"},{"type":"text","text":" 顧名思義就是代碼段的描述說明，編輯器彈出補全提示的時候會展示該描述，如果沒有設置 description 字段，那麼會直接展示代碼段名稱。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"至此，插件的編碼工作已經完成，是不是很簡單~ 接下去，我們運行插件看下效果。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"運行調試"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"選擇 VSCode 的調試菜單（command+shift+D），點擊運行按鈕，彈出一個名爲擴展開發主機的窗口，這個窗口就是包含這個插件的臨時調試窗口。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/0a\/0a7f8fa46a4bec81ebe27464106ccd99.jpeg","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/c7\/c7da3ed721a778da7fc4e9393556fde7.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"打包和發佈"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"打包"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"打包命令："},{"type":"codeinline","content":[{"type":"text","text":"vsce package"}]},{"type":"text","text":"，打包完成後會生成 .vsix 後綴的安裝包。如果插件僅爲個人或者團隊內部共享，那麼手動安裝即可使用，無需發佈到 VSCode 插件市場。"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"發佈"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"發佈命令："},{"type":"codeinline","content":[{"type":"text","text":"vsce publish"}]},{"type":"text","text":"。發佈需要發佈者賬號，前往 Azure DevOps 註冊，註冊後需申請 Personal Access Tokens ，詳細申請細節見 說明文檔。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"插件詳解"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"目錄結構"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":".\n├── .vscode\n\t├── launch.json # 插件加載和調試的配置\n├── CHANGELOG.md # 變更記錄\n├── extension.js # 插件執行入口文件\n├── jsconfig.json # JavaScript 類型檢查配置\n├── node_modules\n├── package-lock.json\n├── package.json # 聲明當前插件相關信息\n├── README.md # 插件使用說明\n└── vsc-extension-quickstart.md\n"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"核心文件"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"1. package.json：插件的聲明文件，包含 2 個重要配置項 activationEvents、contributes。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"activationEvents 用於定義插件何時被加載\/激活。例子中用到的是 onCommand，在 Hello World 命令被調用時，插件纔會被激活。目前支持 9 種激活事件："}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"onLanguage:${language}"}]},{"type":"text","text":" 打開特定語言文件時"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"onCommand:${command}"}]},{"type":"text","text":" 調用某個 VSCode 命令時"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"onDebug"}]},{"type":"text","text":" Debug 時"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"workspaceContains:${toplevelfilename}"}]},{"type":"text","text":" 當打開包含某個命名規則的文件夾時"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"onFileSystem:${scheme}"}]},{"type":"text","text":" 以某個協議（ftp\/sftp\/ssh 等）打開文件或文件夾時"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"onView:${viewId}"}]},{"type":"text","text":" 指定 id 的視圖展開時"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"onUri"}]},{"type":"text","text":" 插件的系統級 URI 打開時"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"onWebviewPanel"}]},{"type":"text","text":" webview 觸發時"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"*"}]},{"type":"text","text":" VSCode 啓動時。不建議使用，性能上會受到一定影響。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"PS：出於性能考慮，插件都是懶加載的，只有特定場景下才會加載\/激活，纔會消耗內存等資源。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"contributes 用於定義擴展項的具體配置。常用擴展項有代碼片段（snippets）、命令（commands）、菜單（menus）、快捷鍵（keybindings）、主題（themes）。通常完成命令的開發後，會將其與菜單\/快捷鍵進行關聯，以便調用。"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\/\/ package.json\n{\n \/\/ 插件名稱\n \"name\": \"vscode-test-extension\",\n \/\/ 顯示名稱\n \"displayName\": \"vscode-test-extension\",\n \/\/ 描述信息\n \"description\": \"An awesome vscode extension\",\n \/\/ 版本號 semver格式\n \"version\": \"0.0.1\",\n \/\/ 在插件市場展示的圖標\n \"icon\": \"icon.png\",\n \/\/ 發佈者名字\n \"publisher\": \"chenmenglan\",\n \/\/ 插件最低支持的vscode版本號\n \"engines\": {\n \"vscode\": \"^1.12.0\"\n },\n \/\/ 所屬分類，可選 Languages\/Snippets\/Linters\/Themes\/Other 等等\n \"categories\": [\"Snippets\", \"Other\"],\n \/\/ 加載\/激活方式\n \"activationEvents\": [\"onCommand:extension.helloWorld\"],\n \/\/ 入口文件路徑\n \"main\": \".\/extension.js\",\n \/\/ 註冊擴展項配置\n \"contributes\": {\n\t\t\"commands\": [\n\t\t\t{\n\t\t\t\t\"command\": \"extension.helloWorld\",\n\t\t\t\t\"title\": \"Hello World\"\n\t\t\t}\n\t\t],\n \t\"snippets\": [\n \t\t{\n \"language\": \"javascript\",\n \"path\": \".\/snippets\/javascript.json\"\n\t \t\t},\n ...\n\t\t]\n\t}\n}\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong"}],"text":"2. extension.js：插件的執行入口文件，通常包括激活（activate）和禁用（deactivate）2 個方法。命令必須先使用 vscode.commands.registerCommand 進行註冊，然後將返回的實例添加至 context.subscriptions 中。當命令被激活時，會執行相應的回調方法。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\nconst vscode = require('vscode');\n\n\/**\n * @param {vscode.ExtensionContext} context\n *\/\nfunction activate(context) {\n\n\tconsole.log('Congratulations, your extension \"vscode-test-extension\" is now active!');\n\n\tlet disposable = vscode.commands.registerCommand('extension.helloWorld', function () {\n\t\t\/\/ 右下角消息提示\n vscode.window.showInformationMessage('Hello World!');\n\t});\n\n\tcontext.subscriptions.push(disposable);\n}\nexports.activate = activate;\n\nfunction deactivate() {}\n\nexports.deactivate = deactivate;\n"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"結語"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果你重複處理同一類問題超過 3 次，那麼是時候該停下來思考下如何來化繁爲簡了。不妨花上些時間，梳理下使用頻率最高或者最佳實踐的代碼片段，DIY 一個自己的插件，將重心放到更核心更復雜代碼邏輯上。豐富的 擴展 API 讓一切都比想象中來的簡單，Just do what you want~"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"插件推薦"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Auto Close Tag，自動補全關閉標籤。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Auto Rename Tag，自動重命名標籤。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Bracket Pair Colorizer，括號配對着色，方便查看多層嵌套的代碼。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Beautify，快速格式化代碼。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"ESLint，語法規則和代碼風格的檢查工具。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Path Autocomplete，文件路徑自動補全。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Document This，快速生成註釋。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Todo Highlighter，高亮標記 TODO 註釋，以便更容易追蹤任何未完成的業務。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"GitLens，增強了 VSCode 中內置的 Git 功能，包括查看代碼作者、查看歷史提交記錄等等。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"還有其他好用的插件，歡迎補充~~"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"horizontalrule"},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"頭圖：Unsplash"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"作者：沫沫"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原文：https:\/\/mp.weixin.qq.com\/s\/XhU2BLncy1yKGPi-yPxfqw"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原文：DIY VSCode 插件，讓你的開發效率突飛猛進"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"來源：政採雲前端團隊 - 微信公衆號 [ID：Zoo-Team]"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"轉載：著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。"}]}]}
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章