Разработка плагина vscode — быстрая вставка изображений, связанных с css

внешний интерфейс Командная строка Yarn CSS

Если мне нечего делать, я сделаю написанный ранее плагин vscode и напишу туториал. Этот плагин еще не был загружен в библиотеку плагинов vscode, поэтому я, кстати, разберусь с процессом публикации.

Функция плагина

Все очень просто, можно быстро вставить код css в редакторе, не нужно вручную мерить размер пс, или смотреть на размер картинки или что-то в этом роде. Подсчитано, что некоторые большие ребята говорят, что это полезно.Это совершенно необходимо для маленького новичка, который пишет только scss, и это может сэкономить несколько секунд. Эта функция, кажется, меньше имеет эту функцию, а именно:

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

Если вы менее энтузиаст, то можете не смотреть вниз, но так как я привык писать только на 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 и выберите один из массива пути к изображению.
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, в настоящее время показывает только ширину, высоту и исходный путь файла относительно текущего редактирования, поэтому шаблон по умолчанию"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.
"keybindings": [{
    "command": "linz.imgInsert",
    "key": "ctrl+4",
    "mac": "cmd+4",
    "when": "editorTextFocus" // 编辑文本时可以调用命令
}],
  • Добавьте конфигурацию поля к вкладам в package.json информации о конфигурации.
"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Этот пакет используется для упаковки и публикации
  • получить токенPersonal Access Tokens., Ссылка моя личная страница.Если у вас нет аккаунта,то можете зарегистрироваться сами.Лени копируйте официальные картинки.

  • Скопируйте жетон, красную перечеркнутую часть.
  • Откройте командную строку, чтобы зарегистрировать токен, чтобы облегчить отправку плагинов без ввода пароля и т.п.
vsce create-publisher (publisher name)
<!--会要求输入用户名 邮箱 touken-->
  • Почтовый индекс напрямуюvsce publish

Дальше можно спокойно сидеть и ждать завершения релиза.Друзья лучше всего развивать использование плагинов.npm installПлагин, не используйте егоyarnВ противном случае он не может быть скомпилирован и выпущен.Похоже, что vsce еще не поддерживает пряжу;

Категории