閒來無事,將之前寫的一個vscode外掛翻出來寫個教程。此外掛之前沒有上傳到vscode的外掛庫上,這才順帶整理一下發布流程。
外掛功能
很簡單就是,快速的在編輯器裡面插入css程式碼,不需要自己手工去ps量尺寸,或者看圖片的尺寸啥的了。估計有大佬說著有啥用了,對於小小的只寫scss的小菜鳥來說還是挺有必要的,可以節約幾秒的。 這個功能,貌似less是有這個功能,如下:
.test{
width:image-width("file.png");
height: image-height("file.png");
}
複製程式碼
如果你是less愛好者可以不用往下看啦,然而對於我只習慣寫sass來說貌似沒這個函式,或者有我不知道。所以我把幾個輪子合到了一起,做了一個輪子搬運工。附上git地址 外掛地址
快速看看操作流程
- 正常寫樣式流程
- 測量圖片尺寸
- 再敲程式碼
- 外掛流程
- 呼叫命令
- 選擇對應圖片(自動填充程式碼)
我去,貌似流程一樣呀,?,我就是來搞笑的。
主要邏輯
- vscode獲取配置資訊
import {
workspace,
} from 'vscode';
/**
* 獲取配置
*/
export const getConfig = (str: string): any => {
return workspace.getConfiguration('imgstyle').get(str);
};
<!--對呀在vscode setting.json裡面 imgstyle.tpl,imgstyle.path-->
//獲取path
getConfig('path');
複製程式碼
- 根據配置資訊獲取圖片集globby
//上面獲取到的path 是一個過濾條件 預設是陣列["src/**/*.{png,jpg,gif,webp}"] 根據個人喜好設定,具體過濾條件可以看globby的配置項
await globby("src/**/*.{png,jpg,gif,webp}")
//這樣就獲取到src下面所有圖片的path陣列了
複製程式碼
- 呼叫vscode的選擇器,從圖片path陣列裡面選擇一個
import {
window,
} from 'vscode';
// 轉換為pick配置項
const quickPickArray = imgsArray.map((v: string) => {
return {
label: path.parse(v).base, //選擇項標籤
description: path.relative(workspace.rootPath || __dirname, v),//選擇項描述
src: v,
};
});
// 開啟vscode的選擇器
const action = await window.showQuickPick(quickPickArray);
// 選擇完成後action就是一個object物件,主要用到src
複製程式碼
- 獲取所選圖片資訊,jimp一個不錯的圖片處理庫
const jimp = require('jimp');
// 讀取圖片
const imgInfo = await jimp.read(action.src);
// console.log('imgInfo', imgInfo.bitmap.width);
const {
width,
height
} = imgInfo.bitmap;
複製程式碼
- 獲取渲染模板同上面的imgStyle.path的獲取方法一樣
- 模板渲染用的是loadash.template,目前只是暴露了width,height,還有檔案相對當前編輯的路徑src,所以預設模板是
"imgstyle.tpl": "width: ${width}px;height: ${height}px;background-image:url(${src});",
。在這個";"是有用換行替換方便css對齊的,所以目前還是隻在樣式裡支援而已。具體可以看原始碼,這裡不多說具體
import * as _ from 'lodash';
const fn = _.template("width: ${width}px;height: ${height}px;background-image:url(${src});");
<!--轉換成字串-->
fn({
width: 10,
height: 10,
src: 'xxx'
});
複製程式碼
- 當前編輯器游標處插入文字
const {
activeTextEditor //當前編輯頁
} = window;
activeTextEditor.edit((editBuilder) => {
//獲取游標位置
var position = new Position(activeTextEditor.selection.active.line, activeTextEditor.selection.active.character);
//在游標位置插入字串
editBuilder.insert(position, 'width:...');
});
複製程式碼
- 以上完成了一個基本的操作邏輯
vscode 配置相關
- 註冊命令 ,把上面的方法封裝好引入到extension.ts
// 註冊命令
let disposable = vscode.commands.registerCommand('linz.imgInsert', () => {
// The code you place here will be executed every time your command is executed
imgInsert();
// Display a message box to the user
// vscode.window.showInformationMessage('hellow');
});
複製程式碼
- 在package.json中監聽命令配置
"activationEvents": [
"onCommand:linz.imgInsert"
],
"contributes": {
"commands": [
{
"command": "linz.imgInsert",
"title": "image insert"
}
],
},
複製程式碼
- 繫結快捷鍵 package.json 裡面 的contributes中新增欄位keybindings
"keybindings": [{
"command": "linz.imgInsert",
"key": "ctrl+4",
"mac": "cmd+4",
"when": "editorTextFocus" // 編輯文字時可以呼叫命令
}],
複製程式碼
- 增加配置資訊package.json 裡面 的contributes中新增欄位configuration
"configuration": {
"type": "object",
"title": "imgstyle configuration",
"properties": {
"imgstyle.tpl": {
"type": "string",
"default": "test",
"description": "imgstyle path settings"
},
"imgstyle.path": {
"type": "Array",
"default": [
"src/**/*.{png,jpg,gif,webp}"
],
"description": "imgstyle path settings"
}
}
}
複製程式碼
釋出到vscode外掛庫中,官方教程
- 安裝命令
npm install -g vsce
此包用於打包併發布 - 獲取token Personal Access Tokens., 連結是我自己的個人頁面,沒註冊賬號的可以自行去註冊,偷懶複製官方的圖片
- 複製好token,紅色劃掉的部分。
- 開啟命令列註冊token方便不輸入密碼之類的就提交外掛
vsce create-publisher (publisher name)
<!--會要求輸入使用者名稱 郵箱 touken-->
複製程式碼
- 直接釋出程式碼
vsce publish
然後就可以靜靜的發呆等釋出完成了,小夥伴們最好開發外掛的使用用npm install
外掛哦 ,不要用yarn
不然無法編譯釋出哦,這vsce貌似還沒支援yarn;