Расширение CSS Peek перестаёт переходить к определению класса по Ctrl+клик чаще всего из-за того, что файл открыт в неподдерживаемом языковом режиме или настройка editor.gotoLocation переопределена другим расширением. Прежде чем переустанавливать дополнение, проверьте, в каком режиме VS Code распознал ваш документ — это указано в правом нижнем углу статус-бара.
Проблема проявляется по-разному: у одних пользователей пропадает подсветка ссылки на класс, у других всплывающее окно Peek показывает «No definition found», а у третьих переход срабатывает только в части файлов проекта. Ниже разберём диагностику по шагам — от простых проверок к более глубоким.
Проверка языкового режима файла
CSS Peek работает только с теми типами файлов, которые перечислены в его настройках. По умолчанию расширение отслеживает HTML-документы, а CSS-файлы ищет в рабочей области. Если вы открыли шаблон с расширением .vue, .svelte или .php, переход может не сработать, потому что языковой режим файла не входит в список поддерживаемых.
Посмотрите на индикатор языка в правом нижнем углу окна. Если там стоит, например, Plain Text вместо HTML, кликните по индикатору и выберите нужный режим вручную. После смены режима функциональность расширения обычно восстанавливается без перезапуска редактора.
Для нестандартных типов файлов можно расширить список отслеживаемых языков через параметр cssPeek.supportLanguages в настройках. Откройте settings.json и добавьте нужные идентификаторы языков:
"cssPeek.supportLanguages": ["html", "php", "vue"]Конфликты с другими расширениями
Вторая по частоте причина — перехват функциональности другими дополнениями. Расширения вроде IntelliSense for CSS class names in HTML, HTML CSS Support или встроенные возможности фреймворков могут регистрировать собственные провайдеры определений, и VS Code начинает использовать их вместо CSS Peek.
Чтобы проверить этот сценарий, откройте панель расширений и временно отключите все дополнения, связанные с CSS и автодополнением классов. Затем перезагрузите окно через палитру команд: Ctrl+Shift+P → Developer: Reload Window. Если переход заработал, включайте расширения по одному, чтобы найти виновника.
- 🔍 Отключите все CSS-расширения, кроме CSS Peek, и перезагрузите окно
- 🧩 Включайте дополнения по одному и проверяйте переход после каждого
- 📦 Проверьте, не установлены ли две версии похожих расширений одновременно
- ⚙️ Посмотрите логи через
Developer: Show Logs→Extension Host
⚠️ Внимание: не удаляйте расширения сразу — сначала используйте кнопку Disable. Это обратимое действие, и настройки дополнения сохранятся, если оно окажется ни при чём.
Настройки самого расширения
CSS Peek имеет несколько параметров, которые напрямую влияют на его работу. Если вы или другое расширение меняли settings.json, стоит проверить значения по умолчанию. Откройте настройки через Ctrl+, и введите в поиске «css peek».
Обратите внимание на параметр cssPeek.peekFromLanguages — он определяет, из каких файлов разрешён переход, и cssPeek.peekToExclude, задающий исключаемые пути. Если в исключениях указана папка, где лежат ваши стили (например, **/node_modules добавлен куда-то некорректно), определения оттуда находиться не будут.
Ещё один нюанс: поиск CSS-файлов ведётся в пределах открытой рабочей области. Если вы открыли одиночный файл, а не папку проекта через File → Open Folder, расширению попросту негде искать таблицы стилей.
☑️ Базовая диагностика CSS Peek
Проблемы после обновления VS Code
Иногда расширение ломается после крупного обновления самого редактора: меняется API, и старая версия дополнения перестаёт работать корректно. Проверьте в панели расширений, не предлагает ли VS Code обновить CSS Peek. Если обновления нет, а проблема появилась именно после апдейта редактора, посмотрите страницу расширения в Marketplace — там обычно видны открытые issue с похожими жалобами.
Как временную меру можно откатить версию расширения: на странице дополнения нажмите шестерёнку рядом с кнопкой установки и выберите Install Another Version. Это безопасная операция, настройки при этом не сбрасываются.
⚠️ Внимание: откат на старую версию редактора ради одного расширения — крайняя мера. Сначала попробуйте альтернативные дополнения или встроенные возможности VS Code.
Альтернативы и встроенные возможности
Если починить расширение не удаётся, часть его функций покрывается штатными средствами редактора и другими дополнениями. Сравним варианты:
| Инструмент | Переход к определению | Peek-окно | Автодополнение классов |
|---|---|---|---|
| CSS Peek | Да | Да | Нет |
| HTML CSS Support | Частично | Нет | Да |
| Встроенный Go to Definition | Ограниченно | Через Alt+F12 | Нет |
| IntelliSense for CSS class names | Нет | Нет | Да |
Встроенная команда Go to Definition (F12) в VS Code для чистого HTML+CSS работает ограниченно, но сочетание Alt+F12 (Peek Definition) иногда показывает определение даже без сторонних расширений. Для автодополнения имён классов удобно поставить HTML CSS Support — в связке с ним отсутствие CSS Peek ощущается меньше.
Почему переход не работает в CSS Modules и препроцессорах
CSS Peek ищет совпадения по имени класса в текстовом виде. Если вы используете CSS Modules, где классы на этапе сборки превращаются в хеши, или SCSS с глубокой вложенностью, простой текстовый поиск может не находить определение. Для таких проектов лучше подходят специализированные расширения под соответствующий стек.
Переустановка и сброс
Когда ничто из перечисленного не помогает, остаётся чистая переустановка. Удалите расширение, перезагрузите окно, затем установите его заново из Marketplace. Перед этим имеет смысл проверить, нет ли в пользовательском settings.json устаревших ключей cssPeek.* с некорректными значениями — они переживают переустановку и продолжат ломать работу.
Дополнительно проверьте, не отключено ли расширение именно для текущей рабочей области: VS Code позволяет выключать дополнения как глобально, так и на уровне папки проекта. В панели расширений у CSS Peek не должно быть пометки Disabled (Workspace).
- 🗑 Удалите расширение и перезагрузите окно редактора
- 📝 Проверьте settings.json на остаточные ключи cssPeek
- 📁 Убедитесь, что дополнение не отключено на уровне workspace
- 🔄 Установите расширение заново и проверьте переход на свежем HTML-файле
Часто задаваемые вопросы
Почему CSS Peek показывает «No definition found», хотя класс есть в CSS-файле?
Чаще всего CSS-файл находится вне открытой рабочей области или попадает под исключения в настройках. Проверьте, что проект открыт как папка, а путь к стилям не указан в cssPeek.peekToExclude или в общем files.exclude.
Работает ли CSS Peek с SCSS и Less?
Расширение ищет текстовые совпадения имени класса, поэтому простые SCSS/Less-файлы обычно обрабатываются. Однако сложная вложенность и составные селекторы могут не распознаваться — поведение зависит от структуры вашего кода.
Переход работает, но нет всплывающего окна Peek — это нормально?
Да, это отдельные функции. Проверьте, какой жест вы используете: переход вызывается через Ctrl+клик или F12, а peek-окно — через Alt+F12 или соответствующий пункт контекстного меню.
Можно ли использовать CSS Peek вместе с HTML CSS Support?
Можно, они решают разные задачи: первый отвечает за переходы к определениям, второй — за автодополнение. Но при конфликтах отключайте их по очереди, чтобы определить источник проблемы.
Что делать, если ничего не помогло?
Откройте страницу расширения в Marketplace и изучите раздел Issues репозитория — возможно, проблема уже известна и для неё есть обходной путь. Как временную замену используйте встроенный поиск по файлам (Ctrl+Shift+F) по имени класса.