本文首發於政採雲前端團隊博客: DIY VSCode 插件,讓你的開發效率日新月異
Visual Studio Code(簡稱 VSCode)憑藉其佔用內存小、文件加載快、穩定性好、插件豐富等等特色,從衆多 IDE 中脫穎而出,受到了廣大開發人員的青睞。工欲善其事,必先利其器。選擇適合本身的 VSCode 插件,可以讓你的開發效率日新月異。VSCode 插件市場 上面插件百花齊放,但實際開發過程當中問題複雜且多變,有時候並不能找到徹底知足你實際開發需求的插件,那就本身動手 DIY 一個吧。VSCode 提供如下擴展能力:代碼自動補全、自定義命令/菜單/快捷鍵、懸浮提示、自定義跳轉、主題定製、自定義 WebView 等等。你能夠根據本身的須要隨意組合使用。javascript
接下來,將以一個簡單的代碼片斷自動補全插件爲例,讓你們 10 分鐘快速上手。代碼片斷自動補全也是你們編寫代碼時使用頻率最高、最能幫助提升編碼速度的功能。 Demo源碼
官方推薦使用的腳手架工具 Yeoman 和 Generator-code前端
npm install -g yo generator-code
插件打包和發佈工具 vscejava
npm install -g vsce
yo code
PS:腳手架工具支持建立插件(New Extension)、主題(New Color Theme)、新語言支持(New Language Support)、代碼片斷(New Code Snippets)、鍵盤映射(New Keymap)、插件包(New Extension Pack)。以上不一樣類型的腳手架模板只是側重的預設功能不一樣,其本質仍是 VSCode 插件。
// package.json ... "contributes": { "snippets": [ { "language": "javascript", "path": "./snippets/javascript.json" }, { "language": "typescript", "path": "./snippets/javascript.json" }, ... ] }, ...
在 package.json 的 contributes 下添加自定義的 Snippets。language 表示在某種特定語言下,對應的代碼片斷纔會被加載生效。 path 表示代碼片斷文件的存放路徑。上面配置即表示 javascript 或 typescript 語言環境下,將加載 ./snippets/javascript.json 文件中的代碼片斷。node
// ./snippets/javascript.json { "forEach": { "prefix": "fe", "body": [ "${1:array}.forEach(function(item) {", "\t${2:// body}", "});" ], "description": "Code snippet for 'forEach'" }, "setTimeout": { "prefix": "st", "body": [ "setTimeout(function() {", "\t${0:// body}", "}, ${1:1000});" ], "description": "Code snippet for 'setTimeout'" } ... }
上述例子中:git
${1:array}
、 {2:// body}
,使用佔位符方便在引用代碼段的時候能夠經過 tab 鍵快速切換跳轉到對應位置編輯。冒號前面的序號表示切換的順序,冒號後面的內容則是佔位顯示的默認文本。至此,插件的編碼工做已經完成,是否是很簡單~ 接下去,咱們運行插件看下效果。web
選擇 VSCode 的調試菜單(command+shift+D),點擊運行按鈕,彈出一個名爲擴展開發主機的窗口,這個窗口就是包含這個插件的臨時調試窗口。typescript
打包命令:vsce package
,打包完成後會生成 .vsix 後綴的安裝包。若是插件僅爲我的或者團隊內部共享,那麼手動安裝便可使用,無需發佈到 VSCode 插件市場。shell
發佈命令:vsce publish
。發佈須要發佈者帳號,前往 Azure DevOps。npm
. ├── .vscode ├── launch.json # 插件加載和調試的配置 ├── CHANGELOG.md # 變動記錄 ├── extension.js # 插件執行入口文件 ├── jsconfig.json # JavaScript 類型檢查配置 ├── node_modules ├── package-lock.json ├── package.json # 聲明當前插件相關信息 ├── README.md # 插件使用說明 └── vsc-extension-quickstart.md
1. package.json:插件的聲明文件,包含 2 個重要配置項 activationEvents、contributes。json
activationEvents 用於定義插件什麼時候被加載/激活。例子中用到的是onCommand,在 Hello World 命令被調用時,插件纔會被激活。目前支持 9 種激活事件:
onLanguage:${language}
打開特定語言文件時onCommand:${command}
調用某個 VSCode命令時onDebug
Debug 時workspaceContains:${toplevelfilename}
當打開包含某個命名規則的文件夾時onFileSystem:${scheme}
以某個協議(ftp/sftp/ssh等)打開文件或文件夾時onView:${viewId}
指定 id 的視圖展開時onUri
插件的系統級 URI 打開時onWebviewPanel
webview 觸發時*
VSCode 啓動時。不建議使用,性能上會受到必定影響。PS:出於性能考慮,插件都是懶加載的,只有特定場景下才會加載/激活,纔會消耗內存等資源。
// package.json { // 插件名稱 "name": "vscode-test-extension", // 顯示名稱 "displayName": "vscode-test-extension", // 描述信息 "description": "An awesome vscode extension", // 版本號 semver格式 "version": "0.0.1", // 在插件市場展現的圖標 "icon": "icon.png", // 發佈者名字 "publisher": "chenmenglan", // 插件最低支持的vscode版本號 "engines": { "vscode": "^1.12.0" }, // 所屬分類,可選 Languages/Snippets/Linters/Themes/Other 等等 "categories": ["Snippets", "Other"], // 加載/激活方式 "activationEvents": ["onCommand:extension.helloWorld"], // 入口文件路徑 "main": "./extension.js", // 註冊擴展項配置 "contributes": { "commands": [ { "command": "extension.helloWorld", "title": "Hello World" } ], "snippets": [ { "language": "javascript", "path": "./snippets/javascript.json" }, ... ] } }
2. extension.js:插件的執行入口文件,一般包括激活(activate)和禁用(deactivate)2 個方法。命令必須先使用 vscode.commands.registerCommand 進行註冊,而後將返回的實例添加至 context.subscriptions 中。當命令被激活時,會執行相應的回調方法。
const vscode = require('vscode'); /** * @param {vscode.ExtensionContext} context */ function activate(context) { console.log('Congratulations, your extension "vscode-test-extension" is now active!'); let disposable = vscode.commands.registerCommand('extension.helloWorld', function () { // 右下角消息提示 vscode.window.showInformationMessage('Hello World!'); }); context.subscriptions.push(disposable); } exports.activate = activate; function deactivate() {} exports.deactivate = deactivate;
若是你重複處理同一類問題超過 3 次,那麼是時候該停下來思考下如何來化繁爲簡了。不妨花上些時間,梳理下使用頻率最高或者最佳實踐的代碼片斷,DIY 一個本身的插件,將重心放到更核心更復雜代碼邏輯上。豐富的 擴展 API 讓一切都比想象中來的簡單,Just do what you want~
Auto Close Tag,自動補全關閉標籤。
Auto Rename Tag,自動重命名標籤。
Bracket Pair Colorizer,括號配對着色,方便查看多層嵌套的代碼。
Beautify,快速格式化代碼。
ESLint,語法規則和代碼風格的檢查工具。
Path Autocomplete,文件路徑自動補全。
Document This,快速生成註釋。
Todo Highlighter,高亮標記 TODO 註釋,以便更容易追蹤任何未完成的業務。
GitLens,加強了 VSCode 中內置的Git功能,包括查看代碼做者、查看歷史提交記錄等等。
還有其餘好用的插件,歡迎補充~~
招人,前端,隸屬政採雲前端大團隊(ZooTeam),50 餘個小夥伴正等你加入一塊兒浪~ 若是你想改變一直被事折騰,但願開始能折騰事;若是你想改變一直被告誡須要多些想法,卻無從破局;若是你想改變你有能力去作成那個結果,卻不須要你;若是你想改變你想作成的事須要一個團隊去支撐,但沒你帶人的位置;若是你想改變既定的節奏,將會是「5年工做時間3年工做經驗」;若是你想改變原本悟性不錯,但老是有那一層窗戶紙的模糊… 若是你相信相信的力量,相信平凡人能成就非凡事,相信能遇到更好的本身。若是你但願參與到隨着業務騰飛的過程,親手參與一個有着深刻的業務理解、完善的技術體系、技術創造價值、影響力外溢的前端團隊的成長曆程,我以爲咱們該聊聊。任什麼時候間,等着你寫點什麼,發給 ZooTeam@cai-inc.com