What can VSCode Extension do?

If you have a great idea (about code), everything will work unless there are some objective conditions that don’t work.

Ii. VSCode plug-in development process

1. Configure the development environment

NPM install -g yo generator-code

Development of 2.

// Run the command to create project Yo Code

/ /… Implement functionality (typescript is recommended);

3. Plug-in release

1. Register the account aka.ms/SignupAzure…

Click to create a new Personal Access Token. Note that Organization should select All Accessible Organizations and Scopes should select Full Access. Otherwise, the subsequent press conference will fail.

3. Package and publish vsCE package

vsce publish -p <Personal Access Token>

3 the extension.

{// the name of the plug-in, all lowercase, no space "name": "vscode-plugin-demo", // the friendly displayName of the plug-in, used for display in the app market, supporting Chinese "displayName": "VSCode plug-in demo", // description" description": "VSCode plug-in demo highlights ", // keywords for the application market search "keywords": ["vscode", "plugin", "demo"], // Version number "version": "1.0.0", // Publisher, if you want to publish to the market, this name must be the same as the publisher" publisher": "Sxei ", // indicates the lowest supported version of VScode for the plug-in. "engines": {"vscode": "^1.27.0"}, // Plug-in application market category, optional values:  [Programming Languages, Snippets, Linters, Themes, Debuggers, Formatters, Keymaps, SCM Providers, Other, For Extension Packs, Language Packs] "Categories ": ["Other"] "Images /icon. PNG ", // an extended array of activationEvents, which can be extended by activationEvents, more on activationEvents later: [onCommand: extension. "sayHello"], / / the plugin's main entrance to the "main" : ". / SRC/extension ", / / contribution points, the entire plug-in is the most important one of the most configuration items "contributes" : {// Plugin configuration item "configuration": {"type": "object", // config item title, which will be displayed in vscode Settings page "title": "vscode-plugin-demo", "properties": {/ / here I just wrote 2 Settings, configure your nickname "vscodePluginDemo. YourName" : {" type ":" string ", "default" : "guest", "description" : ShowTip: {"type": "Boolean ", "default": true, "description": "Should a welcome prompt be displayed at every startup!" SayHello: [{"command": "extension.sayHello", "title": "Hello World"}], [{" command ":" the extension. SayHello ", "key" : "CTRL + f10", "MAC" : "CMD + f10" and "when" : "editorTextFocus}], / / the menu" menus ": "When ": "editorFocus", "command": {// editor/context": [{// when": "editorFocus", "command": "Group ": "navigation@6"}, {"when": "editorFocus", "command": "extension.demo.getCurrentFilePath", "group": "navigation@5"}, {// "when": "editorFocus && resourceLangId == javascript", "command": "extension.demo.testMenuShow", "group": "z_commands" }, { "command": "extension.demo.openWebview", "group": "Navigation"}], // display text "editor/title": [{"when": "editorFocus && resourceLangId == javascript", "command": "extension.demo.testMenuShow", "group": "Navigation"}], // Editor title/context": [{"when": "resourceLangId == javascript", "command": "The extension. The demo. TestMenuShow", "group" : "navigation"}], / / resource manager right-click menu "explorer/context" : [{" command ": "extension.demo.getCurrentFilePath", "group": "navigation" }, { "command": "extension.demo.openWebview", "group": "Navigation"}]}, // Snippets "snippets": [{"language": "javascript", "path": "./snippets/javascript.json" }, { "language": "html", "path": "./snippets/html.json"}], // customize the new Activitybar icon, which is the large icon "viewsContainers" in the left sidebar: {"activitybar": [{"id": "BeautifulGirl ", "title": "beautifulGirl", "icon": "images/ beautifulgirl.svg"}]}, // customize the implementation of the view in the sidebar: {// and the viewsContainers ID correspond to "beautifulGirl": [{" ID ": "beautifulGirl1", "name": "domestic beauty"}, {"id": "BeautifulGirl2", "name" : "foreign beauties"}, {" id ":" beautifulGirl3 ", "name" : "freak"}]}, / / "iconThemes" icon theme: [{" id ": "TestIconTheme ", "label": "testIconTheme", "path": "./theme/icon-theme.json"}]}, // same as 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"}, / / behind this a few should not introduce "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"}, / / home page "homepage" : "https://github.com/sxei/vscode-plugin-demo/blob/master/README.md" }Copy the code

setttings example:

"contributes": { "commands": [ { "command": "extension.EasyFlutterPlugin", "title": "Easy Flutter Plugin" } ], "menus": { "editor/context": [ { "when": "resourceLangId == dart", "command": "extension.EasyFlutterPlugin", "group": "navigation" } ] }, "configuration": { "type": "object", "title": "Easy Flutter Plugin", "properties": { "easy-flutter-plugin.yourName": { "type": "string", "default": "guest", "description": "Your name"}, "easy-flutter-plugin.showTip": {"type": "Boolean ", "default": true, "description":" Whether to display a welcome prompt at startup!" }, "easy-flutter-plugin.input": { "type": "string", "default": "defaultValue", "description": "provide a input for accepting value" }, "easy-flutter-plugin.inputNum": { "type": "number", "default": "1.001", "description": "provide an input for positive number"}, "easy-flutter- plugin.inputint ": {"type": "integer", "default": "1", "markdownDescription": "MarkdownDescription: provide a input for accepting integer, See the [VSCode Docs (https://code.visualstudio.com/api/references/contribution-points#contributes.configuration) for more details.\n - a: item1\n - b: itemb" }, "easy-flutter-plugin.checkbox": { "type": "boolean", "default": "0", "description": "provide a checkbox" }, "easy-flutter-plugin.dropdown": { "type": "string", "default": "defaultValue", "enum": [ "optionA", "optionB", "optionC" ], "description": "provide a dropdown and options", "enumDescriptions": [ "description for option A", "description for option B", "description for option C" ] }, "easy-flutter-plugin.array": { "type": "array", "default": [ "defaultValue" ], "description": "array settings is only available at settings.json" }, "easy-flutter-plugin.object": { "type": "object", "default": { "key" : "defaultValue" }, "description": "object settings is only available at settings.json" }, "easy-flutter-plugin.null.a": { "type": null, "default": null, "description": "null settings for showing group feature" }, "easy-flutter-plugin.null.b": { "type": null, "default": null, "description": "null settings for showing group feature" } } } }Copy the code

other

Personal development plugin easy flutter-plugin is used to simplify the function of flutter plugin.

Dart: objc/swift + Java /kotlin + web.dart + example/lib/.main.dart + test.dart;

Developers only need to focus on the internal implementation of functions; Templated work for plug-in generation, improve development efficiency;