乐趣区

关于typescript:从零编写-发布一个-VSCode-扩展

jiezi

年初在 TO-DO 上打算了一个工作，是以解决本身需要为目标，开发一个 VSCode 扩大。

需要

最近一个小需要来了，是否在不来到 VSCode 编辑器的状况下， 查看文件或者文件夹的大小 。

调研

恰好目前扩大市场上没有统计 ???? 文件夹相干的扩大，只有统计 ???? 单个文件的，比方：File Size

所以还是本人造轮子吧

预览

试用

从网页装置，Folder Size，或者从扩大商店搜寻

开发

疾速入门

三个比拟好的入门办法：

  1. 浏览官网文档
  2. 应用官网示例疾速入门
  3. 浏览同类型扩大源码

大家都晓得 VSCode 是用 TypeScript 写的，所以 VSCode 扩大天然是拥抱 TS 的，当然也能够用 JS 编写。

浏览同类型扩大代码的时候，发现大部分的扩大实现的统计文件信息的形式都不太一样，有的简略，有的简单。

其实我这个需要官网文档上的例子齐全就能够 Cover 住，我做的呢，只是整合了我所须要的性能个性，关上 / 抉择文件的时候，能够在 Status Bar (状态栏) 显示格局为：[File | Folder] 这样的文案。这样我就能够在不来到 VSCode 编辑器的状况下统计到了文件及文件夹的信息。

性能实现

目前 Folder Size 具备三个小性能：

  1. 统计文件大小
  2. 统计文件夹大小
  3. 统计文件夹中文件的个数

这些性能都是基于 workspace 的事件钩子去触发的，在关上或切换文件、保留文件、敞开文件时触发统计，上面会讲到 API 用法。

调试

没玩明确如何用 VSCode 自带的 debug 调试扩大的我，只能用打印内容来调试，VSCode Extension 有几个能够用于打印调试的性能。比方：

  • OutputChannel
  • showInformationMessage
  • showTextDocument

利用 vsce 工具进行打包为 VSIX 各式的文件，即 VSCode 扩大本地装置格局。也能够将文件发给别人测试。

公布

扩大公布须要注册 Azure 账号，VSCode 应用 Azure DevOps 作为扩大市场服务，简略四步：

  1. 创立 Azure 账号，获取 Personal Access Token
  2. vsce 创立 publisher，须要 Token，对应 package.json 中申明的 publisher
  3. vsce 以创立的 publisher 登录，须要 Token
  4. vsce 公布

API

Folder Size 扩大无任何第三方依赖，齐全基于 VSCode Extension API 进行开发，上面是用到的所有 API，简略介绍下 API 用法

window

window.createOutputChannel

An output channel is a container for readonly textual information.

对应 VSCode 外面的输入窗口，能够利用这个输入内容调试

window.showInformationMessage

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

对应 VSCode 信息提示框，同样能够用于调试，也能够联合注册命令，给用户敌对提示信息。

window.createStatusBarItem

Creates a status bar item.

创立一个状态栏实例，能够显示文本，管制显隐。

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.

用于获取以后选中文件的 URI

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.

注册一个命令，比方给状态栏注册点击反馈命令

workspace

vscoce.workspace.fs.stat

Returns the meta data for a file.

用于统计以后选中文件的大小

vscode.workspace.fs.readDirectory

Allows to retrieve all entries of a directory

读取以后选中文件的文件夹，可用此办法递归文件夹，统计文件夹大小

vscode.workspace.getConfiguration

Get a workspace configuration object.

获取工作区配置项，用于扩大可自定义的配置项。

须要申明在 package.json 中，以下配置形容了可配置的可疏忽的文件夹门路，默认值：node_modules|.git

用扩大去统计 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"
      }
    }
  }]
}

vscode.workspace.onDidSaveTextDocument

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

保存文档时触发的事件，此时统计文件大小、文件夹大小

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.

打开文档时触发的事件，此时统计文件大小、文件夹大小

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.

敞开文档时触发的事件，此时重置状态栏

参考

  • https://code.visualstudio.com/api
  • https://code.visualstudio.com/api/working-with-extensions/publishing-extension

原文：https://www.xlbd.me/posts/202…

退出移动版