Практика разработки плагинов vscode и исходный код демо

Visual Studio Code

написать впереди

Если рабочий хочет хорошо работать, он должен сначала заточить свои инструменты. Являясь отличным инструментом разработки, vscode очень удобен в моей повседневной работе. Его механизм расширения тем более.

Однако, когда я недавно выполнял ежегодное задание на профессиональную линейку, мне нужно было использовать красивое выравнивание комментариев в конце строки.Поискав, я обнаружил, что на официальном рынке плагинов vscode нет того, что я хотел.

Вот я и задумался о разработке такой штуки сам, с одной стороны удобно самому использовать потом, с одной стороны я могу изучить метод разработки и публикации плагинов vscode, с другой стороны так будет лучше если это поможет другим после публикации.

Основное содержание этой статьи

Эта статья была написана после того, как я завершил разработку и выпуск плагина и записал метод.

В основном включает два аспекта:

  1. Основной процесс разработки и выпуска плагина vscode
  2. Исходный код демонстрации плагина vscode:

(1) Ссылка 1, плагин выравнивания аннотацийGitHub.com/Поделиться Баошань/В…

(2) Ссылка 2, подключаемый модуль журнала быстрого вывода console.logGitHub.com/Поделиться Баошань/В…

(3) Ссылка 3, описание отправки git commit быстро заполняет плагинmarketplace.visual studio.com/items?item N…

Основной процесс разработки и выпуска плагина vscode

  1. Подготовка перед разработкой плагина: vscode, nodejs, инструменты для создания плагинов vscode, git, учетная запись Microsoft
  2. Разработка плагинов: концепция плагинов,официальная документациячек об оплате
  3. Публикация плагина: упаковка, загрузка,Рынок плагиновдействовать
  4. Обслуживание плагина: упаковка, загрузка,Рынок плагиновдействовать

Подготовка перед разработкой плагина:

vscode, nodejs, git, учетная запись Microsoft, нет необходимости говорить больше об этой подготовке.

Инструмент для создания плагинов vscode:Официальная рекомендацияИспользуйте Yeoman и генератор расширений кода VS. Установите с помощью следующей команды:

npm install -g yo generator-code

На этом подготовительные работы, необходимые для разработки, завершены.

Разработка плагина

Инициализировать код с помощью производственных инструментов

Выполните следующую команду

yo code

Результат выглядит следующим образом:

$ yo code

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of extension do you want to create? (Use arrow keys)
> New Extension (TypeScript)
  New Extension (JavaScript)
  New Color Theme
  New Language Support
  New Code Snippets
  New Keymap
  New Extension Pack
(Move up and down to reveal more choices)

В системе os используйте клавиши вверх и вниз, чтобы выбрать тип, который нужно создать, введите 1, 2, 3 при выигрыше и нажмите Enter, чтобы выбрать.

Следуйте инструкциям для остальных шагов. Получите следующую структуру структуры каталогов:

├── .vscode      // 资源配置文件
├── CHANGELOG.md // 更改记录文件，会展示到vscode插件市场
├── extension.js // 拓展源代码文件
├── jsconfig.json
├── package.json // 资源配置文件
├── README.md    // 插件介绍文件，会展示到vscode插件市场
├── test         // 测试文件
└── vsc-extension-quickstart.md

ps: Каталог документов других типов проектов может отличаться, и сгенерированный каталог файлов имеет преимущественную силу. В проекте расширения js самым важным являетсяextension.jsа такжеpackage.json.

Идея плагина

Вдохновение приходит от жизни и работы.Если вы думаете об этом, вы можете это сделать. Например, мои комментарии в конце строки выровнены (указанные выше комментарии каталога — это плагины, которые я только что разработал).

Конкретные мысли о выравнивателе комментариев здесь писаться не будут, если вам интересно, вы можете скачать его.исходный кодПроверьте его, он содержит полную заметку. Логика очень проста.

Ознакомьтесь с разработкой документации

Здесь я должен сказать, что официальная документация не очень красива, по крайней мере, не так дружелюбна. порталcode.visual studio.com/API/Злодей Hotwind…. Если английский действительно сложный, вы можете использовать перевод в один клик в Chrome, и перевод будет довольно точным.

Для основных приложений основной видwindowсвязанных достаточно, комбинируяyo codeСгенерированный базовый код может реализовывать простые функции.

Выпуск плагина

Установите инструменты упаковки и публикации

npm install -g vsce

