给自己公司做个网站,成都seo优化,免费发布的空间,网站建设中 html5 模板TL;DR文章篇幅有点长 #xff0c;可以先收藏再看 。要是想直接看看怎么写一个扩展#xff0c;直接去第二部分 #xff0c;或者直接去github看源码 。第一部分 --- Extension 知识点一、扩展的启动如何保证性能 --- 扩展激活#xff08;Extension Activation#xff09; 我…TL;DR文章篇幅有点长 可以先收藏再看 。要是想直接看看怎么写一个扩展直接去第二部分 或者直接去github看源码 。第一部分 --- Extension 知识点一、扩展的启动 如何保证性能 --- 扩展激活Extension Activation 我们会往VS Code中安装非常多的扩展VS Code是如何保证性能的呢 在VS Code中有一个扩展激活Extension Activation的概念VS Code会尽可能晚的加载扩展懒加载并且不会加载会话期间未使用的扩展因此不会占用内存。为了完成扩展的延迟加载VS Code定义了所谓的激活事件activation events。 VS Code根据特定活动触发激活事件并且扩展可以定义需要针对哪些事件进行激活。例如仅当用户打开Markdown文件时才需要激活用于编辑Markdown的扩展名。 如何保证稳定性 --- 扩展隔离Extension Isolation 很多扩展都写得很棒 但是有的扩展有可能会影响启动性能或VS Code本身的整体稳定性。作为一个编辑器用户可以随时打开键入或保存文件确保响应性UI不受扩展程序在做什么的影响是非常重要的。 为了避免扩展可能带来的这些负面问题VS Code在单独的Node.js进程扩展宿主进程extension host process中加载和运行扩展以提供始终可用的响应迅速的编辑器。行为不当的扩展程序不会影响VS Code尤其不会影响其启动时间 。四、Activation Events --- package.json既然扩展是延迟加载懒加载的我们就需要向VS Code提供有关何时应该激活什么扩展程序的上下文其中比较重要的几个 - onLanguage:${language} - onCommand:${command} - workspaceContains:${toplevelfilename} - *activationEvents.onLanguage根据编程语言确定时候激活。比如我们可以这样activationEvents: [onLanguage:javascript
]当检测到是js的文件时就会激活该扩展。activationEvents.onCommand使用命令激活。比如我们可以这样activationEvents: [onCommand:extension.sayHello
]activationEvents.workspaceContains文件夹打开后且文件夹中至少包含一个符合glob模式的文件时激活。比如我们可以这样activationEvents: [workspaceContains:.editorconfig
]当打开的文件夹含有.editorconfig文件时就会激活该扩展。activationEvents.*每当VS Code启动就会激活。比如我们可以这样activationEvents: [*
]五、Contribution Points --- package.json其中配置的内容会暴露给用户我们扩展大部分的配置都会写在这里 - configuration - commands - menus - keybindings - languages - debuggers - breakpoints - grammars - themes - snippets - jsonValidation - views - problemMatchers - problemPatterns - taskDefinitions - colorscontributes.configuration在configuration中配置的内容会暴露给用户用户可以从“用户设置”和“工作区设置”中修改你暴露的选项。 configuration是JSON格式的键值对VS Code为用户提供了良好的设置支持。 你可以用vscode.workspace.getConfiguration(myExtension)读取配置值。contributes.commands设置命令标题和命令随后这个命令会显示在命令面板中。你也可以加上category前缀在命令面板中会以分类显示。注意当调用命令时通过组合键或者在命令面板中调用VS Code会触发激活事件onCommand:${command}。六、package.json其他比较特殊的字段engines:说明扩展程序将支持哪些版本的VS CodedisplayName:在左侧显示的扩展名icon:扩展的图标categories:扩展所属的分类。可以是Languages, Snippets, Linters, Themes, Debuggers, Formatters, Keymaps, Other第二部分 --- 自己写个扩展玩玩我们经常使用console.log来打印日志进行调试我们就写一个用来美化、简化console.log的扩展玩玩。最终实现的效果special-console-log实现这个扩展需要注意以下几点 1. console.log使用css样式 2. VS Code插入内容 3. VS Code光标和选区 4. VS Code删除内容 5. VS Code读取用户配置下面火速实操(p≧w≦q)。如何开始要开始写VS Code扩展需要两个工具 yeoman有助于启动新项目vscode-generator-code由VS Code团队使用yeoman构建的生成器 可以使用yarn或npm安装这两个工具安装完成之后执行yo code等一会之后它会帮我们生成起始项目并会询问几个问题 确认信息之后会帮我们初始化好整个项目此时的目录结构是这样的 我们只需要关注src/extension.ts和package.json即可其中package.json里面的内容之前已经介绍过。console.log使用css样式这里有一篇比较完整的文章https://www.telerik.com/blogs/how-to-style-console-log-contents-in-chrome-devtools 简单的说这句代码执行之后打印的是下面图片那样console.log(%cThis is a green text, color:green);: 后面的样式会应用在%c后面的内容上vscode扩展读取用户配置上文提到过我们可以在contributes里面定义用户配置contributes: {configuration: {type: object,title: Special-console.log,properties: {special-console.log.projectName: {type: string,default: MyProject,description: Project name},special-console.log.showLine: {type: boolean,default: true,description: Show line number},special-console.log.deleteAll: {type: boolean,default: false,description: delete all logs or delete the log containing [color] and [background]}}}
},
然后使用vscode.workspace.getConfiguration()读取用户配置激活扩展前面提到扩展是延迟加载懒加载的我们只需要向VS Code提供有关何时应该激活什么扩展程序的上下文即可。我们在package.json中定义两个激活的事件activationEvents: [onCommand:extension.insertLog,onCommand:extension.deleteLogs
],
接着在contributes中添加快捷键keybindings: [{command: extension.insertLog,key: shiftctrll,mac: shiftcmdl,when: editorTextFocus},{command: extension.deleteLogs,key: shiftctrld,mac: shiftcmdd}
],
还可以将命令添加到命令面板里面也就是按Ctrl ShiftP弹出来的面板commands: [{command: extension.insertLog,title: Insert Log},{command: extension.deleteLogs,title: Delete console.log}
],
insertLog表示往内容中插入console.logdeleteLogs则表示删除。具体的实现我们放到src/extension.ts的activate中export function activate(context: vscode.ExtensionContext) {const insertLog vscode.commands.registerCommand(extension.insertLog, () {})context.subscriptions.push(insertLog)const deleteLogs vscode.commands.registerCommand(extension.deleteLogs, () {})context.subscriptions.push(deleteLogs)
}
插入console.log插入console.log 大概的过程是获取当前选区的内容获取用户配置根据用户配置和当前选区的内容填充console.log最后插入到选区的下一行。const insertLog vscode.commands.registerCommand(extension.insertLog, () {const editor vscode.window.activeTextEditorif (!editor) { return }const selection editor.selectionconst text editor.document.getText(selection) // 当前选区内容// 用户配置if (userConfig) {projectName userConfig.projectName || projectNameshowLine userConfig.showLine || showLineline showLine?%cline:${lineNumber}:%c}// 设置console.log...// 在下一行插入vscode.commands.executeCommand(editor.action.insertLineAfter).then(() {insertText(logToInsert, !text, noTextStr.length)})})
插入内容const insertText (val: string, cursorMove: boolean, textLen: number) {const editor vscode.window.activeTextEditorif (!editor) {vscode.window.showErrorMessage(Cant insert log because no document is open)return}editor.edit((editBuilder) {editBuilder.replace(range, val) // 插入内容}).then(() {// 修改选区})
}
删除console.log删除的时候只需要遍历找一下console.log在判断一下是不是我们加入的内容是就删除const deleteLogs vscode.commands.registerCommand(extension.deleteLogs, () {const editor vscode.window.activeTextEditorif (!editor) { return }const document editor.documentconst documentText editor.document.getText()let workspaceEdit new vscode.WorkspaceEdit()// 获取logconst logStatements getAllLogs(document, documentText)// 删除deleteFoundLogs(workspaceEdit, document.uri, logStatements)})
删除的时候可以使用workspaceEdit.delete(docUri, log)当然删除之后我们可以右下角搞个弹窗提示一下用户删除了几个console.logvscode.workspace.applyEdit(workspaceEdit).then(() {vscode.window.showInformationMessage(${logs.length} console.log deleted)
})
具体的代码可以看看github 发布这个就注册一下账号然后发布就行
