Обязательный инструмент позиционирования кода VSCode для проектов фронтенд-разработки — code-inspector-plugin
Обязательный инструмент позиционирования кода VSCode для проектов фронтенд-разработки — code-inspector-plugin

Оглавление

Предисловие

Привет всем, я Мяу-Мяу-Мэн. В современном процессе фронтенд-разработки мы обычно выбираем популярные на рынке фронтенд-фреймворки (такие как Vue, React и т. д.) для быстрой реализации различных функций. В отличие от традиционной разработки на основе JavaScript и jQuery, мы пишем код шаблона платформы вместо собственного кода HTML, CSS и JavaScript. Это приведет к тому, что код, который страница наконец увидит в элементе проверки консоли, будет отличаться от фактически написанного кода. отличается. Возьмем в качестве примера проекты Vue. Инструменты создания шаблонов обычно используются для компиляции и упаковки в HTML, CSS и JavaScript. Для завершения разработки вам нужно всего лишь написать синтаксический код Vue.

В этот момент возникает вопрос, а что, если я захочу найти на странице определенный DOM-элемент, соответствующий определенной строке файла Vue?

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

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

Знакомство с плагином

code-inspector-pluginЭто инструмент для разработки и отправки страниц, разработанный крупным парнем из команды внешнего интерфейса Kuaishou.。Конкретные функции этого плагина:,Когда вы нажмите на страницу DOM элемент, который может открываться автоматически IDE и установите курсор на DOM расположение исходного кода.

Согласно официальному представлению, он имеет следующие характеристики:

  • Эффективность разработки: Нажмите на страницу DOM элемент, который может открываться автоматически IDE и установите курсор на DOM Расположение исходного кода значительно улучшает опыт и эффективность разработки;
  • Простой и удобный в использовании: Вторжение в исходный код не требуется. Его нужно только ввести в пакетный инструмент, чтобы он вступил в силу. Весь процесс доступа так же прост, как питьевая вода;
  • Сильная адаптивность: поддерживатьсуществоватьwebpack/vite/rspack/nextjs/nuxt/umijsиспользуется в,поддерживать vue/react/preact/solid/qwik/svelte/astro и другие рамки.

Можно сказать, что этот плагин очень мощный и поддерживает различные основные платформы и инструменты разработки, представленные на рынке.

Конкретное использование

Проект Vue2.6 + Vue Cli + Webpack5

Здесь я приведу пример проекта, который сейчас разрабатывается.,Стек технологий используетVue2.6 + Vue Cli + Webpack5

Лично я использую pnpm. Здесь я использую pnpm для установки плагина:

Язык кода:bash
копировать
pnpm add code-inspector-plugin -D

Затем откройтеvue.config.jsдокумент,Внедрение плагинови операции настройки плагина。НижеconfigureWebpackКак написать:

Язык кода:javascript
копировать
// Другие исходные конфигурации здесь опущены...
const { codeInspectorPlugin } = require('code-inspector-plugin');  // Внедрение плагинов
module.exports = defineConfig({
  // Другие исходные конфигурации здесь опущены...
  configureWebpack: {
    // Другие исходные конфигурации здесь опущены...
    plugins: [
      // Другие исходные конфигурации здесь опущены...
      codeInspectorPlugin({
        bundler: 'webpack', // Настроить плагин
      })
    ]
  }
});

Конфигурация плагина Webpack,Есть еще одинchainWebpackВот как это написано:

Язык кода:javascript
копировать
const { codeInspectorPlugin } = require('code-inspector-plugin');

module.exports = {
  // Другие исходные конфигурации здесь опущены...
  chainWebpack: (config) => {
    config.plugin('code-inspector-plugin').use(
      codeInspectorPlugin({
        bundler: 'webpack',
      })
    );
  },
};

Это все настроено!

После запуска проекта вы увидите в консоли следующее приглашение:

Включите функцию инспектора, удерживая нажатой клавишу Shift + ⌥option (нажмите на элементы страницы, чтобы перейти к исходному коду редактора)

Поскольку я использую систему MacOS,Советshift + ⌥option。если тыWindowsпользователь,Соответствующий должен бытьshift + altключ。

