Максим Самусевич

Действительно неудобно, что при перемещении с помощью ctrl + ← и ctrl + → курсор проскакивает и не останавливается между угловыми скобками. По идее, он там останавливаться должен, т.к. в Preferences → Editor: Word Separators угловые скобки в списке символов есть.

Какой у вас сценарий использования, в котором возникает необходимость расположить курсор между тегами?

• Если такая необходимость возникает в процессе написания тега, то в VS Code есть встроенный плагин Emmet, который позволяет написать div, затем нажать tab, и код разворачивается в <div></div>, причём курс встаёт как раз между тегов.

• Если вам нужно поставить курсор между уже написанных ранее тегов, даже если между ними уже есть контент, включая другие вложенные теги, то можно сделать так: поставить курсор на любом символе открывающего или закрывающего тега, нажать Ctrl + Shift + P (вызов Command Palette), ввести emmet inward и выбрать появившуюся команду Emmet: Balance (inward) нажатием Enter или кликом по ней — тогда выделится всё содержимое тега, и далее вы можете нажать Backspace, чтобы стереть содержимое и написать новое, или можно нажать стрелку влево, и курсор встанет перед началом вложенного в тег контента.
Для удобства, чтобы каждый раз не делать это через Command Palette, можно повесить эту команду на хоткей: ещё раз вызвать Command Palette, в ней вы увидите недавно вызванную команду Emmet: Balance (inward), нажать на шестерёнку справа, в открывшемся окне будет строка с этой командой. Нужно кликнуть дважды в любом месте этой строки и ввести удобный вам хоткей, который не будет занят (например, Ctrl + '), или, если вам хочется эту команду повесить на уже занятый хоткей, можете ввести любой и переопределить хоткеи для других команд, которые занимают этот же желаемый хоткей.
Теперь будет удобно поставив курсор на любом символе открывающего или закрывающего тега, нажать хоткей, и курсор прыгнет внутрь тега

• Есть ещё вариант, чтобы перемещать курсор так, чтобы он вставал только между пустыми тегами (этот способ изначально описан в этом посте на Stackoverflow):
- установить плагин Select by
- на странице плагина нажать шестерёнку → Settings → в пункте Selectby: Regexes нажать Edit in settings.json
- внутрь

"selectby.regexes": {
       
    }

между фигурных скобок добавить

"goToEmpty": {
            "moveby": "<([^\\s]+).*?>(?=<\\/\\s?\\1)|\"(?=\")"
        }

- закрыть эти настройки
- зайти в File → Preferences → Keyboard Shortcuts и в правом верхнем углу открывшейся страницы нажать на иконку с файлом и стрелочкой, она подписана как Open Keyboard Shortcuts (JSON)
- после последней фигурной скобки поставить запятую и с новой строки вставить код

{
        "key": "ctrl+alt+right",
        "command": "moveby.regex",
        "args": ["goToEmpty", "moveby", "next", "end", "wrap"],
        "when": "editorTextFocus && editorLangId == html"
    },
    {
        "key": "ctrl+alt+left",
        "command": "moveby.regex",
        "args": ["goToEmpty", "moveby", "prev", "end", "wrap"],
        "when": "editorTextFocus && editorLangId == html"
    }

- выйти из файла
- теперь можно по хоткеям ctrl + alt + ← и ctrl + alt + → перемещаться курсором именно внутрь пустых тегов типа <div></div>, но это если тег совсем пустой, а если внутри уже что-то есть, этот способ не подойдёт, и лучше воспользоваться предыдущим)

Напишите, помогли ли вам эти способы, которые я предложил)

По поводу самой директивы @import в main.scss: сейчас рекомендуется использовать вместо неё @use, общий смысл остаётся тем же. Подробнее можете прочитать на официальном сайте.

Для подключения стилей библиотеки нужно прописать правильный путь до файла относительно того файла, в который подключаете, main.scss в вашем случае. Где у вас лежит библиотека, в node_modules? Относительный путь выглядит, например, так: ../../node_modules/tippy.js/dist/tippy.css: это значит выйти на один уровень папок выше два раза (две точки), затем зайти в несколько папок вглубь и выбрать нужный файл. Я думаю, вас запутал путь до CSS файла, указанный в описании пакета npm, там путь указывается для импорта с помощью ES modules в js файл, чтобы потом собирать с помощью бандлеров типа Webpack. Вы хотите подключить CSS файл в SCSS, так что попробуйте прописать путь, как я описал.

Для подключения JS части библиотеки потребуется import в ваш main.js или index.js с помощью ES modules, как описано на странице пакета библиотеки. В идеале потом, чтобы бандлер обработал Js: собрать в один файл, Babel, минификация и другие операции с JS кодом. Можно, конечно, и с помощью Gulp сконкатенировать все JS файлы без бандлеров, но нужно следить за порядком конкатенации, есть и другие нюансы, и это в целом неудобно. Я использую связку Gulp для всего кроме JS, а Webpack — для JS, соединяются они через webpack-stream.

Чтобы заработали ES modules, добавьте "type": "module" в ваш package.json.

Удачи)

Я нашёл виновника: обратите внимание на селектор .wrapper-middle, у него в нескольких местах задан z-index: 2, что создаёт новый stacking context. Из-за такого родителя ваше модальное окно с точки зрения z-index расположено не выше значения родителя, то есть 2. Подумайте в эту сторону. Возможно, стоит вынести модальное окно из обёрток и расположить на одном уровне с нижним баром, если это возможно в вашем случае. Всё равно модальному окну задан position: fixed, так что те обёртки не должны быть принципиальными для него.
Удачи, Андрей)