原文：VSCode插件开发全攻略（一）概览

作者：小茗同学

文章索引

VSCode插件开发全攻略（一）概览
VSCode插件开发全攻略（二）HelloWord
VSCode插件开发全攻略（三）package.json详解
VSCode插件开发全攻略（四）命令、菜单、快捷键
VSCode插件开发全攻略（五）跳转到定义、自动补全、悬停提示
VSCode插件开发全攻略（六）开发调试技巧
VSCode插件开发全攻略（七）WebView
VSCode插件开发全攻略（八）代码片段、设置、自定义欢迎页
VSCode插件开发全攻略（九）常用API总结
VSCode插件开发全攻略（十）打包、发布、升级

本系列文章同步首发于多个平台，限于精力有限，后续如有更新和修改，仅更新我的个人博客上的内容，欢迎戳这里查看最新版：http://blog.haoji.me/vscode-plugin-overview.html

写在前面

一年前我写了一篇3万多字的Chrome插件(扩展)开发全攻略，反响还不错，帮助了很多新手快速上手，甚至包括大名鼎鼎的红芯浏览器（戳这里了解更多）。

最近因工作需要又接触到了vscode插件开发，所以趁势再写一篇有关vscode插件开发的文章，记录一些自己踩过的坑以及接触vscode插件开发这2个多月以来的心得体会，让大家少走一些弯路避免重复踩坑。

目前网上有关介绍vscode插件开发的文章也有挺多的，但都不够深入，基本上都是点到为止，篇幅不大，本系列文章争取多讲一些，涵盖面会更广，干货更多。

鉴于之前写过几篇内容较多的文章大家都反馈说阅读麻烦，一篇文章内容太多看起来太累，所以这次就拆分来写。

关于vscode插件

相信大家对vscode应该都不陌生，VSCode是微软出的一款轻量级代码编辑器，免费而且功能强大，以功能强大、提示友好、不错的性能和颜值俘获了大量开发者的青睐，对JavaScript和NodeJS的支持非常好，自带很多功能，例如代码格式化，代码智能提示补全、Emmet插件等。

再强大的IDE那也不可能面面俱到什么功能都塞进去，那样只会导致IDE本身太臃肿。功能嘛，按需索取，所以，vscode的很多强大功能都是基于插件实现的，IDE只提供一个最基本的框子和最基本功能，由插件来丰富和扩展它的功能。

vscode插件可以很轻松的在应用商店搜索并下载到，应用商店官网是：https://marketplace.visualstudio.com/vscode ，vscode推出时间本身并不长，但生态发展得非常好，应用商店已经有各种各样丰富的插件供大家使用了。

因为vscode本身都是用浏览器实现的，所以其插件不用说肯定也是基于HTML+JS等前端技术实现，从形式上看就是一个类似于npm包的vsix文件，只不过按照一些特殊规范来实现一些特殊功能，所以vscode插件开发难度不大，甚至可以说熟悉了相关API之后很容易。

有必要学习vscode插件开发吗

有！而且非常有必要！每个人都会多多少少有一些自己的特殊定制需求，当你不知道开发一个IDE插件其实也很容易、或者你没有意识到通过开发插件可以帮你提升多大效率时，你并不会下意识的将一些问题的解决方式往IDE插件开发上去想。至少我曾经就是这样的，提升开发效率大部分时候想到的都是写一些脚本工具、写一些浏览器插件、写一些客户端工具等，接触到IDE插件开发之后发现原来有些问题可以通过更高效的方式来解决，毕竟IDE才是我们程序员每天接触最多的东西。

但至于可以开发什么样的插件、实现什么样的功能、以什么样的形式呈现，这就要靠你从工作和生活中去发现、去找灵感并提炼了。

demo下载

本系列文章所有demo均在这个仓库里：https://github.com/sxei/vscode-plugin-demo ，可以直接下载运行。当然还有更简单的，这个demo已经发布到应用市场了，大家可以直接点击这里下载安装，或则您也可以直接在vscode里面搜索plugin-Demo就能搜到：

vscode插件能做什么

既然前面讲到学习vscode插件开发很有必要，那插件到底能做什么呢？能实现什么功能？能从哪些方面动手脚？下面我们就来列举一些好让大家有个大概了解。

6.1. 不受限的本地磁盘访问

