写点什么

DIY VSCode 插件,让你的开发效率突飞猛进

2021 年 1 月 29 日

DIY VSCode 插件,让你的开发效率突飞猛进

前言


Visual Studio Code(简称 VSCode)凭借其占用内存小、文件加载快、稳定性好、插件丰富等等特点,从众多 IDE 中脱颖而出,受到了广大开发人员的青睐。工欲善其事,必先利其器。选择适合自己的 VSCode 插件,能够让你的开发效率突飞猛进。VSCode 插件市场 上面插件百花齐放,但实际开发过程中问题复杂且多变,有时候并不能找到完全满足你实际开发需求的插件,那就自己动手 DIY 一个吧。VSCode 提供以下扩展能力:代码自动补全、自定义命令/菜单/快捷键、悬浮提示、自定义跳转、主题定制、自定义 WebView 等等。你可以根据自己的需要随意组合使用。


快速上手


接下来,将以一个简单的代码片段自动补全插件为例,让大家 10 分钟快速上手。代码片段自动补全也是大家编写代码时使用频率最高、最能帮助提高编码速度的功能。Demo 源码(https://github.com/Angela-Chen/vscode-test-extension



开发环境准备


  • Visual Studio Code

  • Nodejs,建议使用 LTS 版本

  • Npm

  • 官方推荐使用的脚手架工具 Yeoman 和 Generator-code

    npm install -g yo generator-code

  • 插件打包和发布工具 vsce

    npm install -g vsce


脚手架使用


  1. 执行以下命令:


yo code
复制代码


  1. 选择 New Extension 类型,然后依次填写插件名称、描述、包管理工具等基础信息。



PS:脚手架工具支持创建插件(New Extension)、主题(New Color Theme)、新语言支持(New Language Support)、代码片段(New Code Snippets)、键盘映射(New Keymap)、插件包(New Extension Pack)。以上不同类型的脚手架模板只是侧重的预设功能不同,其本质还是 VSCode 插件。


Snippets 代码片段自动补全


  1. 添加 Snippets 配置项


// package.json..."contributes": {	"snippets": [     	{            "language": "javascript",            "path": "./snippets/javascript.json"	  	},		{            "language": "typescript",            "path": "./snippets/javascript.json"		},        ...		]	},...
复制代码


在 package.json 的 contributes 下添加自定义的 Snippets。language 表示在某种特定语言下,对应的代码片段才会被加载生效。path 表示代码片段文件的存放路径。上面配置即表示 javascript 或 typescript 语言环境下,将加载 ./snippets/javascript.json 文件中的代码片段。


  1. 编写 Snippets 代码片段


// ./snippets/javascript.json{  "forEach": {    "prefix": "fe",    "body": [      "${1:array}.forEach(function(item) {",      "\t${2:// body}",      "});"    ],    "description": "Code snippet for 'forEach'"  },  "setTimeout": {    "prefix": "st",    "body": [      "setTimeout(function() {",      "\t${0:// body}",      "}, ${1:1000});"    ],    "description": "Code snippet for 'setTimeout'"  }  ...}
复制代码


上述例子中:


  • forEachsetTimeout 是代码片段的名称。

  • prefix 中定义一个或多个(设置数组时可以指定多个)触发词(trigger words),当用户输入内容是触发词时编辑器会弹出自动补全提示。

  • body 中定义的就是填充的代码段内容。body 中可以使用占位符(placeholders),如上面的 ${1:array}、 {2:// body},使用占位符方便在引用代码段的时候可以通过 tab 键快速切换跳转到对应位置编辑。冒号前面的序号表示切换的顺序,冒号后面的内容则是占位显示的默认文本。

  • description 顾名思义就是代码段的描述说明,编辑器弹出补全提示的时候会展示该描述,如果没有设置 description 字段,那么会直接展示代码段名称。


至此,插件的编码工作已经完成,是不是很简单~ 接下去,我们运行插件看下效果。


运行调试


选择 VSCode 的调试菜单(command+shift+D),点击运行按钮,弹出一个名为扩展开发主机的窗口,这个窗口就是包含这个插件的临时调试窗口。




打包和发布

打包

打包命令:vsce package,打包完成后会生成 .vsix 后缀的安装包。如果插件仅为个人或者团队内部共享,那么手动安装即可使用,无需发布到 VSCode 插件市场。

发布

发布命令:vsce publish。发布需要发布者账号,前往 Azure DevOps 注册,注册后需申请 Personal Access Tokens ,详细申请细节见 说明文档。


插件详解

目录结构


.├── .vscode	├── launch.json  # 插件加载和调试的配置├── CHANGELOG.md  # 变更记录├── extension.js  # 插件执行入口文件├── jsconfig.json  # JavaScript 类型检查配置├── node_modules├── package-lock.json├── package.json  # 声明当前插件相关信息├── README.md  # 插件使用说明└── vsc-extension-quickstart.md
复制代码

核心文件


1. package.json:插件的声明文件,包含 2 个重要配置项 activationEvents、contributes。


  • activationEvents 用于定义插件何时被加载/激活。例子中用到的是 onCommand,在 Hello World 命令被调用时,插件才会被激活。目前支持 9 种激活事件:

  • onLanguage:${language} 打开特定语言文件时

  • onCommand:${command} 调用某个 VSCode 命令时

  • onDebug Debug 时

  • workspaceContains:${toplevelfilename} 当打开包含某个命名规则的文件夹时

  • onFileSystem:${scheme} 以某个协议(ftp/sftp/ssh 等)打开文件或文件夹时

  • onView:${viewId} 指定 id 的视图展开时

  • onUri 插件的系统级 URI 打开时

  • onWebviewPanel webview 触发时

  • * VSCode 启动时。不建议使用,性能上会受到一定影响。


PS:出于性能考虑,插件都是懒加载的,只有特定场景下才会加载/激活,才会消耗内存等资源。


  • contributes 用于定义扩展项的具体配置。常用扩展项有代码片段(snippets)、命令(commands)、菜单(menus)、快捷键(keybindings)、主题(themes)。通常完成命令的开发后,会将其与菜单/快捷键进行关联,以便调用。


// package.json{  // 插件名称  "name": "vscode-test-extension",  // 显示名称  "displayName": "vscode-test-extension",  // 描述信息  "description": "An awesome vscode extension",  // 版本号 semver格式  "version": "0.0.1",  // 在插件市场展示的图标  "icon": "icon.png",  // 发布者名字  "publisher": "chenmenglan",  // 插件最低支持的vscode版本号  "engines": {    "vscode": "^1.12.0"  },  // 所属分类,可选 Languages/Snippets/Linters/Themes/Other 等等  "categories": ["Snippets", "Other"],  // 加载/激活方式  "activationEvents": ["onCommand:extension.helloWorld"],  // 入口文件路径  "main": "./extension.js",  // 注册扩展项配置  "contributes": {		"commands": [			{				"command": "extension.helloWorld",				"title": "Hello World"			}		],      	"snippets": [     		{                "language": "javascript",                "path": "./snippets/javascript.json"	  		},        ...		]	}}
复制代码


2. extension.js:插件的执行入口文件,通常包括激活(activate)和禁用(deactivate)2 个方法。命令必须先使用 vscode.commands.registerCommand 进行注册,然后将返回的实例添加至 context.subscriptions 中。当命令被激活时,会执行相应的回调方法。



const vscode = require('vscode');
/** * @param {vscode.ExtensionContext} context */function activate(context) {
console.log('Congratulations, your extension "vscode-test-extension" is now active!');
let disposable = vscode.commands.registerCommand('extension.helloWorld', function () { // 右下角消息提示 vscode.window.showInformationMessage('Hello World!'); });
context.subscriptions.push(disposable);}exports.activate = activate;
function deactivate() {}
exports.deactivate = deactivate;
复制代码

结语


如果你重复处理同一类问题超过 3 次,那么是时候该停下来思考下如何来化繁为简了。不妨花上些时间,梳理下使用频率最高或者最佳实践的代码片段,DIY 一个自己的插件,将重心放到更核心更复杂代码逻辑上。丰富的 扩展 API 让一切都比想象中来的简单,Just do what you want~


插件推荐


Auto Close Tag,自动补全关闭标签。

Auto Rename Tag,自动重命名标签。

Bracket Pair Colorizer,括号配对着色,方便查看多层嵌套的代码。

Beautify,快速格式化代码。

ESLint,语法规则和代码风格的检查工具。

Path Autocomplete,文件路径自动补全。

Document This,快速生成注释。

Todo Highlighter,高亮标记 TODO 注释,以便更容易追踪任何未完成的业务。

GitLens,增强了 VSCode 中内置的 Git 功能,包括查看代码作者、查看历史提交记录等等。


还有其他好用的插件,欢迎补充~~



头图:Unsplash

作者:沫沫

原文:https://mp.weixin.qq.com/s/XhU2BLncy1yKGPi-yPxfqw

原文:DIY VSCode 插件,让你的开发效率突飞猛进

来源:政采云前端团队 - 微信公众号 [ID:Zoo-Team]

转载:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

2021 年 1 月 29 日 22:311814

评论

发布
暂无评论
发现更多内容

一周信创舆情观察(5.18~5.24)

统小信uos

基础软件 操作系统

JUC整理笔记三之测试工具jcstress

JFound

Java

KubeFATE 部署多集群联邦学习平台 FATE

亨利笔记

学习 Kubernetes FATE KUBEFATE

平台化服务的基石:用户认证模型设计

孤岛旭日

企业架构 模型 用户权限

Windows10 如何正确修改本地用户的名称及目录

喵喵

windows Windows 10 电脑故障 Windows技巧

一个前端的 Windows10 开发环境

Gadzan

前端开发 windows Windows Terminal 环境安装 开发工具

ansible-playbook中when结合tags使用,实现变量控制执行

唯爱

redis数据结构介绍四-第四部分 压缩表

Nick

redis 源码 数据结构 源码分析 算法

redis数据结构介绍五-第五部分 对象

Nick

redis 源码 数据结构 源码分析 算法

ARTS-weekly-31

落英坠露

ARTS 打卡计划

介绍一下自研开源NLP工具库---MYNLP

陈吉米

自然语言处理 中文分词 mynlp nlp

[JVM] String#intern 面试必会

猴哥一一 cium

Java JVM string pool string Java 25 周年

【译】并不存在的普通用户(面向极端用户的设计)

Yukun

设计思维 可用性

Kubernetes in action 笔记

FeiLong

Kubernetes 容器

redis数据结构介绍六 快表

Nick

redis 源码 数据结构 源码分析 算法

使用 Python 分析 Google Calender 日程

Roc

Python 总结 日历

学慢点儿,想深点儿

熊斌

学习

微信推文无缝滚动是这样炼成的

喵喵

微信 前端开发 微信公众号 微信推文 图文混排

2020全球首创币期权DAPP智能合约强势来袭,闪耀数字经济

极客编

写给产品经理的信(4):你一定要做产品经理么?

夜来妖

生涯规划 产品 程序人生 产品经理 职业规划

OBS推流学习笔记

Tango

直播 OBS 推流 B站直播

技术工作的一二三之价值观方法论

拖地先生

个人成长 方法论

Java 异步编程:从 Future 到 Loom

理帆

Java 并发编程 kotlin Netty

Git数据传输模型及常用命令整理

王坤祥

git git flow

使用 Python 和 SudachiPy 进行日语分词

Roc

Python 日语 分词

教师节H5案例制作思路分享

喵喵

前端开发 H5游戏

在 Go 中使用并发编程 - 第二部分

TuringTuring

golang 并发编程 协程 线程模型

技术工作的一二三之内功

拖地先生

个人成长

企业也有中年危机?探讨数字化与永续经营

fino星君

数字化转型 小程序生态

阅读对写作的好处

七镜花园-董一凡

写作

RocketMQ - 如何实现顺序消息

Java收录阁

RocketMQ

DIY VSCode 插件,让你的开发效率突飞猛进-InfoQ