「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」。
背景
前端事件团队写了一个UI库,类似element的Vue类库,使用了一段时间因为没有代码提示写起来很不方便,所以趁势开发了一个代码提示插件,期间翻了很多文档,走了很多坑,特此总结一下
vscode插件
对于前端的程序员来说vscode 肯定不陌生,vscode 是微软推出的代码编辑器,凭借着 功能强大,提示友好,免费! 免费! 免费! 占用内存低尤其是对js和node支持非常好,市场占比很大.
因为vscode 本身也是基于浏览器实现,开发难度只有一点点,下面让我们开始吧
先上个基础展示
因为不会捣鼓视频,麻烦大家点一下 视频演示
vscode的超能力
插件到底是啥,有什么能力,下面咱们简单介绍一下 基于Electron,可以使用node,node能干啥,那就可以干啥,为所欲为,犹如脱缰的野马,只要你想就能实现 具体如下
- 自定义命令
- 快捷键
- 自定义菜单项
- 自定义跳转
- 自动补全
- 悬浮提示
- 新增语言支持
- 语法检查
- 语法高亮
- 代码格式化
上代码 -- hello-world
首先安装脚手架
npm install -g yo generator-code
yo code
代码结构
├── CHANGELOG.md ├── README.md ├── extension.js //插件入口 ├── jsconfig.json ├── package-lock.json ├── package.json //配置文明 ├── test │ ├── runTest.js │ └── suite │ ├── extension.test.js │ └── index.js └── vsc-extension-quickstart.md
调试
运行以上两步后,vscode 会开启一个新的窗口长这个样子
接下来 cmd+shift+p 调出面板 输入helloWorld ,会弹出
{
"name": "liuzhenxing-demo", //插件名
"displayName": "liuzhenxing-demo", //在插件市场的名字 两个名字最好统一
"description": "测试",
"version": "0.0.1", // 插件版本号
"engines": {
"vscode": "^1.64.0"
},
"categories": [
"Other"
],
"activationEvents": [ // 激活命令组,可以配置多个,类型很多代码提示使用 onLanguage 后续会有例子
"onCommand:liuzhenxing-demo.helloWorld"
],
"main": "./extension.js", //入口文件
"contributes": {
"commands": [ //命令
{
"command": "liuzhenxing-demo.helloWorld",
"title": "Hello World"
}
]
},
"scripts": {
"lint": "eslint .",
"pretest": "npm run lint",
"test": "node ./test/runTest.js"
},
"devDependencies": {
"@types/vscode": "^1.64.0",
"@types/glob": "^7.2.0",
"@types/mocha": "^9.0.0",
"@types/node": "14.x",
"eslint": "^8.6.0",
"glob": "^7.2.0",
"mocha": "^9.1.3",
"typescript": "^4.5.4",
"@vscode/test-electron": "^2.0.3"
}
}
这是最基础的工程文件后续明天咱们继续更新
