Visual Studio Code 插件开发 hello world

Visual Studio Code 插件开发 hello world

创建步骤

源码：https://github.com/xiexianbin/vscode-extension-demo

官方工具创建

• 安装依赖包

npm install -g yo generator-code

• 项目初始化

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-extension-demo
? What's the identifier of your extension? vscode-extension-demo
? What's the description of your extension?
? Initialize a git repository? Yes
? Bundle the source code with webpack? Yes
? Which package manager to use? yarn
...

手创建

# 创建项目目录
mkdir vscode-extension-demo
cd vscode-extension-demo

# node 初始化
npm init -y

# 安装 vscode 插件依赖包
npm install --save-dev vscode

• 创建入口文件 src/extension.ts

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
    let disposable = vscode.commands.registerCommand('extension.sayHello', () => {
        vscode.window.showInformationMessage('Hello World!');
    });

    context.subscriptions.push(disposable);
}

• 在 package.json 中添加注册：

{
  "name": "vscode-extension-demo",
  "version": "1.0.0",
  "description": "",
  "main": "src/extension.js",
  "scripts": {
    "clean": "rimraf lib",
    "format-code": "tsfmt -r",
    "prepare": "yarn run clean && yarn run build",
    "vscode:prepublish": "tsc -p ./",
    "compile": "tsc",
    "watch": "tsc -watch",
    "postinstall": "node ./node_modules/vscode/bin/install"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vscode": "^1.1.37"
  },
  "activationEvents": [
    "onCommand:extension.sayHello"
  ],
  "commands": [
    {
        "command": "extension.sayHello",
        "title": "Hello World"
    }
  ],
  "engines": {
    "vscode": "^1.77.1"
  },
  "repository": "https://github.com/xiexianbin/vscode-extension-demo.git"
}

tsc 初始化

$ npm install typescript -g
$ tsc -v
Version 5.0.4

# 初始化 tsconfig.json
$ tsc --init

• 修改 tsconfig.json，添加如下内容

{
  "include": ["src/extension.ts"],
  "exclude": [
    "node_modules/*"
  ],
  ...

打包插件

安装 vsce

• vsce VS代码扩展管理器，如发布插件等

$ npm install --global @vscode/vsce
$ vsce --version
2.18.0

打包

vsce package

获得打包的文件 vscode-extension-demo-0.0.1.vsix

发布插件

# 登录 VS Code 插件市场
vsce login

# 发布插件
vsce publish

本地安装

• vscode 插件离线安装