At the beginning of the year, I planned a task in to-do TO develop a VSCode extension TO solve my own needs.

demand

Recently there was a small requirement to “see the size of a file or folder” without leaving the VSCode editor.

research

As it happens, there are no 📁 folder related extensions in the current extension market, only 📃 single File statistics, such as: “File Size”

So build your own wheels

preview

Folder Size Preview

The trial

Install from web, Folder Size, or search from the Extension store

Folder Size Install

The development of

Quick start

Three good ways to get started:

  1. Read official documents
  2. Use official examples for a quick start
  3. Read the same type of extension source code

We all know that VSCode is written in TypeScript, so VSCode extensions naturally embrace TS and can also be written in JS.

When reading the same type of extension code, it is found that most of the extension implementation statistics file information in different ways, some simple, some complex.

In fact, I this demand of official document example can completely Cover, I do, just integrates the features that I need, open/select files, can be in the Status Bar (Status Bar) display format is: [File | Folder] such a copy. This allows me to count files and folders without leaving the VSCode editor.

Function implementation

Currently, “Folder Size” has three small functions:

  1. Collecting file size
  2. Collecting Folder sizes
  3. Statistics the number of files in a folder

These functions are triggered by workspace event hooks, which trigger statistics when opening or switching files, saving files, or closing files. The API usage will be discussed below.

debugging

I didn’t know how to use VSCode’s built-in debug Extension, so I can only use print content to debug. VSCode Extension has several functions that can be used for print debugging. Such as:

  • OutputChannel
  • showInformationMessage
  • showTextDocument

Use vsCE tools to package various files for VSIX, that is, VSCode extension local installation format. You can also send the file to others for testing.

release

To expand publishing, you need to register an Azure account. VSCode uses Azure DevOps as the extension marketing service. There are four simple steps:

  1. Create an Azure account to obtain a Personal Access Token
  2. Vsce creates publisher, which requires a Token, corresponding to the publisher declared in package.json
  3. A Token is required to log in to vsCE as publisher
  4. Vsce release

API

Folder Size Extension is completely developed based on VSCode Extension API without any third-party dependencies. The following are all apis used and a brief introduction to API usage

window

❝

window.createOutputChannel

❞

An output channel is a container for readonly textual information.

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

❝

window.showInformationMessage

❞

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, and can also be combined with the registration command to give user friendly prompt information.

❝

window.createStatusBarItem

❞

Creates a status bar item.

Create a status bar instance that can display text and control explicit and implicit.

❝

window.activeTextEditor

❞

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

commands

❝

vscode.commands.registerCommand

❞

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 a click feedback command for the status bar

workspace

❝

vscoce.workspace.fs.stat

❞

Returns the meta data for a file.

Used to measure the size of the currently selected file

❝

vscode.workspace.fs.readDirectory

❞

Allows to retrieve all entries of a directory

Read the current selected file folder, you can use this method recursive folder, folder size statistics

❝

vscode.workspace.getConfiguration

❞

Get a workspace configuration object.

Gets workspace configuration items that extend customizable configuration items.

Need to declare on the package. The json, the following configuration describes the configurable negligible folder path, the default value: node_modules |. The git

Node_modules: node_modules: node_modules: node_modules: node_modules

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

❝

vscode.workspace.onDidSaveTextDocument

❞

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

The event that is triggered when a document is saved, and the file size and folder size are counted

❝

vscode.workspace.onDidOpenTextDocument

❞

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

An event that is triggered when a document is opened to count file size and folder size

❝

vscode.workspace.onDidCloseTextDocument

❞

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

Event that is triggered when a document is closed, resetting the status bar

reference

  • code.visualstudio.com/api
  • Code.visualstudio.com/api/working…

❝

Original: https://www.xlbd.me/posts/2020-09-27-publish-a-vscode-extension-from-scratch.html

❞

This article is formatted using MDNICE