因为vscode是基于Electron开发的，可以使用nodejs随意读写本地文件、跨域请求、甚至创建一个本地server，这都是没有任何限制的，所以只要你想做，基本上没有不能实现的。

6.2. 自定义命令、快捷键、菜单

vscode插件很多功能都是基于一个个命令实现的，我们可以自定义一些命令，这个命令将出现在按下Ctrl+Shift+P后的命令列表里面，同时可以给命令配置快捷键、配置资源管理器菜单、编辑器菜单、标题菜单、下拉菜单、右上角图标等。

6.3. 自定义跳转、自动补全、悬浮提示

自定义跳转：

自动补全：

提示：

6.4. 自定义设置、自定义欢迎页

6.5. 自定义WebView

6.6. 自定义左侧功能面板

6.7. 自定义颜色、图标主题

6.8. 新增语言支持

给某一种原有没有的语言提供语言支持，语言支持包括很多方面，比如代码高亮、语法解析、折叠、跳转、补全等；

6.9. Markdown增强

你可以自定义markdown预览的样式、添加一些新语法、新功能的支持。

6.10. 其它

其它还有比如状态栏修改、通知提示、编辑器控制、git源代码控制、任务定义、Language Server、Debug Adapter等等。

收尾

本文作为开篇，不做太多详细介绍，只是为了让大家对vscode插件有一个大致了解，后面再分篇慢慢细讲。

参考资料

微软VSCode插件开发官方文档：https://code.visualstudio.com/docs/extensions/overview

待完善

VSCode插件开发全攻略（十一）自定义侧边栏、视图

VSCode插件开发全攻略（十二）颜色、图标主题

VSCode插件开发全攻略（十三）SCM

VSCode插件开发全攻略（十四）Language Server

VSCode插件开发全攻略（十五）Debug Adapter

VSCode插件开发全攻略（十六）新语言支持

VSCode插件开发全攻略相关推荐

VSCode插件开发全攻略（六）开发调试技巧
更多文章请戳VSCode插件开发全攻略系列目录导航. 前言在介绍完一些比较简单的内容点之后,我觉得有必要先和大家介绍一些开发中遇到的一些细节问题以及技巧,特别是后面一章节将要介绍WebView的知识 ...
chrome 插件开发各种功能demo_Chrome 插件开发全攻略
Chrome 浏览器相信大家都用得比较多,有很多的优点,比如简洁.强大的开发者工具等,但是更让大家映像深刻的是有各种各样有趣.有用的插件,今天要给大家推荐的开源项目是 Chrome 插件开发全攻略,你 ...
【干货】Chrome插件(扩展)开发全攻略-转载
[干货]Chrome插件(扩展)开发全攻略写在前面我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的,所以转载务必保留出处.本文所有涉及到的大部分代码均在这 ...
阿里Redis最全面试全攻略，读完这个就可以和阿里面试官好好聊聊
什么是Redis及其重要性? Redis是一个使用ANSI C编写的开源.支持网络.基于内存.可选持久化的高性能键值对数据库. Redis的之父是来自意大利的西西里岛的Salvatore Sanfil ...
vim配置全攻略(2)——vim的简单配置
这篇文章主要讲的是vim的简单配置,相对于vim内置的一些快捷键和功能,vim的客制化才是vim的灵魂,也是vim存活31年仍被热衷的原因. 如果你还不了解vim的基本操作和体系,我建议你看一下我上一 ...
新手入门Chrome插件(扩展)开发全攻略
[干货]Chrome插件(扩展)开发全攻略写在前面我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的,所以转载务必保留出处.本文所有涉及到的大部分代码均在这 ...
【转】Chrome插件(扩展)开发全攻略
[干货]Chrome插件(扩展)开发全攻略写在前面我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的,所以转载务必保留出处.本文所有涉及到的大部分代码均在这 ...
【干货】Chrome插件(扩展)开发全攻略（转载）
转载来源:https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html [干货]Chrome插件(扩展)开发全攻略写在前面我花了将近 ...
【干货】Chrome插件(扩展)开发全攻略(不点进来看看你肯定后悔)转
[干货]Chrome插件(扩展)开发全攻略(不点进来看看你肯定后悔) 写在前面我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的,所以转载务必保留出处.本文所 ...

VSCode插件开发全攻略