闲来无事, 将之前写的一个 vscode 插件翻出来写个教程. 此插件之前没有上传到 vscode 的插件库上, 这才顺带整理一下发布流程.
插件功能
很简单就是, 快速的在编辑器里面插入 CSS 代码, 不需要自己手工去 ps 量尺寸, 或者看图片的尺寸啥的了. 估计有大佬说着有啥用了, 对于小小的只写 scss 的小菜鸟来说还是挺有必要的, 可以节约几秒的. 这个功能, 貌似 less 是有这个功能, 如下:
- .test{width:image-width("file.png");
- height: image-height("file.png");
- }
如果你是 less 爱好者可以不用往下看啦, 然而对于我只习惯写 sass 来说貌似没这个函数, 或者有我不知道. 所以我把几个轮子合到了一起, 做了一个轮子搬运工. 附上 git 地址 https://github.com/hnlinzhi19/css-insert-img 插件地址 https://marketplace.visualstudio.com/items?itemName=linzhi19.img-style
快速看看操作流程
正常写样式流程
测量图片尺寸
再敲代码
插件流程
调用命令
选择对应图片 (自动填充代码)
我去, 貌似流程一样呀,, 我就是来搞笑的.
主要逻辑
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');
根据配置信息获取图片集 https://github.com/sindresorhus/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
获取所选图片信息, https://github.com/oliver-moran/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 https://github.com/lodash/lodash , 目前只是暴露了 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 插件库中, 官方教程 https://code.visualstudio.com/docs/extensions/publish-extension
安装命令
npm install -g vsce
此包用于打包并发布
获取 token Personal Access Tokens. https://linzhi19.visualstudio.com/_details/security/tokens , 链接是我自己的个人页面, 没注册账号的可以自行去注册, 偷懒复制官方的图片
复制好 token, 红色划掉的部分.
打开命令行注册 token 方便不输入密码之类的就提交插件
- vsce create-publisher (publisher name)
- <!-- 会要求输入用户名 邮箱 touken-->
直接发布代码 vsce publish
然后就可以静静的发呆等发布完成了, 小伙伴们最好开发插件的使用用 npm install 插件哦 , 不要用 yarn 不然无法编译发布哦, 这 vsce 貌似还没支持 yarn;
来源: https://juejin.im/post/5afe77246fb9a07ab11169ef