vscode插件开发–快速插入图片相关css

闲来无事,将之前写的一个vscode插件翻出来写个教程。此插件之前没有上传到vscode的插件库上,这才顺带整理一下发布流程。

插件功能

很简单就是,快速的在编辑器里面插入css代码,不需要自己手工去ps量尺寸,或者看图片的尺寸啥的了。估计有大佬说着有啥用了,对于小小的只写scss的小菜鸟来说还是挺有必要的,可以节约几秒的。 这个功能,貌似less是有这个功能,如下:

.test{
    width:image-width("file.png");
    height: image-height("file.png");
}

如果你是less爱好者可以不用往下看啦,然而对于我只习惯写sass来说貌似没这个函数,或者有我不知道。所以我把几个轮子合到了一起,做了一个轮子搬运工。附上 git地址 插件地址

快速看看操作流程

  • 正常写样式流程
    • 测量图片尺寸
    • 再敲代码
  • 插件流程
    • 调用命令
    • 选择对应图片(自动填充代码)
      我去,貌似流程一样呀,:stuck_out_tongue_closed_eyes:,我就是来搞笑的。

主要逻辑

  • vscode获取配置信息
import {
  workspace,
} from 'vscode';
/**
 * 获取配置
 */
export const getConfig = (str: string): any => {
  return workspace.getConfiguration('imgstyle').get(str);
};

//获取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)
  • 直接发布代码 vsce publish

然后就可以静静的发呆等发布完成了,小伙伴们最好开发插件的使用用 npm install 插件哦 ,不要用 yarn 不然无法编译发布哦,这vsce貌似还没支持yarn;

稀土掘金责编内容来自:稀土掘金 (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » vscode插件开发–快速插入图片相关css

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录