一、基礎(chǔ)介紹

VSCode 采用了 Electron，在語(yǔ)言上，VSCode 使用了自家的 TypeScript 語(yǔ)言開(kāi)發(fā)。Electron是基于 Chromium 和 Node.js，使用 JavaScript, HTML 和 CSS 構(gòu)建跨平臺(tái)的桌面應(yīng)用，它兼容 Mac、Windows 和 Linux，可以構(gòu)建出三個(gè)平臺(tái)的應(yīng)用程序。
從實(shí)現(xiàn)上來(lái)看，Electron = Node.js + Chromium + Native API
接下來(lái)看下VS Code布局

二、插件開(kāi)發(fā)

IDE介紹

Visual Studio Code（簡(jiǎn)稱 VSCode）憑借其占用內(nèi)存小、文件加載快、穩(wěn)定性好、插件豐富等等特點(diǎn)，從眾多 IDE 中脫穎而出，受到了廣大開(kāi)發(fā)人員的青睞。
VSCode 提供以下擴(kuò)展能力：代碼自動(dòng)補(bǔ)全、自定義命令/菜單/快捷鍵、懸浮提示、自定義跳轉(zhuǎn)、主題定制、自定義 WebView 等等。
接下來(lái)主要介紹如何在VS Code中開(kāi)發(fā)一個(gè)插件。
官方文檔地址：https://code.visualstudio.com/api/references/vscode-api

2、開(kāi)發(fā)環(huán)境準(zhǔn)備

• 安裝最新版本的 VSCode
• Nodejs，建議使用 LTS 版本
• 官方推薦使用的腳手架工具 Yeoman 和 Generator-code
• 插件打包和發(fā)布工具 vsce

3、安裝工具

全局安裝 Generator-code

jianshuangpeng@ZBMac-C02F2R9QM  npm install -g yo generator-code
npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs
npm WARN deprecated readdir-scoped-modules@1.1.0: This functionality has been moved to @npmcli/fs
npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs


added 128 packages, removed 450 packages, and changed 730 packages in 47

全局安裝 vsce

jianshuangpeng@ZBMac-C02F2R9QM  ~  npm install -g vsce
changed 106 packages in 7s

4、腳手架使用

選擇一個(gè)文件目錄下執(zhí)行命令：

yo code

選擇 New Extension 類型，然后依次填寫插件名稱、描述、包管理工具等基礎(chǔ)信息。

jianshuangpeng@ZBMac-C02F2R9QM  ~/Documents/project  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? vscode-plugin-todo
? What's the identifier of your extension? vscode-plugin-todo
? What's the description of your extension? 測(cè)試插件
? Initialize a git repository? Yes
? Bundle the source code with webpack? Yes
? Which package manager to use? n

安裝各種依賴后生成一個(gè)文件，目錄如下, 更詳細(xì)文檔請(qǐng)查看

jianshuangpeng@ZBMac-C02F2R9QM tree -L 2 -a
.
├── .vscode
│   ├── extensions.json
│   ├── launch.json //插件加載和調(diào)試的配置
│   ├── settings.json
│   └── tasks.json // // 配置TypeScript編譯任務(wù)
├── .vscodeignore
├── CHANGELOG.md //變更記錄
├── README.md
├── node_modules
├── package-lock.json
├── package.json // TypeScript配置
├── src
│   ├── extension.ts // 插件源代碼
│   └── test
├── tsconfig.json // ts配置文件
├── vsc-extension-quickstart.md
└── webpack.config.js

針對(duì)生成文件目錄重點(diǎn)說(shuō)明，其中最重要的文件是package.json和extension.js，了解這兩個(gè)文件基本上就可以入門開(kāi)發(fā)一個(gè)vscode插件了。

1、package.json
該文件是vscode擴(kuò)展的清單文件，里面有很多字段，官方對(duì)每個(gè)字段都進(jìn)行了詳細(xì)闡述，本次我們重點(diǎn)闡述以下初始化后期清單文件

