學生就可以看懂的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小時內與您取得聯系。