本文最后更新于 1985 天前，其中的信息可能已经有所发展或是发生改变。

首先写在前面，我是看了VSCode插件制作：HTML代码自动填充这篇文章后，才基本了解这类vscode插件的编写和配置方法的，所以在文章开头特地声明一下。

首先在本地测试一下补全的信息

第一步，你需要直到你的自动补全是针对什么语言的，我这里用Lua来举例，大家可以按自己需求变通

新建用户代码片段

按下快捷键Ctrl+Shift+P，敲snip，选择下图所示的选项

选择你想要的语言类型，比如我这里就选Lua

新建好的文件：

添加自己的补全内容

配置文件就是个json文件，基本按下面的格式来写就好

{
    "test": {//标题随意起
        "prefix": "log.info",//头，就是你敲哪些东西会匹配这个
        "body": "log.info()",//匹配后，按tab会自动填充的内容
        "description": "打印日志"//对这个填充的注释
    },
    //后面有其他的可以再加
    "xxxx": {
        "prefix": "xxx",
        "body": "xxxx",
        "description": "xxxx"
    }
}

新建一个文件看看效果

当然，也可以补全多行

{
    "test": {//标题随意起
        "prefix": "log.info",//头，就是你敲哪些东西会匹配这个
        "body": [//多行内容
            "log.info(",
            "",
            ")"
        ],
        "description": "打印日志"//对这个填充的注释
    }
}

tab切换参数

这个功能一般是刚需了，补全后自动跳到待修改的参数处。

实现它，只需要在body里加上{编号:初始内容}，像下面这样

{
    "test": {
        "prefix": "cc.dial",
        "body": "cc.dial(${1:num},${2:delay})",
        "description": "打电话"
    }
}

效果如下：

补全你需要的这些配置

这部分工作我直接用代码完成了，具体可以参考下面的链接

处理代码：https://github.com/chenxuuu/documentGenerator/blob/master/documentGenerator/vscode.lua

生成结果：https://github.com/chenxuuu/luatcode/blob/master/snippets/snippets.json

把补全文件做成插件

装nodejs

去官网装：https://nodejs.org/zh-cn/

当然，我比较懒，直接用的coding在线编辑，还不占用自己电脑空间

然后bash

curl -sL https://deb.nodesource.com/setup_13.x | sudo -E bash -
sudo apt-get install -y nodejs

装Yeoman和VS Code Extension Generator

这里就是参考官网

sudo npm install -g yo generator-code

显示这些就是装好了：

➜  workspace> sudo npm install -g yo generator-code
npm WARN deprecated cross-spawn-async@2.2.5: cross-spawn no longer requires a build toolchain, use it instead
/usr/bin/yo -> /usr/lib/node_modules/yo/lib/cli.js
/usr/bin/yo-complete -> /usr/lib/node_modules/yo/lib/completion/index.js

> core-js@3.3.3 postinstall /usr/lib/node_modules/yo/node_modules/core-js
> node postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> spawn-sync@1.0.15 postinstall /usr/lib/node_modules/yo/node_modules/spawn-sync
> node postinstall


> yo@3.1.0 postinstall /usr/lib/node_modules/yo
> yodoctor


Yeoman Doctor
Running sanity checks on your system

✔ No .bowerrc file in home directory
✔ Global configuration file is valid
✔ NODE_PATH matches the npm root
✔ No .yo-rc.json file in home directory
✔ Node.js version
✔ npm version
✔ yo version

Everything looks all right!
+ yo@3.1.0
+ generator-code@1.2.7
added 941 packages from 328 contributors in 71.717s
➜  workspace>

新建项目模板

然后用下面代码新建工程：

yo code

选New Code Snippets，代码补全的这个工程

然后依次按需求填写即可：

➜  workspace> yo code

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 

? What type of extension do you want to create? New Code Snippets
Folder location that contains Text Mate (.tmSnippet) and Sublime snippets (.sublime-snippet) or press ENTER to start with a new snippet file.
? Folder name for import or none for new: 
? What's the name of your extension? luacode
? What's the identifier of your extension? luacode
? What's the description of your extension? lua code plugin
Enter the language for which the snippets should appear. The id is an identifier and is single, lower-case name such as 'php', 'javascript'
? Language id: lua
   create luacode/.vscode/launch.json
   create luacode/package.json
   create luacode/vsc-extension-quickstart.md
   create luacode/README.md
   create luacode/CHANGELOG.md
   create luacode/snippets/snippets.json
   create luacode/.vscodeignore

Your extension luacode has been created!

To start editing with Visual Studio Code, use the following commands:

     cd luacode
     code .

Open vsc-extension-quickstart.md inside the new extension for further instructions
on how to modify, test and publish your extension.

For more information, also visit http://code.visualstudio.com and follow us @code.


➜  workspace>

把代码补全数据放插件里

默认的补全信息文件可以在package.json里的contributes.snippets其中一个数组的path里看到，比如我这里默认的就是./snippets/snippets.json。

把之前测试用的补全数据扔进去就好了

完善插件信息

主要就是修改package.json文件，基本都是默认生成的那些数据了，注意添加publisher和修改vscode支持版本：

{
    "name": "luacode",
    "displayName": "luacode",
    "description": "lua代码补全插件",
    "version": "0.0.1",
    "publisher": "chenxuuu",
    "engines": {
        "vscode": "^1.8.0"
    },
    "categories": [
        "Snippets"
    ],
    "contributes": {
        "snippets": [
            {
                "language": "lua",
                "path": "./snippets/snippets.json"
            }
        ]
    }
}

更改README.md

就是直接改，只要不是原来默认的那些东西就行了

打包插件

先装上打包工具

sudo npm install -g vsce

打包

➜  luacode> vsce package
 WARNING  A 'repository' field is missing from the 'package.json' manifest file.
Do you want to continue? [y/N] y
 DONE  Packaged: /home/coding/workspace/luacode/luacode-0.0.1.vsix (6 files, 1.93KB)
➜  luacode>

我们生成了luacode-0.0.1.vsix，就是插件文件，如果你不想发布，可以在线下分享这个插件了

发布到插件市场

创建token

登录Visual Studio Team Services（需要微软账户）

点右上角头像—Security—New Token，在Personal Access Tokens里新建一个token

注意要选择所有权限，另外token有效期我直接开了最长一年的（一年后需要重新生成）

创建发布者

vsce create-publisher <你名字>

像下面这样按需求填写

➜  luacode> vsce create-publisher chenxu
Publisher human-friendly name: (chenxu) chenxu
E-mail: lolicon@papapoi.com
Personal Access Token: **************************

发布插件

直接用下面的命令就能发布了

vsce publish

如果你在其他机器上发布，只要带上你的token就行了：

vsce publish -p <token>

结束

我的插件直接发布在vscode了：

开源地址：https://github.com/chenxuuu/luatcode

发送评论编辑评论