Создать издателя

существуетОфициальный сайт рынка плагиновСоздать издателя

创建发布人.png

Полныйpackage.json

package.jsonСуществует пользовательская конфигурация vscode.При выполнении команды упаковки vscode проверит себя.Если конфигурация неверна или пропущена, появится подсказка.

Более полная информация выглядит следующим образом (ниже файл package.json выпущенного мной выравнивателя комментариев):

{
	"name": "comment-aligner",
	"displayName": "comment aligner",
	"description": "A tool for aligning the inline trailing comment",
	"version": "1.0.1",
	"publisher": "huangbaoshan", // 发布人，在插件市场官网创建的发布人id
	"icon": "icon/icon.png",     // 插件图标，用于在插件市场展示的icon；可以放到同级目录内，打包会带入
	"repository": {
		"type": "git",
		"url":"https://github.com/gitshan/vscode-extension-comment-aligner.git"
	},
	"engines": {
		"vscode": "^1.30.0"      // vscode版本号
	},
	"categories": [
		"Other"                  // vscode插件类别，会在插件市场的对应类别中展示
	],
	"activationEvents": [
		"onCommand:extension.commentaligner"
	],
	"main": "./extension.js",
	"contributes": {
		"commands": [{
			"command": "extension.commentaligner", // 插件注册的类名
			"title": "Comment Aligner"             // 插件在命令面包的展示名称
		}]
	},
	"scripts": {
		"postinstall": "node ./node_modules/vscode/bin/install",
		"test": "node ./node_modules/vscode/bin/test"
	},
	"devDependencies": {
		"typescript": "^3.1.4",
		"vscode": "^1.1.25",
		"eslint": "^4.11.0",
		"@types/node": "^8.10.25",
		"@types/mocha": "^2.2.42"
	}
}

При разработке консольного плагина я обнаружил, что приведенный выше package.jons очень несовершенен, поэтому я прилагаю немного подробное введение и пересылаю его изwoo woo .cn blog on.com/Leave Male/Afraid…

