Write from scratch & release a vscode extension


Write from scratch & release a vscode extension

At the beginning of the yearTO-DOOn the plan of a task, is to solve their own needs for the purpose of developing aVSCodeExtension.


Recently, a small demand has come. Can we not leave the vscode editor,View the size of a file or folder

investigation and research

It happens that there is no statistical folder related extension in the current expansion market, only the statistics of a single file, such as:File Size

So make your own wheels


Write from scratch & release a vscode extension

on trial

Install from the web page,Folder Size, or search from the extension store

Write from scratch & release a vscode extension


quick get start

Three good ways to get started:

  1. Read official documents
  2. Getting started with official examples
  3. Read the same type of extended source code

We all know that vscode isTypeScriptTherefore, the vscode extension naturally embraces ts. of course, it can also be written in JS.

When reading the code of the same type of extension, it is found that the way of statistics file information of most extension implementations is not the same, some are simple and some are complex.

In fact, the example on the official document of requirements can be covered completely. What I have done is to integrate the functions and features I need. When opening / selecting a file, I can display a copy in the status bar in the format of [file | folder]. In this way, I can count the file and folder information without leaving the vscode editor.

Function realization

at presentFolder SizeIt has three small functions:

  1. Statistics file size
  2. Count folder size
  3. Count the number of files in the folder

These functions are triggered based on the event hook of workspace. Statistics are triggered when opening or switching files, saving files, and closing files. API usage will be discussed below.


I don’t understand how to use the debug extension provided by vscode. I can only use the print content to debug. The vscode extension has several functions that can be used for printing and debugging. For example:

  • OutputChannel
  • showInformationMessage
  • showTextDocument

utilizevsceThe tool is packaged into various vsix files, namely vscode extension local installation format. You can also send the file to someone else for testing.


An azure account needs to be registered for the extension release. Vscode uses azure Devops as an extended market service, which is simple in four steps:

  1. Create an azure account and obtain personal access token
  2. When VSCE creates a publisher, token is required, corresponding to package.json Publisher declared in
  3. VSCE logs in with the created publisher, and token is required
  4. VSCE release


The folder size extension has no third-party dependency and is completely based onVSCode Extension APIFor development, the following is all the API used, a brief introduction to the API usage



An output channel is a container for readonly textual information.

Corresponding to the output window in vscode, you can use this output content to debug


Show an information message to users. Optionally provide an array of items which will be presented as clickable buttons.

The corresponding vscode information prompt box can also be used for debugging, or combined with the registration command to give user-friendly prompt information.


Creates a status bar item.

Create a status bar instance to display the text and control the display and concealment.


The currently active editor or undefined. The active editor is the one that currently has focus or, when none has focus, the one that has changed input most recently.

The URI used to get the currently selected file



Registers a command that can be invoked via a keyboard shortcut, a menu item, an action, or directly.

Registering a command with an existing command identifier twice will cause an error.

Register a command, such as the click feedback command for the status bar



Returns the meta data for a file.

Used to count the size of the currently selected file


Allows to retrieve all entries of a directory

Read the folder of the currently selected file. Use this method to recurse the folder and count the folder size


Get a workspace configuration object.

Gets the workspace configuration item, which is used to extend the customizable configuration item.

Need to declare inpackage.jsonIn, the following configuration describes configurable and negligible folder paths, with default values:node_modules|.git

Statistics by extensionnode_modulesThis “black hole” may occupy a certain amount of memory. It is better to ignore it.

"contributes": {
  "configuration": [{
    "title": "Folder Size Configuration",
    "properties": {
      "folder-size.ignoreFolders": {
        "type": "string",
        "default": "node_modules|.git",
        "description": "The Folders Not Counting",
        "scope": "resource"


An event that is emitted when a text document is saved to disk.

Event triggered when saving a document. The file size and folder size are counted


An event that is emitted when a text document is opened or when the language id of a text document has been changed.

Event triggered when a document is opened. The file size and folder size are counted


An event that is emitted when a text document is disposed or when the language id of a text document has been changed.

Event triggered when a document is closed, and the status bar is reset

reference resources

Original text:https://www.xlbd.me/posts/202…