Удерживая нажатой клавишу быстрого доступа, переместите мышь на соответствующий элемент DOM, который вы хотите найти. Вы обнаружите, что стиль мыши изменится, не отпуская ее, и щелкните левой кнопкой мыши, чтобы найти строку кода. соответствующий файл VSCode!

Подвести итог

Я случайно обнаружил этот инструмент поиска кода, просматривая техническое сообщество. Попользовавшись им некоторое время, я нашел его очень полезным, поэтому хотел бы поделиться им с вами! Я надеюсь, что вы сможете становиться все более и более эффективными в процессе фронтенд-разработки. Заканчивайте работу пораньше и уходите с работы пораньше!

boy illustration
Учебное пособие по Jetpack Compose для начинающих, базовые элементы управления и макет
boy illustration
Код js веб-страницы, фон частицы, код спецэффектов
boy illustration
【новый! Суперподробное】Полное руководство по свойствам компонентов Figma.
boy illustration
🎉Обязательно к прочтению новичкам: полное руководство по написанию мини-программ WeChat с использованием программного обеспечения Cursor.
boy illustration
[Забавный проект Docker] VoceChat — еще одно приложение для мгновенного чата (IM)! Может быть встроен в любую веб-страницу!
boy illustration
Как реализовать переход по странице в HTML (html переходит на указанную страницу)
boy illustration
Как решить проблему зависания и низкой скорости при установке зависимостей с помощью npm. Существуют ли доступные источники npm, которые могут решить эту проблему?
boy illustration
Серия From Zero to Fun: Uni-App WeChat Payment Practice WeChat авторизует вход в систему и украшает страницу заказа, создает интерфейс заказа и инициирует запрос заказа
boy illustration
Серия uni-app: uni.navigateЧтобы передать скачок значения
boy illustration
Апплет WeChat настраивает верхнюю панель навигации и адаптируется к различным моделям.
boy illustration
JS-время конвертации
boy illustration
Обеспечьте бесперебойную работу ChromeDriver 125: советы по решению проблемы chromedriver.exe не найдены
boy illustration
Поле комментария, щелчок мышью, специальные эффекты, js-код
boy illustration
Объект массива перемещения объекта JS
boy illustration
Как открыть разрешение на позиционирование апплета WeChat_Как использовать WeChat для определения местонахождения друзей
boy illustration
Я даю вам два набора из 18 простых в использовании фонов холста Power BI, так что вам больше не придется возиться с цветами!
boy illustration
Получить текущее время в js_Как динамически отображать дату и время в js
boy illustration
Вам необходимо изучить сочетания клавиш vsCode для форматирования и организации кода, чтобы вам больше не приходилось настраивать формат вручную.
boy illustration
У ChatGPT большое обновление. Всего за 45 минут пресс-конференция показывает, что OpenAI сделал еще один шаг вперед.
boy illustration
Copilot облачной разработки — упрощение разработки
boy illustration
Микросборка xChatGPT с низким кодом, создание апплета чат-бота с искусственным интеллектом за пять шагов
boy illustration
CUDA Out of Memory: идеальное решение проблемы нехватки памяти CUDA
boy illustration
Анализ кластеризации отдельных ячеек, который должен освоить каждый&MarkerгенетическийВизуализация
boy illustration
vLLM: мощный инструмент для ускорения вывода ИИ
boy illustration
CodeGeeX: мощный инструмент генерации кода искусственного интеллекта, который можно использовать бесплатно в дополнение к второму пилоту.
boy illustration
Машинное обучение Реальный бой LightGBM + настройка параметров случайного поиска: точность 96,67%
boy illustration
Бесшовная интеграция, мгновенный интеллект [1]: платформа больших моделей Dify-LLM, интеграция без кодирования и встраивание в сторонние системы, более 42 тысяч звезд, чтобы стать свидетелями эксклюзивных интеллектуальных решений.
boy illustration
LM Studio для создания локальных больших моделей
boy illustration
Как определить количество слоев и нейронов скрытых слоев нейронной сети?
boy illustration
[Отслеживание целей] Подробное объяснение ByteTrack и детали кода