整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
学生就可以看懂的bootstrap基础实战系列，pre标签里是笔记总结，动手实际操作一下会加强理解。有疑问留言交流哦。
bootstrap是进阶html5很基础常用的前端框架，可以做自适应漂亮的界面，再坚持一下，前端知识的大门就会打开了。
本节内容有动态显示效果，建议实际操作一下。
前言由于之前的国际化的项目中总是要统计老项目中待翻译的内容，然后再交由业务进行翻译，如果总是人为统计不仅相当耗费精力和时间，而且还不能保证是否有遗漏，因此想通过编写一个 i18n-helper 插件来实现这个功能。然而，大家的需求总是出奇的相似（因为已经有很多类似的插件存在了
），因此没必要重复造轮子了，但是 如何开发 vscode 插件 的过程可以记录下来，分享给大家！希望本文对你有所帮助！！！跑通官方插件示例好了，话不多说，我们先按着 官方文档 跑一下它的插件用例吧！生成插件目录安装脚手架npm install -g yo generator-code
初始化插件目录终端运行 yo code
，按照提示生成目录即可。由于官方文档缺少一些细节，很容易导致小白调试插件失败，再常见的有如下情况。
进入对应项目目录后，按照官方文档的指示可通过如下两种方式进行调试：
接着按下 Ctrl + Shift + P，并输入 Hello World
命令，发现无法找到对应的命令：
经过上述操作后，重新启动调试，按下 Ctrl + Shift + P，并输入 Hello World
命令，就可以找到对应的命令了，但是执行该命令时报错了：
原因就在于我们没有编译文件，此时注意查看 package.json
文件中的 main
字段会发现：
很明显，我们没有编译源文件生成目标文件，此时我们只需要通过 npm run watch
启用监听模式，让其进行编译即可：
此时在执行命令，就会发现成功了：
目录结构比较简单就不过多介绍了。
当然相关的 svg 插件已经有不少了，这里只是用这个简单的需求来举个例子，方便让大家更容易理解。
首先，我们要注册命令，让用户能够使用我们的插件，这里我们就简单支持如下两种方式：
上述 鼠标右键菜单选择命令 的配置有一点不好，那就是安装此插件后，在任何文件中右键都会显示 Preview SVG 选项，此时 调试效果如下：
因为我们的本意是预览 SVG 文件，而不是其他文件，因此对于不符合的文件就没有必要展示此选项了，此时可以通过 when 子句上下文 来控制显示隐藏命令选项，此时配置更改为：
"contributes": {
"menus": {
"editor/context": [
{
"command": "svg-viewer.previewsvg",
"when": "resourceExtname == '.svg'"
}
]
}
调试效果如下：
上述我们配置好了命令，现在就需要注册命令了，也就是决定当命令激活时需要做些什么事情，即只需要在 extension.ts 文件的 activate 方法中做如下修改即可：
// 执行命令时被激活
export function activate(context: vscode.ExtensionContext) {
// 使用控制台输出诊断信息(console.log)和错误(console.error)
// 这行代码只会在你的扩展被激活时执行一次
console.log('Congratulations, your extension "svg-viewer" is now active!');
// 注册命令，commandId 参数必须与 package.json 中的 command 字段匹配
let disposable = vscode.commands.registerCommand(
"svg-viewer.previewsvg",
() => {
// 具体要做的内容
}
);
context.subscriptions.push(disposable);
}
平时我们通过浏览器使用 <img>
标签可以查看 svg 文件的效果，例如：
那么在 VSCode 中可不可以也以这样的方式来实现呢？
那当然是可以的。
我们可以使用如下代码编辑器中创建一个 Webview ，然后其中的 html 选项内容就可以用我们常见的 html 结构 来填充，并作为最终结果来进行 渲染，例如：
// 创建并显示新的 webview
const panel = vscode.window.createWebviewPanel(
"SVGPreview", // 只供内部使用，即 webview 的标识
"SVG Preview", // 面板标题
vscode.ViewColumn.One, // 给新的 webview 面板一个编辑器视图
{} // Webview 选项
);
// 设置HTML内容
panel.webview.html = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SVG Preview</title>
</head>
<body>
<img src="${目标文件地址}" />
</body>
</html>
`;
由于我们打开相应 svg 文件后右键进行预览，那么第一步就得先获取当前这个文件的路径，这就又得需要使用的 VSCode API 了，如下
const editor = vscode.window.activeTextEditor;
let url = editor.document.fileName; // 获取到的就是对应文件的绝对路径
但是如果你直接把这个路径作为 <img>
标签的 src 属性是没法没正常渲染的，大致如下：
既然如此，那么我们可以把这个 svg 文件读取到，然后把它转成 base64 的格式，再交由 <img>
标签使用即可，此时我们就需要使用到 node 内置的 fs 模块了，即：
const fs = require("fs");
const content = fs.readFileSync(url);
return `data:image/svg+xml;base64,${content.toString("base64")}`;
需要查看源码的可点此获取：源代码
经过上述的处理我们就可以在 VSCode 中预览 svg 文件了，效果如下：
上述方案虽然可以实现我们需要的功能，但是对于 svg 文件来讲还是复杂了，因为在浏览其中是可以直接渲染 <svg>
标签的，而 svg 文件的内容不就是 <svg>
标签吗，那么我们只需要把文件内容读取出来，直接填充到 webview.html 中就好了，根本不需要转成 base64 格式。
这个方案比较简单，这里直接贴出 extension.ts 文件中的代码了：
import * as vscode from "vscode";
// 执行命令时被激活
export function activate(context: vscode.ExtensionContext) {
const fs = require("fs");
// 注册命令，commandId 参数必须与 package.json 中的 command 字段匹配
let disposable = vscode.commands.registerCommand(
"svg-viewer.previewsvg",
() => {
const url = getActiveTextUrl();
const content = fs.readFileSync(url, "utf-8");
opedWebview(content);
}
);
context.subscriptions.push(disposable);
}
// 获取当前文件路径
export function getActiveTextUrl(): string {
let url = "";
const editor = vscode.window.activeTextEditor;
if (editor) {
url = editor.document.fileName;
}
return url;
}
// 创建并显示新的 webview
export function opedWebview(content: string) {
const panel = vscode.window.createWebviewPanel(
"SVGPreview", // 只供内部使用，即 webview 的标识
"SVG Preview", // 面板标题
vscode.ViewColumn.One, // 给新的 webview 面板一个编辑器视图
{} // Webview 选项
);
// 设置HTML内容
panel.webview.html = getWebviewContent(content);
}
// 渲染模版
export function getWebviewContent(content: string) {
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SVG Preview</title>
<style>
html,
body {
width: 100%;
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
svg {
max-height: 90%;
}
</style>
</head>
<body>
${content}
</body>
</html>
`;
}
// 停用命令时执行
export function deactivate() {}
通过 这个地址 注册开发者账号，然后按提示发布到官网应用市场即可。
这种方式可以实现即使 没有发布到应用市场，也可以直接通过对应文件的方式进行插件的安装和使用。
安装命令 npm i vsce -g
直接使用 vsce package
命令进行打包，完成后就会生成一个 .vsix
文件，这个也就是在后续安装插件时要使用的文件。
【注意
】 在使用这个命令打包时，可能会出现 vsce 所需要支持的 VSCode 最低版本和当前使用版本之间存在出入，导致打包失败：特别是如果按照前文的方式直接修改 package.json
文件中的版本号时，此时最好还是将 VSCode 版本进行升级，而不是手动修改版本号。
按照如下方式操作并选择对应的 .vsix 文件即可.
通过本篇文章，希望能让你从一个 VSCode 插件开发 的小白变成大白，能够为团队赋能，或者作为自己的一个技能亮点。
anel面板在我们做一些阐述性说明时会用到，还有物流状态时，并且这个组件自定义部分还很灵活，方便我们添加一些额外的内容。
准备工作：
{
path: '/panel',
name: 'panel',
component: () => import('./views/Panel.vue')
}
<a href="javascript：void(0)" @click="$router.push('/panel')">
<van-col span="6" class="marb20">
<van-icon name="newspaper-o" />
<div>Panel 面板</div>
</van-col>
</a>
至今为止呢，我们的首页显示的样式子是这样滴〜不知道不觉间我们已经学完了35个组件了！哇噢，为自己欢呼一下吧！如果想看更多的内容，欢迎关注我，每天都有更新哈。
代码演示Panel 面板：
基础用法：
<van-panel class="pnael" title="标题内容" desc="描述内容" status="状态" > <div class="con">第一节内容</div> </van-panel>
title：标题
desc：描述内容
status：状态
使用slot自定义内容
slot可以自定义header，footer两个部分
<van-panel class="pnael" title="标题内容" desc="描述内容" status="状态" icon="newspaper-o" > <div class="con">第一节内容</div> <div slot="header"> <van-button>取消</van-button> <van-button type="danger">确定</van-button> </div> </van-panel>
icon：可以在标题前面加一个图标
自定义header部分，即把标题那一栏占用
自定义footer部分，即自定义的部分会放到内容下面
到目前为止呢，Panel 面板就演示完了！庆祝一下我们又学完一个组件啦！
今天就到这里啦。休息休息一会儿吧〜明天继续加油噢！加油
*请认真填写需求信息，我们会在24小时内与您取得联系。
