一、什么是vscode插件？想必大家都对vscode不陌生。是微软推出的一款轻量级代码编辑器，时不时会用到。安装一些插件来辅助我们开发。这些插件使用vscode开放的API来开发扩展功能，以解决开发中的一些问题，提高生产效率。一方面，这种插件化的想法让代码编辑器变得更轻便；另一方面可以充分利用社区的力量，为其提供更加多样化的插件。（下图是我做的一个小插件效果图）2、vscode插件可以做什么？vscode插件可以做什么？核心点在于vscode为其提供了哪些开放能力。我们只能使用它的开放能力，就官网而言，vscode插件可以用来做以下事情（这部分来自vscode官网扩展能力概述）：generalfunctions中可以使用的核心功能anyextension主要包括以下几点：(1)可以添加命令、配置项、快捷键、菜单项、右键菜单；(2)存储工作空间或全局数据；(3)显示通知信息；(4)使用快速选择收集用户输入；(5)打开文件选择器让用户选择文件或文件夹；(6)使用ProgressAPI解释长时间运行的操作；theming控制vscode的外观，包括源代码在编辑器中的颜色和vscodeui的颜色，主要包括三类主题：(1)ColorTheme：它允许颜色应用于编辑器中的文本VSCodeUI组件和编辑器；(2)FileIconTheme：文件图标在VSCodeUI中显示的地方，如FileExplorer、QuickOpenList和editortabs；(3)产品图标主题：整个UI使用的一组图标声明性语言特性声明性语言特性为编程语言添加了基本的文本编辑支持，例如括号匹配、自动缩进和语法高亮。编程语言特性编程语言特性增加了丰富的编程语言支持，例如悬停、转到定义、诊断错误、IntelliSense和CodeLens。扩展工作台工作台是指整个VisualStudioCodeUI，包括标题栏、活动栏、侧边栏、控制面板、编辑组、状态栏等UI组件。VSCode提供各种API，允许将您自己的组件添加到工作台。调试您可以通过编写将VSCode的调试UI连接到特定调试器或运行时的调试器扩展来利用VSCode的调试功能。3、VScode插件实战vscode插件其实就是对外提供了vscode的一些能力。如果不是特别需要，没有必要将整体内容完全学习。你只需要了解它的大致发展思路和可以解决的问题。之所以这样是因为（以上）纯属个人看法，不一定正确）学习这部分内容需要一定的精力，但学习后不一定能用在自己的项目中，并且深度学习的投入和产出是不成正比的，所以这次我只讲入门级的内容，具体的内容需要读者在需要这部分能力的时候去深入学习。3.1项目初始化为了方便开发者开发vscode插件，官方提供了相应的脚手架来生成相应的项目。//安装需要的包npminstall-gyogenerator-code//运行yocode上面的命令实际上安装了两个包（yo和generator-code）。这两个包的用途如下：全局安装yo模块后，安装Yeoman，Yeoman是一个通用的项目脚手架工具，可以根据一组模板生成相应的项目结构。generator-code模块是一个VSCode扩展生成器，可以和yo一起使用来构建项目。3.2重要文件工程生成后目录结构如下。最重要的文件是package.json和extension.js。了解了这两个文件之后，基本上就可以开始开发一个vscode插件了。3.2.1package.json这个文件是vscode扩展的列表文件。里面有很多字段。官方对每个字段都做了详细的解释。这次我们将重点关注以下初始化后列表文件。{"name":"demo",//插件名称"displayName":"Plug-in",//在应用市场显示的名称"description":"我的第一个插件测试",//具体description"version":"0.0.1",//插件版本号"engines":{"vscode":"^1.60.0"//最低支持的vscode版本},"categories":["Other"//Extendedcategory],//激活事件组，在那些事件下激活.js",//贡献点"contributes":{//command"commands":[{"command":"demo.helloWorld","title":"HelloWorld"}]},"scripts":{"lint":"eslint.","pretest":"npmrunlint","test":"node./test/runTest.js"},//开发依赖"devDependencies":{"@types/vscode":"^1.60.0","@types/glob":"^7.1.3","@types/mocha":"^8.2.2","@types/node":"14.x","eslint":"^7.27.0","glob":"^7.1.7","mocha":"^8.4.0","typescript":"^4.3.2","vscode-test":"^1.5.2"}}在这个manifest文件中，主要关注三个部分：activationEvents、main和contributions，这三个部分是整个文件中最重要的，main表示插件的主入口-其中，只有找到主入口才能让整个项目正常运行，activationEvents表示在什么情况下会激活插件，因为插件只有激活后才能正常使用，官网已经标明了时机激活的时间，所以我们可以根据需要设置相应的时间。（每次使用时可以详细查看）onLanguage在打开和解析特定语言文件时激活，例如“onLanguage:python”onCommand在调用命令时激活onDebug在启动调试会话之前激活onFileSystem每当读取来自特定方案的文件或文件夹时onView每当在VS代码侧边栏中扩展具有指定ID的视图时插件会在onStartupFinishedcontributes被激活，用于通过扩展注册contributions来扩展VisualStudioCode的各种技能，有多种配置，如下：编辑器调试器语法iconThemesjsonValidationkeybindingsshortcutkeybindingslanguagesmenusproblemMatchersproblemPatternsproductIconThemesresourceLabelFormatterssnippetslanguage-specificsnippetssubmenusverviewstaskDefinitionscolorsthemesviewsContainersviews欢迎walkthroughs3.2.2extension.js文件这个文件是它的入口文件，也就是package.json中main字段对应的文件（不一定叫extension.js），这个文件会导出两个方法：activate和deactivate,两个方法的执行时序如下：activate是插件激活时执行的函数deactivate是插件销毁时调用的方法，比如释放内存等进行简单的实战并创建您自己的vscode插件。本插件功能如下：在文件编辑区或文件名中右键弹出按钮，点击按钮可获取文件大小、创建时间和修改时间；如果得到Ifitisafolder，说明该文件是文件夹，不是文件，并给出提示。3.3.1package.json修改项{//...//激活getFileState命令下的"activationEvents":["onCommand:getFileState"],//入口文件"main":"./extension.js","contributes":{//命令"commands":[{"command":"getFileState","title":"FileState"}],//菜单项"menus":{//编辑上下文菜单"editor/context":[{"when":"editorFocus","command":"getFileState","group":"navigation"}],//资源管理器上下文菜单"explorer/context":[{"command":"getFileState","group":"navigation"}]}},//...}3.3.2主要功能内容constvscode=require('vscode');constfs=require('fs');functionactivate(context){console.log('插件已激活');//注册命令letcommandOfGetFileState=vscode.commands.registerCommand('getFileState',uri=>{//文件路径constfilePath=uri.path.substring(1);fs.stat(filePath,(err,stats)=>{if(err){vscode.window.showErrorMessage(`获取文件${err}!!!`)}if(stats.isDirectory()){vscode.window.showWarningMessage(`检测到的文件夹不是文件，请重新选择！！！`);}if(stats.isFile()){constsize=stats.size;constcreateTime=stats.birthtime.toLocaleString();constmodifyTime=stats.mtime.toLocaleString();vscode.window.showInformationMessage(`文件大小为:${size}字节；文件创建时间：${createTime}；文件修改时间：${modifyTime}`,{modal:true});}});conststats=fs.statSync(filePath);console.log('stats',stats);console.log('isFile',stats.isFile());});//将命令放入其上下文对象中，使其生效context.subscriptions.push(commandOfGetFileState);}functiondeactivate(){}module.exports={activate,deactivate}3.3.3渲染开发完成后，插件调试效果如下：三种方式：直接发文件夹给他人，让别人找到vscode插件存放目录并放入，然后重启vscode，也就是gen真的不推荐；打包成vsix插件，然后发给别人安装，如果你的插件涉及到保密问题，方便发布到应用市场。你可以试试这个方法；注册开发者账号，发布到官网应用市场。这个release和npm是一样的，每一个不需要review的方法都是可行的，网上也有很多关于它的release方法的教程，今天重点说说第二种。毕竟插件这么多，很多人更愿意开发自己的专用插件或者针对特定领域的插件，没有必要发布到应用市场。安装对应的模块vscenpmivsce-g并使用vsce打包，生成对应的vsix文件vscepackage安装到vscode中，安装完成后即可正常使用。简单概述了vscode插件的开发过程，不再深入探讨。当工作中有这样的场景需要这样的能力来解决某些问题时，它可以快速响应这样的解决方案，进一步研究也是可以的。为时不晚，也希望爱学习的朋友也能对这部分有一定的了解，弥补知识的不足，为以后自己所用。五、参考资料VScode插件编写实战vscode插件开发攻略本文转载请联系前端点线面公众号。
