Ответы пользователя по тегу Visual Studio Code
  • Как при развертывании компоненты из emmet делать самозакрывающийся тег а не?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    В JSX это поддерживается. Так и пишите - Footer/ + tab
    638ccabf9236e471863387.png

    Для простого HTML Emmet такое не поддерживает, насколько мне известно. Разворачивает просто в <Footer>. Возможно, этот конфиг решает вопрос и для HTML.
    Есть команда split/join tag меняет тэг с парного на одиночный. Можно назначить хоткей на это дело. И тогда после разворачивания в парный тэг - хоткеем преобразовывать в одиночный.
    Ответ написан
    5 комментариев
  • Как обвернуть одинаковые куски кода в отдельные одинаковые теги в vscode?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    1) Выделяем искомый, повторяющийся участок кода, который нужно обернуть.
    2) Делаем Ctrl+h (открывается поле поиска и замены, где в поле поиска выделенный участок)
    3) Фокус установлен в поле "заменить", которое пустое. (Если не установлен, то установить)
    4) Нажимаем Alt+enter - получаем простановку мультикурсора на все совпадающие участки
    5) f1 -> wrap with abbreviation
    6) и дальше вводите emmet-like строку, например, .my-div - обернёт все вхождения в <div class="my-div">
    7) enter
    Готово. Вы заменили все вхождения в текущем файле.

    UPD: Версия по короче, на основе ответа от WbICHA:
    1) Выделяем искомый, повторяющийся участок кода, который нужно обернуть.
    2) ctrl + shift + L - проставляет мультикурсор в совпадающие участки кода (или f1 -> select all occurrences)
    3) f1 -> wrap with abbreviation
    4) и дальше вводите emmet-like строку, например, .my-div - обернёт все вхождения в <div class="my-div">
    7) enter
    Готово. Вы заменили все вхождения в текущем файле.
    Ответ написан
  • Как быстро добавить такой комментарий?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Не совсем понятно что значит "добавить хот кеем такой комментарий". Не нужен же Вам каждый раз одинакковый окмментарий.
    А так начинаете вводить /** и вс код автоматом справа от курсора поставит ещё одну звёздочку.
    Теперь при нажатии на Enter будут ставиться звёздочки в каждой новой строке.

    Ещё можете посмотреть на плагин Document this или Doxygen Documentation Generator
    Ответ написан
    Комментировать
  • Как перейти к компонету по клику?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Есть доп. Называется клавиша Ctrl(Cmd на mac os) + клик левой кнопкой мыши.
    Но для этого нужно чтоб VS Code справился с резолвом путей как относительных, так и через алиасы. А вот это уже задача по сложнее, которой, возможно, у Вас не будет. (Для решения которого можно погуглить, ну а если не выйдет создать более подходящий по теме вопрос)

    Навёл с зажатым ctrl - при клике открывает файл компонента.
    61fb933dd0887650283681.png

    А вот такой импорт
    import CheckoutAccessories from '~/components/pages/checkout/CheckoutAccessories'
    мне вс код уже не хочет открывать, так как я не заморачивался.

    Но компонент всегда легко открыть через Ctrl+P -> ctrl+v название компонента. -> enter
    Ответ написан
    Комментировать
  • Как убрать подсветку тегов?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    editor.occurrencesHighlight: false в settings.json
    или occurrences highlight в обычных настройках - галочка
    Ответ написан
    Комментировать
  • Есть ли плагин или горячие клавиши, чтобы отдельно выделить весь текст находящийся в кавычках?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Итак, что я хотел предложить.
    Допустим есть файл с указанным текстом.
    Проанализировав текст мы видим шаблон что весь текст, который нужно перевести начинается с "\" и заканчивается на \"".
    соответственно, нам нужно выделить все такие кусочки в тексте.

    Для этого нам помогут стандартные возможности редактора и регулярные выражения и всего 5 секунд времени, после того как приноровитесь:
    1. Нажимаем CTRL+F - поиск по тексту.
    2. Переключаем поиск в режим регулярных выражений, нажав ALT+R (или на третий значок, который со звёздочкой, после поля ввода)
    3. Вводим соответствующее регулярное выражение: \\"(.*)\\"
    4. Нажимаем ALT+Enter чтобы все найденные участки выделились в режиме мультивыделения.
    61e12a815af35718352436.png
    5. Нажимаем горячую клавишу плагина гугл транслейта для перевода ALT+SHIFT+T
    6. Так как в некоторых местах мог добавиться лишний пробел в начале между: \" -> \ ", то нам осталось это починить.
    7. Нажмём CTRL+H
    8. Выключим режим поиска по регулярным выражениям (см пункт 2)
    9. В первом поле введём текущее состояние того, что хотим заменить - \ "
    10. В нижнем - на что хотим заменить - \"
    11. Нажмём CTRL+ALT+Enter (или правую нижнюю иконку - заменить всё).
    61e12a883d58e027572293.png
    12. Готово. Текст переведён, лишний пробел исправлен. Никаких плагинов - 5 секунд времени.
    Ответ написан
    Комментировать
  • Как убрать открытие файла в сайдбаре со всеми подпапками при закрытии файла?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    видимо, при закрытии файла у Вас открывается другой файл из этой же папки, а в настройках по умолчанию файл показывается в сайдбаре при открытии.
    Соответственно, идём в настройки и там ставим false
    615af351eb386058442022.png
    Ответ написан
    Комментировать
  • Как настроить emmet в vscode, чтобы работало создание быстрой структуры?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Эммет иногда подглючивает.
    Нужно убедиться что в настройках vscode в Emmet стоит галочка "разворачивать аббревиатуры по Tab"
    601bab5395f28582871689.jpeg

    Можно попробовать развернуть с помощью:
    F1 и в открывшемся окне ввести: Emmet: расшифровать аббревиатуру
    601b8ae75b318767418920.jpeg

    Или с помощью:
    ctrl+пробел, и там должно всплыть окошко автокомплита, один из вариантов которого должен быть эммет с функцией развернуть аббревиатуру
    601ba7bb261a2643677721.jpeg
    Ответ написан
    1 комментарий
  • Как сделать подсведку этих символов?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Вот тут я давал ссылки на разделы документации, которые должны помочь в решении Вашего вопроса и научить перекрашивать что угодно в VSC
    Создание своей темы в VS Code?
    Ответ написан
    5 комментариев
  • Создание своей темы в VS Code?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Ознакомьтесь со следующими разделами доеументации:
    Про темы
    как узнать название скоупа, в котором находится то, что нужно раскрасить.

    Пример, как раскрасить конкретно слово this в js. В settings.json добавим следующий код:
    "editor.tokenColorCustomizations": {
    
    ​ ​ ​ "textMateRules": [
    
    ​ ​ ​ ​ ​ {
    
    ​ ​ ​ ​ ​ ​ ​ "scope": "variable.language.this.js",
    
    ​ ​ ​ ​ ​ ​ ​ "settings": {
    
    ​ ​ ​ ​ ​ ​ ​ ​ ​ "foreground": "#FF0000",
    
    ​ ​ ​ ​ ​ ​ ​ ​ ​ "fontStyle": "bold underline"
    
    ​ ​ ​ ​ ​ ​ ​ }
    
    ​ ​ ​ ​ ​ }
    
    ​ ​ ​ ]
    
    ​ }

    И получим красный жирный подчеркнутый this.
    Ответ написан
    Комментировать