简单地写一个 visual studio code 扩展

vscode

今天我们来写一个 visual studio code 的扩展，不过这次我们写的相对简单。不过再复杂的扩展开发流程也是差不多少。我们需要先
https://yeoman.io/

安装yeoman

npm i -g yo

可以通过 npm 全局安装 yeoman ，yeoman 可以帮助我们创建项目，有许多好用预设模板供我们使用，避免我们把过多时间浪费在搭建项目上。然后我们安装 generator-code 用于生产 visual studio 代码。

npm i -g generator-code

创建目录

使用 yo 帮助我们创建一个 visual studio 扩展的项目

yo code

然后我们根据提示，本次我们选择简单扩展，该扩展只是为了创建代码段，类似输入名称生产代码。

? What type of extension do you want to create? New Code Snippets

所以选择 New Code Snippets

? Folder name for import or none for new: 
? What's the name of your extension? zisnippets
? What's the identifier of your extension? zisnippets
? What's the description of your extension? simple zi sinippets generator

根据提示我们一个一个根据项目实际回答出来

? Language id: html

语言我们选择 html，可以随着追加对其他语言的支持，表示我们定义 snippets 适用于该语言。

{
    "name": "zisnippets",
    "displayName": "zisnippets",
    "description": "simple zi sinippets generator",
    "version": "0.0.1",
    "engines": {
        "vscode": "^1.35.0"
    },
    "categories": [
        "Snippets"
    ],
    "contributes": {
        "snippets": [
            {
                "language": "html",
                "path": "./snippets/snippets.json"
            }
        ]
    }
}

在 snippets/sinppets.json 文件中我们可以写自己

{
    "Zi Started Template": {
        "prefix": "zinav",
        "body": [
            "<div>",
            "\t<nav>",
            "\t\t${1:Title}",
            "\t<\/nav>",
            "<div>"
        ],
        "description": "Creates zi nav"
    }
}

• prefix 表示我们在代码编辑器中输入 zinav 就会输出下面代码
• ${1:Title} 表示占位符让用户进行输入，1 表示其 id 吧，可以按顺序进行定义。还有一些全局变量让我们使用文件名称、时间这些大家可以看相关帮助文档。

好了差不多少，这么简单我们怎么好意发布呢，不过发布也不难，随后可以根据需要发布一个自己扩展。我们可以自己使用一些编写组件。

将项目文件夹复制到 visual studio code 的.vscode 下的 extension 文件夹下，然后重启项目就可以扩展目录最后看到我们定义扩展。

扩展组件

测试一下，这里修改了 prefix 呵呵大家不要 confusing。

测试
输入