// package.json
{
  "name": "vscode-plugin-todo", // 一個(gè)插件的ID
  "displayName": "vscode-plugin-todo",
  "description": "測(cè)試插件",
  "version": "0.0.1",
  "engines": { // 描述了這個(gè)插件依賴的最低VS Code API版本
    "vscode": "^1.73.0"
  },
  "categories": [
    "Other"
  ],
  "activationEvents": [ // 激活事件
    "onCommand:vscode-plugin-todo.helloWorld"
  ],
  "main": "./dist/extension.js", // 插件的主入口
  "contributes": { // 發(fā)布內(nèi)容配置
    "commands": [
      {
        "command": "vscode-plugin-todo.helloWorld",
        "title": "Hello World"
      }
    ]
  },
  "scripts": {
    "vscode:prepublish": "npm run package",
    "compile": "webpack",
    "watch": "webpack --watch",
    "package": "webpack --mode production --devtool hidden-source-map",
    "compile-tests": "tsc -p . --outDir out",
    "watch-tests": "tsc -p . -w --outDir out",
    "pretest": "npm run compile-tests && npm run compile && npm run lint",
    "lint": "eslint src --ext ts",
    "test": "node ./out/test/runTest.js"
  },
  "devDependencies": {
    "@types/vscode": "^1.73.0",
    "@types/glob": "^8.0.0",
    "@types/mocha": "^10.0.0",
    "@types/node": "16.x",
    "@typescript-eslint/eslint-plugin": "^5.42.0",
    "@typescript-eslint/parser": "^5.42.0",
    "eslint": "^8.26.0",
    "glob": "^8.0.3",
    "mocha": "^10.1.0",
    "typescript": "^4.8.4",
    "ts-loader": "^9.4.1",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "@vscode/test-electron": "^2.2.0"
  }
}

重點(diǎn)關(guān)注的主要有三部分內(nèi)容：activationEvents、main以及contributes。

main：指明了該插件的主入口在哪，只有找到主入口整個(gè)項(xiàng)目才能正常的運(yùn)轉(zhuǎn)

activationEvents：指明該插件在何種情況下才會(huì)被激活，因?yàn)橹挥屑せ詈蟛寮拍鼙徽Ｊ褂?，官網(wǎng)已經(jīng)指明了激活的時(shí)機(jī)，這樣我們就可以按需設(shè)置對(duì)應(yīng)時(shí)機(jī)。（具體每個(gè)時(shí)機(jī)用的時(shí)候詳細(xì)查看即可）。

• onLanguage 打開(kāi)解析為特定語(yǔ)言文件時(shí)被激活，例如"onLanguage:python"
• onCommand 在調(diào)用命令時(shí)被激活
• workspaceContains 每當(dāng)打開(kāi)文件夾并且該文件夾包含至少一個(gè)與 glob 模式匹配的文件時(shí)
• onView 每當(dāng)在 VS Code 側(cè)欄中展開(kāi)指定 id 的視圖
• onUri 每當(dāng)打開(kāi)該擴(kuò)展的系統(tǒng)范圍的 Uri 時(shí)
• onWebviewPanel
• onCustomEditor

contributes：通過(guò)擴(kuò)展注冊(cè)contributes用來(lái)擴(kuò)展Visual Studio Code中的各項(xiàng)技能，其有多個(gè)配置，如下所示：

• commands 命令
• configuration 配置
• configurationDefaults 默認(rèn)的特定于語(yǔ)言的編輯器配置
• keybindings 快捷鍵綁定

2、extension.ts
該文件時(shí)其入口文件，即package.json中main字段對(duì)應(yīng)的文件（不一定叫extension.js這個(gè)名字），該文件中將導(dǎo)出兩個(gè)方法：activate和deactivate，兩個(gè)方法的執(zhí)行時(shí)機(jī)如下所示：

• activate
  這是插件被激活時(shí)執(zhí)行的函數(shù)
• deactivate
  這是插件被銷毀時(shí)調(diào)用的方法，比如釋放內(nèi)存等。

5、運(yùn)行插件

默認(rèn)已經(jīng)很順利的完成上面所有的操作，接下來(lái)我們嘗試啟動(dòng)剛才的插件，使用vscode打開(kāi)文件目錄后，按F5刷新

在新打開(kāi)的頁(yè)面中，按command+Shit+P進(jìn)入「Command Palette」，輸入「Hello World」執(zhí)行這個(gè)項(xiàng)目

6、發(fā)布插件

發(fā)布插件的方式基本有三種：
1、直接共享源文件；
2、發(fā)布到插件市場(chǎng)；
3、打包成vsix插件安裝。這里只介紹下第三種方式。
前面我們已經(jīng)全局安裝了vsce?，F(xiàn)在只需要在插件根目錄下執(zhí)行：vsce package即可生成插件

jianshuangpeng@ZBMac-C02F2R9QM  vsce package
Executing prepublish script 'npm run vscode:prepublish'...


> vscode-plugin-todo@0.0.1 package
> webpack --mode production --devtool hidden-source-map


    [webpack-cli] Compiler starting...
    [webpack-cli] Compiler finished
Do you want to continue? [y/N] y
 DONE  Packaged: /Users/jianshuangpeng/Documents/project/vscode-plugin-todo/vscode-plugin-todo-0.0.1.vsix (6 files, 3.

7、安裝插件

插件安裝完成后左側(cè)菜單中會(huì)自動(dòng)添加插件
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-726223.html

到了這里，關(guān)于基于VS Code的插件開(kāi)發(fā)（基礎(chǔ)篇）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！