VS Code 插件开发指北 (二)

接着上面的继续介绍一些常用的 VS Code 插件的配置和 API。

代码片段

在 package.json 增加 snippets 配置。

"snippets": [
    {
        "language": "vue", // 指定支持的语言
        "path": "./snippets/demo.json" // 文件路径
    },
]

在 snippets 文件夹下创建 demo.json 文件，代码格式如下

{
    "片段名称": {
        "prefix": "代码片段触发前缀",
        "body": [ "片段内容" ],
        "description": "代码片段描述"
    },
}

// 示例
{
    "selectCheckBox": {
        "prefix": "select-check-box",
        "body": [
            "<select-check-box v-model='${1:search.statusList}'  :sourceOpt='${2:statusOpt}' @change='${3:getList(1)}' title='${4:状态}'></select-check-box>"
        ],
        "description": "多选下拉框"
    }
}

片段中的 ${1:xxx} 是占位符，数字表示光标聚焦的顺序，1表示默认光标落在这里，按下回车或者tab跳到2的位置，以此类推，xxx 表示此位置的默认值，可省略，比如直接写$3。一个片段里可以设置多个相同的占位符，来同时修改多出占位处。片段中也是支持使用 VS Code 内置的很多变量的，比如可以根据获取当前选择的值(${TM_SELECTED_TEXT}) 填充到代码片段中。

占位符几种使用

$1 只显示光标
${1:xxxx} 默认使用 xxx 填充
${1|a,b,c|} 当光标在此处时提供 a,b,c 三个选择给选择
${1:${TM_SELECTED_TEXT}} 使用内置的变量占位

常用用的变量，查看更多变量

TM_SELECTED_TEXT当前选定的文本或空字符串
TM_CURRENT_LINE当前行的内容
TM_CURRENT_WORD光标下的单词或空字符串的内容
TM_LINE_INDEX基于零索引的行号
TM_LINE_NUMBER基于单索引的行号
TM_FILENAME当前文档的文件名
TM_FILENAME_BASE没有扩展名的当前文档的文件名
TM_DIRECTORY当前文档的目录
TM_FILEPATH当前文档的完整文件路径
CLIPBOARD剪贴板的内容
CURRENT_YEAR当前年份
CURRENT_YEAR_SHORT当前年份的最后两位数字
CURRENT_MONTH两个数字的月份（例如’02’）
CURRENT_MONTH_NAME月份的全名（例如“七月”）
CURRENT_MONTH_NAME_SHORT月份的简称（例如’Jul’）
CURRENT_DATE每月的某一天
CURRENT_DAY_NAME天的名称（例如’星期一’）
CURRENT_DAY_NAME_SHORT当天的简称（例如’Mon’）
CURRENT_HOUR 24小时制格式的当前小时
CURRENT_MINUTE当前分钟
CURRENT_SECOND当前秒

插件配置

在 configuration 中配置的内容会暴露给用户，用户可以从“用户设置”和“工作区设置”中修改你暴露的选项。configuration 是 JSON 格式的键值对，用户会在修改设置时获得对应的提示和更好的体验。

// package.json
{
    "contributes":{
        "configuration":{
            "type": "object",
            "title": "显示在配置页左侧标题",
            "properties": {
                "demo.showtick": {
                    "type": "boolean",
                    "default": false,
                    "description": "配置demo"
                }
            }
        }
    }
}

在插件内获取和修改当前插件配置

// 如果当前配置没有值 默认返回 undefined
const result = vscode.workspace.getConfiguration().get('demo.showtick');

// 修改配置 第三个参数如果传true 则修改全局配置，false只修改当前工作区配置
vscode.workspace.getConfiguration().update('demo.showtick', false, true);

打包发布

如果只是自己使用可以直接打包本地安装，发布到插件市场感觉创建发布前期还是有点繁琐的。

本地打包

vsce 是一个用于将插件发布到市场上的命令行工具。不论是本地打包还是要发布到插件市场都需要使用这个工具

首先安装vsce

npm install -g vsce

打包成vsix包

vsce package

发出插件市场

发布到插件市场有两种方式，一种是在 VS Code 插件市场直接发布 vsix 包，另一种是直接使用 vsce 发布

在插件市场发布

首先在插件市场登录你的账号，可以使用 github 账户或者 Microsoft账户登录

创建发布者（这里需要翻墙），这里发布者 ID 需要和插件 package.json 的 publisher 保持一致。

上传vsix包文件

使用vsce发布

使用 vsce 发布首先需要一个微软 Azure 账户，然后创建一个 Azure DevOps，然后在组织里创建发布 Token，然后就能使用 vsce 发布插件。

首先打开 azure ，直接使用微软账户登录创建一个组织。按照步骤默认会创建一个以邮箱前缀为名的组织。
创建完后

创建 tonken,然后将生成tonken保存下来

然后需要创建一个 publisher，以前可以 vsce 直接创建，新的不在支持了，只能通过在上一种方式在网页创建了。
创建好后就可以在使用 vsce publish 命令发布插件，这个时候会提示需要 tonken，将刚刚生成复制上去。可以看到插件已经发布上去了。