Use typescript to expand your own Vscode

Transferred from: http://www.iplaysoft.com/brackets.html
Use typescript to expand your own vscode! 0x00 Preface
In the first few days of New York, Microsoft held a connect (); 2015 Congress. Through this conference, we can be pleased to see that Microsoft has indeed become more open and more pragmatic. Of course, there are a lot of new products and features released, including the beta version of VS code. And Microsoft has gone a step further by opening up the VS code to open source on GitHub. In addition to these exciting news, we should also note that VS Code provides support for expansion.
So this article will talk about using typescript to develop VS code development topics.


The Extended App Store page used in this article:
Https://marketplace.visualstudio.com/items/JiadongChen.LicenseHeader
GitHub page:
Https://github.com/chenjd/VSCode-StandardHeader
0x01 Hello, world
"Everything Begins, Hello world". So we start with a Hello world as a starting point and begin to build our own vscode in a step-by-step development.
Before developing the Vscode, we need to make sure that node. JS is already installed on the computer. We can then use the Yeoman-based template builder provided by Microsoft to generate Vscode-expanded templates.

npm install-g yo Generator-code

After that, we only need to run the Yo Code command in the terminal, which allows you to enter the boot process to create the extension template.

Yo code

The

selects Typescript as the development language during the boot process, and after completing some basic information, our first Vscode extension is created.
So, what does the Yo Code command do primarily for us? The
generates an expanded folder in the current directory based on the information we fill in the boot, and the folder name is the extension name that we fill in the boot. This folder mainly includes the SRC folder, the test folder, and the Out folder of the source files (extension.ts). Note that the Out folder is not created before compiling the typescript source file, and the Out folder is created after compilation and the content is the JS file generated by typescript after compilation. The resource profile generated by the Package.json,package.json file describes the expanded information and its capabilities. I will also specify the Package.json file below. Launch.json and Tasks.json and Settings.json (located under the. Vscode directory in the project) are created, where the Launch.json file prescribes the start-up of an extended development (Extension Development) mode vs code process, and specifies that the task defined in the Tasks.json file (which is equivalent to NPM run compile, as defined in Tasks.json) is run before vs code starts. That is, the TS file is compiled into a JS file using the Typescript compiler. So we can just compile (because it's typescript) and debug our expansion projects. Of course, we decide whether to create a git repository for versioning based on our choices in the boot.
Below is the full list of our outreach projects:

. ├──.gitignore//configuration does not need to add version-managed files ├──.vscode//VS Code Integration │├──launch.json│├──                         Settings.json│└──tasks.json├──.vscodeignore//configuration does not need to be added to the files that are eventually released to the extension ├──readme.md├──src SOURCE file │└──extension.ts//If we use JS to develop the extension, the suffix of the file is. js├──test//Test folder │├─ ─extension.test.ts//If we use JS to develop the extension, the suffix of the file is. js│└──index.ts//If we use JS to develop the extension, the suffix of the file is. js├──node _modules│├──vscode//Vscode language support for typescript.  │└──typescript//typescript compiler ├──out//Compiled output folder (only typescript required, JS no need) │├──   src│|   ├──extension.js│|       └──extension.js.map│└──test│├──extension.test.js│├──extension.test.js.map│├──index.js│                     └──index.js.map├──package.json//The expanded resource profile ├──tsconfig.json//├──typings           Type definition folder │├──node.d.ts    Type definitions associated with node. JS │└──vscode-typings.d.ts//and VS code associated type definitions └──VSC-EXTENSION-QUICKSTART.MD  

  At this point, we just need to click the Start button in the Debug area of the VS code.


In the next open new vs code in development mode, we only need to enter Hello World in the command panel to activate this template extension and pop up a message popup with Hello world.


So, how does the VS code actually load and run the extension? How should we develop and expand for ourselves and even share it with more people to better use vs code?
0x02 about Package.json two or three
as a resource profile for an extended project, Package.json not only describes the expanded information but also describes the expanded functionality. It is necessary to note that when vs code is started, the expanded Package.json file will be read and VS code will handle the contents of the contributes part of the Package.json file. This is different from the extended source file extension.ts. VS code does not load the expanded source code at startup.
Let's take a look at the contents of the Package.json file in the extended project we just built.

 {"name": "Standard-header", "DisplayName": "Standard-header", "description": "Standard-header", "version ":" 0.0.1 "," publisher ":" Jiadongchen "," engines ": {" Vscode ":" ^0.10.1 "}," categories ": [" Oth ER "]," activationevents ": [" OnCommand:extension.sayHello "]," main ":"./out/src/extension "," contr    Ibutes ": {" Commands ": [{" Command ":" Extension.sayhello "," title ":" Hello World "}] }, "scripts": {"vscode:prepublish": "Node./node_modules/vscode/bin/compile", "Compile": "Node./node_ Modules/vscode/bin/compile-watch-p./"}," Devdependencies ": {" typescript ":" ^1.6.2 "," Vscode ":" 0. 10.x "}} 

As we can see, Package.json describes some basic information about the extension, such as name extension, extended description information description, and expanded version number versions and publisher information Publisher and so on. By the way, you can use the Expand Publishing tool to update the extended version that has been published to the VS code store directly by increasing the version number.
In addition to this, we can even configure some of the display information in the Package.json file that expands in the store of VS code, such as the type of expansion in the store: categories, An expanded icon: icon and some of the presentation information that expands on the app Market homepage: Gallerybanner and more.

... "icon": "Res/icon.png", "Gallerybanner": {    "color": "#5c2d91",    "theme": "Dark"}, "categories": [    " Other "],...

Of course, the more important things are activationevents, contributes, and scripts and main. The content of the scripts item is unique when developing with typescript, and the main purpose is to provide information about compiling TS files. The main key, in turn, points to the JS file generated after compiling the TS source file.
Activationevents
As mentioned above, the VS code default does not immediately execute the expanded code at startup. Therefore, in order for the extension to be activated, we need to define the contents of the Activationevents item in the Package.json file. For example, in the example above, activationevents is defined as follows:

... "activationevents": [    "OnCommand:extension.sayHello"],...

This means that when the "OnCommand:extension.sayHello" event is triggered, the extension is activated. So what are the types of activation events in VS code? Now let's go to class.
Depending on the language of the file: Onlanguage:${language}
When the open file is in the language specified by onlanguage, the extension is activated.
For example:

... "activationevents": [    "Onlanguage:python"] ...

According to the command entered: Oncommand:${command}
When the command specified in the OnCommand is triggered, the extension is activated. In the Hello World template generated above, we can see.

... "activationevents": ["OnCommand:extension.sayHello"] ...

According to folder: Workspacecontains:${toplevelfilename}

"Activationevents": [    "WorkspaceContains:package.json"],

Unlimited: *

... "activationevents": [    "*"] ...

Because there is no limit, the extension is activated when the VS code is started. Therefore, the way to activate expansion without conditionality is not highly recommended. You'd better use caution.
Contribution
The contributes item in the Package.json file also contains many kinds. If you need to categorize, you can be divided into the following types.
Configuration commands KeyBindings languages debuggers grammars themes snippets
However, this article is limited to space, will only focus on commands and keybindings these two kinds.
Commands
As an example of the Hello World in the above article, we define the title of the command and the specific command corresponding to the title in the commands item. As shown below:

"contributes": {    "commands": [{        "command": "Extension.sayhello",        "title": "Hello World"    }]},

Once the extension is installed, we can find "Hello world" in the command panel in VS code (my shortcut on Mac is shift+cmd+p). The input triggers the Extension.sayhello command, and the activation event is triggered if the definition is "OnCommand:extension.sayHello" in the Extended Activation event entry activationevents above. The expanded code is activated.


KeyBindings
Of course, as with commands, we can also trigger commands by binding shortcut keys by defining the KeyBindings item in Package.json. This is easier to do, for example, when we develop a plug-in for a standard header in the following section, we use the method of binding shortcut keys.

 "contributes": {"keybindings": [{"Command": "Extension.insertheader", "Key": "Shift+cmd+1", "When": "Editortextfocus"}]}, 

If we install an extension that defines a shortcut key trigger in VS Code, the keyboard shortcut that opens VS code can see the shortcut key defined in the extension and its corresponding command.


0x03 VS code run expansion
with the previous section, we have a clear understanding of how the template extension works.
VS Code First detects the expansion and reads the contents of the expanded Package.json file and applies the contributes entry in the Package.json file to VS code. This allows us to enter the commands defined in the contributes item based on the contents of the contributes item, or in the command panel. Or, use the shortcut key KeyBindings defined in the contributes key to trigger the Extension.sayhello command.
When Extension.sayhello is triggered, VS code creates an activation event called OnCommand:extension.sayHello.
at the same time, any extension that sets Activationevents to OnCommand:extension.sayHello in its own Package.json file will be activated. The./out/src/extension.js file is loaded into the JavaScript VM based on the contents of the main item in the Package.json file. Next, VS code invokes the active function in the Extension.js file, and in the active function we need to provide a concrete implementation of the function "Extension.sayhello" and execute it.
Well, after understanding the basics of VS code development, we can start developing our own expansion, which is to add the license header to the source file.
0x04 One Insert license header extension
since you want to build your own vs code, some of your favorite operating habits naturally want to work with VS code. Inserting a header is such a simple little feature.
Let's start by looking at the basic content of the Extension.ts file, the source file that the Hello World template expands on.

Import * as Vscode from ' vscode '; export function activate (Context:vscode. Extensioncontext) {    var disposable = Vscode.commands.registerCommand (' Extension.sayhello ', () = {...
　　　　 vscode.window.showInformationMessage(‘Hello World!‘);
       ...
    });}

First, we naturally introduce the API under the Vscode namespace to gain control over the VS code capability.
Second, we notice that the expanded source file needs to export a function called activate, and when the extended Package.json file activationevents The defined event is triggered, the VS code invokes the Activate function.
Finally, we can see that we use the Vscode API to register a command called "Extension.sayhello" and provide its implementation, according to the logic in the template, "Extension.sayhello" The logic of the command is to display an informational message in the window with the content "Hello world". The specific effect that you have seen in the beginning of this article.
So the next step is very simple, and we'll start with a new class called Headergenerator that performs the task of inserting the header.

Class Headergenerator {    private _disposable:disposable;    Public Insertheader () {        //Get The current text editor let         editor = Window.activetexteditor;         if (!editor) {             return;         }                 Define header content        var header = "License header";                Get the document        var doc = editor.document;                Insert Header        Editor.edit (EB) = {            Eb.insert (doc.positionat (0), header);        });          Dispose () {        this._disposable.dispose ();    }}

The specific execution of the Insert header is the Edit method of the editor (TextEditor Class) of the current window, which inserts new content into the current document DOC (TextDocument Class) by using the Insert method of the Texteditoredit class.
After that, we simply implement the Insertheader method of calling the Headergenerator class in the Activate function in the Extension.ts file.

Import * as Vscode from ' Vscode '; Import {window, commands, disposable, Extensioncontext, textdocument} from ' vscode '; Export function activate (context: Vscode. Extensioncontext) {    Console.log (' Congratulations, your extension "Standard-header" is now active! ');     Let Headergen = new Headergenerator ();    var disposable = Vscode.commands.registerCommand (' Extension.insertheader ', () = {        headergen.insertheader ();    } );    Context.subscriptions.push (Headergen);    Context.subscriptions.push (disposable);}

Of course, in order to increase the support of the shortcut key "Shift+cmd+1", we also need to modify the contents of the contributes in Package.json:

"contributes": {    "keybindings": [{        "command": "Extension.insertheader",        "key": "Shift+cmd+1",        " When ":" Editortextfocus "    }"},

After that, let's go into the development model to see the effect. Using the shortcut key shift+cmd+1, we can see that the header is inserted in the VS Code window (the header content I have replaced with the MIT protocol).


All right, here we go. The expansion of the header in the source file is complete, so let's use the installation, or even the App store published to vs code, to share the fruits of our labor.
0X05 installed locally or published in the store
In order to "use" our expansion without having to go into the development model every time, we have to let our own vs code install this extension.
In fact, it is very simple and convenient to install locally for your own expansion. VS code gets the local extension in the. vscode/extensions folder. and the. Vscode/extensions folder is located in the location we can summarize as follows:
Windows%userprofile%\.vscode\extensions Mac $HOME/.vscode/extensions Linux $HOME/.vscode/extensions
We just need to make a copy of our expansion into the. vscode/extensions folder, and the VS code will be able to check for this extension at startup.
Of course, in addition to using our own development, we can also publish the extension to the VS code store. At this point we are going to--vsce with an outreach release tool.
The first is to install VSCE:

NPM install-g Vsce

After that we also need to register and log in to visual Studio Team services to get personal access tokens.
Once you get the personal access Token, we can create a Publisher account using VSCE.

Immediately after, log in and publish:

VSCE Login Vsce Publish

Once the release is successful, we can see our expansion in the VS Code App Store.


And in the VS Code command panel, we can also use the command to install:

Well, as of now, using typescript to expand your own VS code is almost there. I hope you have a lot of communication ~

Use typescript to expand your own Vscode