Инспектор

@sveltejs/vite-plugin-svelte-inspector — это плагин Vite, который добавляет инспектор Svelte в браузере. Он показывает местоположение файла, где определён элемент под курсором, и вы можете кликнуть, чтобы быстро открыть ваш кодовый редактор на этом месте.

Обратите внимание, что @sveltejs/vite-plugin-svelte должен быть установлен как зависимость уровня совместной работы (peer dependency), поскольку инспектор привносит компоненты Svelte для компиляции.

Настройка

Включение в конфигурации Svelte

// svelte.config.js
export default {
  vitePlugin: {
    inspector: true
  }
};

Включение с настраиваемыми опциями в конфигурации Svelte

// svelte.config.js
export default {
  vitePlugin: {
    inspector: {
      toggleKeyCombo: 'alt-x',
      showToggleButton: 'always',
      toggleButtonPos: 'bottom-right'
    }
  }
};

Конфигурирование через переменные окружения

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

Для возможности использования своего собственного набора настроек, инспектор Svelte может быть настроен через переменные окружения, как из командной строки, так и из файлов dotenv.

# просто комбо-ключ, незаключенный в кавычки строкой
SVELTE_INSPECTOR_TOGGLE=alt-x

# объект опций в виде JSON
SVELTE_INSPECTOR_OPTIONS='{"holdMode": false, "toggleButtonPos": "bottom-left"}'
```# Полностью отключить
SVELTE_INSPECTOR_OPTIONS=false

# Заставить использовать значения по умолчанию
SVELTE_INSPECTOR_OPTIONS=true

Опции инспектора, заданные через переменные окружения, имеют приоритет над значениями, заданными в конфигурации Svelte, и автоматически активируют инспектор Svelte во время разработки.

Опции плагина

toggleKeyCombo

• Тип: строка

• Значение по умолчанию: 'alt-x'

  Устанавливает комбо-ключ для переключения инспектора.

  Значение рекомендуется быть любым количеством модификаторов (например, control, shift, alt, meta) за которыми следует до одного обычного ключа, разделённых дефисами. Обратите внимание, что некоторые ключи имеют встроенное поведение (например, alt-s открывает меню истории на Firefox).

  Примеры: control-o, control-alt-s, meta-x, alt-i.

navKeys

• Тип: { родитель: строка; потомок: строка; следующий: строка; предыдущий: строка }

• Значение по умолчанию: { родитель: 'ArrowUp', потомок: 'ArrowDown', следующий: 'ArrowRight', предыдущий: 'ArrowLeft' }

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

  • родитель: выбрать ближайшего родителя
  • потомок: выбрать первого потомка (или внука)
  • следующий: следующий сосед (или родитель если нет следующего соседа)
  • предыдущий: предыдущий сосед (или родитель если нет предыдущего соседа)### openKey

• Тип: строка

• Значение по умолчанию: 'Enter'

  Укажите клавишу для открытия редактора для текущего выбранного узла DOM.

escapeKeys

• Тип: массив строк

• Значение по умолчанию: ['Backspace', 'Escape']

  Укажите клавиши для закрытия инспектора.

holdMode

• Тип: логическое значение

• Значение по умолчанию: true

  Инспектор будет открываться только при нажатии комбинации клавиш toggleKeyCombo и закрываться при её отпускании.

showToggleButton

• Тип: 'всегда' | 'активно' | 'никогда'

• Значение по умолчанию: 'активно'

  Когда показывать кнопку переключения. Кнопка переключения позволяет вам щелкнуть мышью по экрану для включения/выключения инспектора, вместо использования toggleKeyCombo.

  • 'всегда': всегда показывать кнопку переключения
  • 'активно': показывать кнопку переключения, когда инспектор активен
  • 'никогда': никогда не показывать кнопку переключения

toggleButtonPos

• Тип: 'верхнее правое' | 'верхнее левое' | 'нижнее правое' | 'нижнее левое'

• Значение по умолчанию: 'верхнее правое'

  Где отображать кнопку переключения.

customStyles

• Тип: логическое значение

• Значение по умолчанию: true

  Внедрять пользовательские стили при активности инспектора. Это полезно, если вы хотите настроить стили инспектора таким образом, чтобы они соответствовали вашему приложению. При активности инспектора, класс svelte-inspector-enabled добавляется к элементу body, а класс svelte-inspector-active-target добавляется к текущему активному целевому узлу (например, при наведении курсора или использовании клавиатуры).

Редакторы

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