vscode插件開發--快速插入圖片相關css

閒來無事，將以前寫的一個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；