DIY VSCode 插件，讓你的開發效率日新月異

時間 2019-11-05

標籤 diy vscode 插件讓你開發效率日新月異简体版

原文原文鏈接

原創不易，但願能關注下咱們，再順手點個贊~~

本文首發於政採雲前端團隊博客： DIY VSCode 插件，讓你的開發效率日新月異javascript

前言

Visual Studio Code（簡稱 VSCode）憑藉其佔用內存小、文件加載快、穩定性好、插件豐富等等特色，從衆多 IDE 中脫穎而出，受到了廣大開發人員的青睞。工欲善其事，必先利其器。選擇適合本身的 VSCode 插件，可以讓你的開發效率日新月異。VSCode 插件市場上面插件百花齊放，但實際開發過程當中問題複雜且多變，有時候並不能找到徹底知足你實際開發需求的插件，那就本身動手 DIY 一個吧。VSCode 提供如下擴展能力：代碼自動補全、自定義命令/菜單/快捷鍵、懸浮提示、自定義跳轉、主題定製、自定義 WebView 等等。你能夠根據本身的須要隨意組合使用。前端

快速上手

接下來，將以一個簡單的代碼片斷自動補全插件爲例，讓你們 10 分鐘快速上手。代碼片斷自動補全也是你們編寫代碼時使用頻率最高、最能幫助提升編碼速度的功能。Demo源碼java

開發環境準備

Visual Studio Codenode
Nodejs，建議使用 LTS 版本git
Npmgithub
官方推薦使用的腳手架工具 Yeoman 和 Generator-codeweb
```
npm install -g yo generator-code
複製代碼
```
插件打包和發佈工具 vscetypescript
```
npm install -g vsce
複製代碼
```

腳手架使用

執行如下命令：

yo code
複製代碼

選擇 New Extension 類型，而後依次填寫插件名稱、描述、包管理工具等基礎信息。

PS：腳手架工具支持建立插件（New Extension）、主題（New Color Theme）、新語言支持（New Language Support）、代碼片斷（New Code Snippets）、鍵盤映射（New Keymap）、插件包（New Extension Pack）。以上不一樣類型的腳手架模板只是側重的預設功能不一樣，其本質仍是 VSCode 插件。shell

Snippets 代碼片斷自動補全

添加 Snippets 配置項

// 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 文件中的代碼片斷。npm

編寫 Snippets 代碼片斷

// ./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'"
  }
  ...
}
複製代碼

上述例子中：

forEach、setTimeout 是代碼片斷的名稱。
prefix 中定義一個或多個（設置數組時能夠指定多個）觸發詞（trigger words），當用戶輸入內容是觸發詞時編輯器會彈出自動補全提示。
body 中定義的就是填充的代碼段內容。body 中可使用佔位符（placeholders），如上面的 ${1:array}、 {2:// body}，使用佔位符方便在引用代碼段的時候能夠經過 tab 鍵快速切換跳轉到對應位置編輯。冒號前面的序號表示切換的順序，冒號後面的內容則是佔位顯示的默認文本。
description 顧名思義就是代碼段的描述說明，編輯器彈出補全提示的時候會展現該描述，若是沒有設置 description 字段，那麼會直接展現代碼段名稱。

至此，插件的編碼工做已經完成，是否是很簡單~ 接下去，咱們運行插件看下效果。

運行調試

選擇 VSCode 的調試菜單（command+shift+D），點擊運行按鈕，彈出一個名爲擴展開發主機的窗口，這個窗口就是包含這個插件的臨時調試窗口。

打包和發佈

打包

打包命令：vsce package，打包完成後會生成 .vsix 後綴的安裝包。若是插件僅爲我的或者團隊內部共享，那麼手動安裝便可使用，無需發佈到 VSCode 插件市場。

發佈

發佈命令：vsce publish。發佈須要發佈者帳號，前往 Azure DevOps 註冊，註冊後需申請 Personal Access Tokens ，詳細申請細節見說明文檔。

插件詳解

目錄結構

.
├── .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。

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：出於性能考慮，插件都是懶加載的，只有特定場景下才會加載/激活，纔會消耗內存等資源。

contributes 用於定義擴展項的具體配置。經常使用擴展項有代碼片斷（snippets）、命令（commands）、菜單（menus）、快捷鍵（keybindings）、主題（themes）。一般完成命令的開發後，會將其與菜單/快捷鍵進行關聯，以便調用。

// 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