Плагин для вывода журнала VSCode

внешний интерфейс

Проект в последние два дня не сильно загружен.Я подкинул свой плагин vscode.Если хочешь сделать хорошую работу,то надо сначала заточить свои инструменты.Можно считать небольшой выигрыш.

задний план

Когда несколько человек в компании совместно пишут крупномасштабные проекты ts, либо добавьте отладку точки останова в исходники браузера, либо простоconsole.log()илиconsole.table(), первый подходит для сложной и асинхронной отладки и модификации багов, для простых нужно просто вывести значение в консоль, нет необходимости открывать соответствующий ts файл, построчно находить скомпилированный код и добавлять точки останова (файлы js будут удобнее), Это цель этой небольшой статьи, лог быстрее и понятнее

процесс метания

Первый плагин Amway vscode:javascript console utils, деликатный и компактный плагин, простой в использовании

Инструкции:После выбора любой переменной просто нажмитеshift+command+L, а затем автоматически появляется следующая выбранная строка с журналом фиксированного формата, напримерconsole.log('xxx:',xxx)

Если редактор AutoSave, то результаты можно увидеть в консоли после завершения компиляции горячего обновления, что действительно удобно, это быстрее, чем добавлять фрагменты пользовательского кода в редакторе для использования ярлыков, 😊 Этот плагин также предоставляет горячую клавишуshift+command+D, удалите всю эту страницу одним щелчком мышиconsole.log, также очень часто используется.

улучшить этот плагин

ноНедовольство все же есть, неудовлетворенность в совместном проекте с несколькими людьми, наша консоль часто выглядит так, 😂

Хотя смысл такого лога очень ясен, консоль покрыта большим количеством информации, а мой лог утопает в разной информации на консоли, он не так бросается в глаза и его сложно найти с первого взгляда. Думал добавить немного цвета и т.д. Стиль более бросающийся в глаза, так же как добавление стилей в терминале, красочный просмотр большого графа в ноде и тому подобное однозначно удобнее, чем белые символы на черном фоне. Консоль тоже можно стилизовать, напримерconsole.log('%cconfig: ','color: MidnightBlue; background: Aquamarine; font-size: 20px;',config);**%c** в консоли является заполнителем, пока стиль ставится после запятой, стиль есть. В настоящее время мы хотим изменить этот плагин, нужно всего четыре простых шага.

скачать первый шаг

Загрузите этот ресурс плагинаhttps://github.com/whtouche/vscode-js-console-utilsКлонируйте на локальный, запустите npm install, затем откройте проект

Второй шаг — изменение

Код этого плагина лаконичен и понятен, найдите в его основном коде логику extension.js и измените 62-ю строку extension.js, можете ссылаться на мои изменения (пожалуйста, не стесняйтесь писать в любом прикольном стиле) (Добавить еще одно содержимое) Первый выделенный текст может иметь кавычки (атрибут объекта xxx['xxx']), первая строка совместима

const str = `${text}`.replace(/\'|\"/g,'');
const logToInsert = `console.log('%c${str}: ','color: MidnightBlue; background: Aquamarine; font-size: 20px;',${text});`;
Третий шаг – упаковка

Установить vsce глобальноnpm install vsce -g(инструмент для упаковки)

Измените версию пакета, например 0.8.0 (исходное значение 0.7.0), как показано ниже.

использовать командуvsce packageЗатем он будет упакован в текущий каталог кода для создания vsix.

Шаг 4. Установка

Если он существовал раньше, сначала удалите исходный плагин javascript console utils, а затем установите его из vscode.

Проверьте его, нажмите клавишу быстрого доступа, чтобы увидеть, отображается ли он нормально

Обновление: измените сочетание клавиш здесь ↓

Категории