{
    // 插件的名字，应全部小写，不能有空格
    "name": "vscode-plugin-demo",
    // 插件的友好显示名称，用于显示在应用市场，支持中文
    "displayName": "VSCode插件demo",
    // 描述
    "description": "VSCode插件demo集锦",
    // 关键字，用于应用市场搜索
    "keywords": ["vscode", "plugin", "demo"],
    // 版本号
    "version": "1.0.0",
    // 发布者，如果要发布到应用市场的话，这个名字必须与发布者一致
    "publisher": "sxei",
    // 表示插件最低支持的vscode版本
    "engines": {
        "vscode": "^1.27.0"
    },
    // 插件应用市场分类，可选值： [Programming Languages, Snippets, Linters, Themes, Debuggers, Formatters, Keymaps, SCM Providers, Other, Extension Packs, Language Packs]
    "categories": [
        "Other"
    ],
    // 插件图标，至少128x128像素
    "icon": "images/icon.png",
    // 扩展的激活事件数组，可以被哪些事件激活扩展，后文有详细介绍
    "activationEvents": [
        "onCommand:extension.sayHello"
    ],
    // 插件的主入口
    "main": "./src/extension",
    // 贡献点，整个插件最重要最多的配置项
    "contributes": {
        // 插件配置项
        "configuration": {
            "type": "object",
            // 配置项标题，会显示在vscode的设置页
            "title": "vscode-plugin-demo",
            "properties": {
                // 这里我随便写了2个设置，配置你的昵称
                "vscodePluginDemo.yourName": {
                    "type": "string",
                    "default": "guest",
                    "description": "你的名字"
                },
                // 是否在启动时显示提示
                "vscodePluginDemo.showTip": {
                    "type": "boolean",
                    "default": true,
                    "description": "是否在每次启动时显示欢迎提示！"
                }
            }
        },
        // 命令
        "commands": [
            {
                "command": "extension.sayHello",
                "title": "Hello World"
            }
        ],
        // 快捷键绑定
        "keybindings": [
            {
                "command": "extension.sayHello",
                "key": "ctrl+f10",
                "mac": "cmd+f10",
                "when": "editorTextFocus"
            }
        ],
        // 菜单
        "menus": {
            // 编辑器右键菜单
            "editor/context": [
                {
                    // 表示只有编辑器具有焦点时才会在菜单中出现
                    "when": "editorFocus",
                    "command": "extension.sayHello",
                    // navigation是一个永远置顶的分组，后面的@6是人工进行组内排序
                    "group": "navigation@6"
                },
                {
                    "when": "editorFocus",
                    "command": "extension.demo.getCurrentFilePath",
                    "group": "navigation@5"
                },
                {
                    // 只有编辑器具有焦点，并且打开的是JS文件才会出现
                    "when": "editorFocus && resourceLangId == javascript",
                    "command": "extension.demo.testMenuShow",
                    "group": "z_commands"
                },
                {
                    "command": "extension.demo.openWebview",
                    "group": "navigation"
                }
            ],
            // 编辑器右上角图标，不配置图片就显示文字
            "editor/title": [
                {
                    "when": "editorFocus && resourceLangId == javascript",
                    "command": "extension.demo.testMenuShow",
                    "group": "navigation"
                }
            ],
            // 编辑器标题右键菜单
            "editor/title/context": [
                {
                    "when": "resourceLangId == javascript",
                    "command": "extension.demo.testMenuShow",
                    "group": "navigation"
                }
            ],
            // 资源管理器右键菜单
            "explorer/context": [
                {
                    "command": "extension.demo.getCurrentFilePath",
                    "group": "navigation"
                },
                {
                    "command": "extension.demo.openWebview",
                    "group": "navigation"
                }
            ]
        },
        // 代码片段
        "snippets": [
            {
                "language": "javascript",
                "path": "./snippets/javascript.json"
            },
            {
                "language": "html",
                "path": "./snippets/html.json"
            }
        ],
        // 自定义新的activitybar图标，也就是左侧侧边栏大的图标
        "viewsContainers": {
            "activitybar": [
                {
                    "id": "beautifulGirl",
                    "title": "美女",
                    "icon": "images/beautifulGirl.svg"
                }
            ]
        },
        // 自定义侧边栏内view的实现
        "views": {
            // 和 viewsContainers 的id对应
            "beautifulGirl": [
                {
                    "id": "beautifulGirl1",
                    "name": "国内美女"
                },
                {
                    "id": "beautifulGirl2",
                    "name": "国外美女"
                },
                {
                    "id": "beautifulGirl3",
                    "name": "人妖"
                }
            ]
        },
        // 图标主题
        "iconThemes": [
            {
                "id": "testIconTheme",
                "label": "测试图标主题",
                "path": "./theme/icon-theme.json"
            }
        ]
    },
    // 同 npm scripts
    "scripts": {
        "postinstall": "node ./node_modules/vscode/bin/install",
        "test": "node ./node_modules/vscode/bin/test"
    },
    // 开发依赖
    "devDependencies": {
        "typescript": "^2.6.1",
        "vscode": "^1.1.6",
        "eslint": "^4.11.0",
        "@types/node": "^7.0.43",
        "@types/mocha": "^2.2.42"
    },
    // 后面这几个应该不用介绍了
    "license": "SEE LICENSE IN LICENSE.txt",
    "bugs": {
        "url": "https://github.com/sxei/vscode-plugin-demo/issues"
    },
    "repository": {
        "type": "git",
        "url": "https://github.com/sxei/vscode-plugin-demo"
    },
    // 主页
    "homepage": "https://github.com/sxei/vscode-plugin-demo/blob/master/README.md"
}

Пакет

Выполните следующую команду:

vsce package

В корневом каталоге получить:comment-aligner-1.0.1.vsixдокумент

выпускать

  1. Способ 1: используйте vscevsce publishинструмент для публикации, но его нужно настроить на официальном сайтеPersonal Access Tokenсложнее. Может относиться кОфициальный учебник

  2. Способ 2: загрузить и опубликовать прямо на официальном сайтеvscode插件发布1.png vscode插件发布2.png vscode插件发布3.png

    После загрузки нажмите OK для успешной публикации.

проверка выпуска

  1. Проверяйте статус на официальном сайте маркета плагиновvscode插件发布4.png
  2. Поиск на официальном сайте маркета плагиновvscode插件发布5.png
  3. Поиск на странице плагина vscodevscode插件发布6.png

Все вышеперечисленное свидетельствует о том, что релиз прошел успешно.

Поддержка плагина

После обнаружения ошибок и завершения разработки новых функций необходимо обновить плагин, необходимо только загрузить на официальный сайт только что созданный пакет .vsix.vscode插件发布7.png

наконец

Надежда полезная, всем спасибо.

Категории