网站优化的推广网站建设建设多少钱

网站优化的推广,网站建设建设多少钱,高端网站建设网站建设设计思路,cms 网站后台内容管理系统模板前言 VSCode 几乎是前端开发人员的标配#xff0c;而现在编辑器往往只提供代码编辑、文件和项目管理、终端集成、源代码管理、调试支持等核心功能#xff0c;而一些扩展功能则交给插件来实现。 会编写 VSCode 插件可以极大提升我们的开发效率#xff0c;本文将介绍如何编写…前言VSCode几乎是前端开发人员的标配而现在编辑器往往只提供代码编辑、文件和项目管理、终端集成、源代码管理、调试支持等核心功能而一些扩展功能则交给插件来实现。会编写VSCode插件可以极大提升我们的开发效率本文将介绍如何编写一个简单的VSCode插件。1、 安装工具初始化项目首先肯定要安装node再通过其自带npm包管理工具安装yo和generator-code。yo全称叫Yeoman是一个现代 Web 应用的脚手架工具命令行工具用于快速生成项目。generator-codeVS Code扩展生成器。npminstall-g yo5 generator-code注意使用yo最新的6.0.0版本运行yo命令会报错因此这里指定安装5版本。安装完成后运行yo code命令初始化项目。yo code这里按提示即可我这里选择的是pnpm Typescript。其主要项目结构如下my-vscode-extension/ ├── .vscode/# VS Code 调试配置│ ├── launch.json │ └── tasks.json ├── src/ │ ├── test/# 测试文件│ └── extension.ts# 插件主入口文件├── .gitignore# git 忽略文件├── .npmrc# npm 配置文件├── .vscode-test.mjs# 单测配置文件├── .vscodeignore# 插件发布忽略文件├── package.json# 项目依赖管理文件├── tsconfig.json# TypeScript 配置文件├── eslint.config.mjs# Eslint 配置文件└── README.md介绍一下package.json中提供的几个重要命令{scripts:{vscode:prepublish:pnpm run compile,compile:tsc -p ./,watch:tsc -watch -p ./,pretest:pnpm run compile pnpm run lint,lint:eslint src,test:vscode-test},}npm run compile编译 TypeScript 代码。npm run watch监听 TypeScript 文件变化并实时编译。npm run test运行单元测试。另外是package.json中提供的插件命令。{contributes:{commands:[{command:my-vscode-extension.helloWorld,title:Hello World}]},}在默认提供的demo中插件命令名字叫hello world。2、调试插件在调试插件前需要先运行下npm run compile编译 TypeScript 代码经编译后会生成out/文件然后便可以开始调试了。为什么要先编译呢因为在package.json中定义了插件运行的入口文件也就是main字段默认值为./out/extension.js所以如果不先编译生成out/文件是会运行报错的。{main:./out/extension.js,}有两种启动调试的方式按快捷键F5。点击编辑器左下方的Run Extension插件名。启动后会自动打开一个新的 VS Code 窗口并启动调试模式我们可以在该窗口中调试插件。先按Ctrl/Command Shift P输入hello word会发现找不到命令。这里是因为我们本地安装的 vscode 版本不符合插件要求我们在package.json找到如下配置{engines:{vscode:^1.107.0},}然后我们再查看下本机的 vscode 版本Code - About VisualStdio Code。发现我们本地版本为1.105.1不满足^1.107.0于是我们把engines.vscode修改为^1.105.0。{engines:{vscode:^1.105.0},}再通过F5或者左下角Run Extension启动调试按Ctrl/Command Shift P输入hello world就能看到命令了。这个hello world就对应我们上面说的package.json文件中的contributes.commands.title字段。成功运行后会在编辑器右下角看到如下提示这个提示就是对应src/extension.ts的如下代码然后我们就可以开始编写插件的具体功能了。3、编写插件核心逻辑我们来实现一个简单的功能平时我们写代码时经常会写console.log如果每次都写这个太麻烦了我们希望能实现下面的功能通过快捷键可以快速生成console.log语句。光标选中变量并按下快捷键时能把变量名也显示出来。3.1 修改 package.json定义插件名字、描述和快捷键定义名字name描述description快捷键keybindings通过ctrl/commandaltl可以运行插件。{name:log-util,displayName:log-util,description:generate log statement,contributes:{commands:[{command:log-util.logUtil,title:log util}],keybindings:[{command:log-util.logUtil,key:ctrlaltl,mac:cmdaltl,when:editorTextFocus}]},}3.2 核心功能代码修改src/extension.ts文件实现插件功能。先实现第一步快速生成console.log语句。import*asvscodefromvscode;exportfunctionactivate(context:vscode.ExtensionContext){constdisposablevscode.commands.registerCommand(log-util.logUtil,async(){consteditorvscode.window.activeTextEditor;if(!editor){vscode.window.showWarningMessage(没有打开的编辑器);return;}// 获取配置constgetConfig()vscode.workspace.getConfiguration(consoleLogGenerator);constconfiggetConfig();constlogTypeconfig.getstring(logType,log);constprefixconfig.getstring(logPrefix, ~ );constpositioneditor.selection.active;constdocumenteditor.document;constselectioneditor.selection;consttextdocument.getText(selection);conststatementconsole.${logType}(${prefix}:, );;editor.edit((editBuilder){constinsertPositionnewvscode.Position(position.line,position.character1);editBuilder.insert(insertPosition,statement);}).then((success){if(success){// 设置光标位置constnewPositionnewvscode.Position(position.line,statement.lengthposition.character-2);editor.selectionnewvscode.Selection(newPosition,newPosition);}});});context.subscriptions.push(disposable);}exportfunctiondeactivate(){}然后实现第二步增加对光标选中变量的处理。// 获取变量名 let variableName text.trim(); - const statement console.${logType}(${prefix}:, );; const statement console.${logType}(${prefix}${variableName ? → ${variableName} : }:, ${variableName});; editor.edit(editBuilder { - const insertPosition new vscode.Position(position.line, position.character 1); const insertPosition new vscode.Position(position.line (variableName ? 1 : 0), variableName ? 0 : position.character 1); if (variableName) { editBuilder.insert(insertPosition, \n); } editBuilder.insert(insertPosition, statement); }).then(success { if (success) { // 设置光标位置 - const newPosition new vscode.Position(position.line, statement.length position.character - 2); const newPosition new vscode.Position(position.line (variableName ? 1 : 0), variableName ? statement.length : statement.length position.character - 2); editor.selection new vscode.Selection(newPosition, newPosition); } });测试插件功能constpathrequire(path)console.log( ~ → path:,path);// 光标选中上一行的 path 变量按 ctrl/commandaltl 生成console.log( ~ :,);// 在当前行按 ctrl/commandaltl 生成效果如下4、发布插件进入这个网站点击Sign in先注册一个开发者账号。点击Public extensions按照提示一步步发布即可。小结本文主要介绍了如何编写一个简单的 VSCode 插件从开发到发布全流程安装yo和generator-code。运行yo code命令生成插件项目这里可以选择插件的开发语言定义插件的名称、描述等。修改package.json文件可以修改插件的名称、描述、入口文件定义插件的快捷键。并要注意设置engines.vscode字段指定插件支持的 VSCode 版本。在src/extension.ts文件中编写插件逻辑。运行npm run compile编译插件或者运行npm run watch监听文件变化并编译。按快捷键F5或者点击编辑器左下方的Run Extension进行插件调试。在调试的新窗口中使用Ctrl/Command Shift P输入配置的命令或者按配置的快捷键测试插件功能是否正常。运行npm run test测试插件功能。本文未涉及到单元测试发布插件。希望本文对你有所帮助如果你有任何问题欢迎在评论区留言。