首先写在前面，我是看了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 [email protected]: 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
> [email protected] 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 -)
> [email protected] postinstall /usr/lib/node_modules/yo/node_modules/spawn-sync
> node postinstall
> [email protected] 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!
+ [email protected]
+ [email protected]
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: [email protected]
Personal Access Token: **************************
发布插件
直接用下面的命令就能发布了
vsce publish
如果你在其他机器上发布，只要带上你的token就行了：
vsce publish -p <token>
结束
我的插件直接发布在vscode了：
开源地址：https://github.com/chenxuuu/luatcode
转载保留版权：晨旭的博客 » 《制作VSCODE代码自动补全插件》如果喜欢可以： 点击右侧上方的邮件订阅，订阅本站
