Настройки и расширения VS Code для работы со Svelte

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

VS Code или Visual Studio Code - это бесплатный текстовый редактор с открытым исходным кодом, разработанный Microsoft для Windows, Linux и macOS. Он включает в себя инструменты для работы с Git, подсветку синтаксиса, средства для рефакторинга и многое другое. Цвета интерфейса, вид папок, конфигурации можно настраивать на свое усмотрение, в том числе с помощью соответствующих расширений. Является одним из самых популярных инструментов для разработки в мире.

Эта статья является вольным переводом с адаптацией статьи на сайте «webjeda.com», который ведет разработчик и большой поклонник Svelte Шарат Кумар. Его статью я дополнил своими небольшими изысканиями, являющимися весьма полезными для работы со Svelte. Кстати, бо́льшая часть рекомендаций в статье подойдет не только для работы со Svelte, но и в целом для любого проекта. В общем, поехали!

Файлы прежде всего

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

Как устроен этот сайт. Структура проекта на Sveltekit

Статья будет полезна тем, кто начинает работать со Svelte или еще выбирает свой первый фреймворк для изучения

/blog/kak-ustroen-etot-sait

В структуре этого сайта в папке маршрутов есть папка блога. В ней всего три подпапки и два файла - файл с load-функцией (+page.js) и шаблон страницы блога (+page.svelte). И почему-то регулярно, вместо этих двух файлов я открывал файл с аналогичным названием, но в другой папке и пытался там найти то место, которое мне нужно подправить. Для решения этой проблемы подойдет специальная настройка в VS Code, позволяющая в структуре проекта выводить файлы над папками.

1. Откройте настройки VS Code.
2. Выберите Функции > Проводник.
3. Найдите там секцию Sort Order, либо вбейте чуть выше в строке поиска Sort Order.
4. Если вы нашли секцию через поиск, то она будет называться Explorer: Sort Order. Выберите в выпадающем меню данной секции filesFirst.

Такое расположение файлов особенно полезно для крупных проектов с многочисленными подкаталогами: оно упрощает поиск важных файлов, таких как +page.svelte, +layout.svelte , +server.js или +error.svelte в соответствующих каталогах.

Что есть что

Хорошо это или плохо, но все файлы страниц в проектах Svelte называются +page.svelte. Если у вас открыты несколько таких файлов, то в верхней панели вкладок (там, где на табах отображаются названия открытых в редакторе файлов) можно запутаться, ведь понять где конкретно открыт файл нужной вам страницы не легко. Особенно актуальна эта проблема там, где у вас есть два очень похожих проекта и вы на основе одного проекта пишите код для другого. Не ровен час, можно залезть не в тот файл и править его, и удивляться почему же изменения не отображаются. Может я очень не внимательный, но у меня такое бывало не один раз.

Конечно, можно навести мышь на вкладку и во всплывающем окошке вы увидите полный путь до файла, но это надо навести и подождать, после чего повторить это действие на других вкладках. Но есть метод попроще. Путь до файла можно отображать на самой вкладке, рядом с названием файла. В формате Component.svelte app/src/lib/components. Вот как можно это сделать:

1. Откройте настройки VS Code.
2. Выберите Рабочее место > Управление редактором.
3. Найдите там секцию Label Format, либо вбейте чуть выше в строке поиска Label Format.
4. Если вы нашли секцию через поиск, то она будет называться Workbench › Editor: Label Format. Выберите в выпадающем меню данной секции medium.

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

Древо познания структуры и вложенности

Еще одна проблема, с которой я столкнулся в редакторе. Слева в окне проводника VS Code, подкаталоги и файлы, которые вложены в каталоги, имели малый отступ. Проводник - это то, что слева от редактора кода, там, где отображаются все ваши папки и файлы. Из-за этого было сложно визуально разобраться к какому конкретно каталогу относится тот или иной файл/папка. Исправляется это так:

1. Откройте настройки VS Code.
2. Выберите Рабочее место > Вид.
3. Найдите там секцию Tree: Indent, либо вбейте чуть выше в строке поиска Indent.
4. Если вы нашли секцию через поиск, то она будет называться Workbench › Tree: Indent. В поле ввода данной секции напишите число больше 16. Наблюдайте как изменяется отступ в дереве проектов в проводнике. Остановитесь на подходящем значении.

Для себя я выбрал значение «20». Увеличение значения отступа файлового дерева повышает ясность, упрощая определение ассоциаций файлов с конкретными каталогами.

Ничего не означает ничего

Также вы можете отключить так называемые компактные каталоги. Это когда у вас в папке содержится пустая папка, в ней еще одна пустая папка, и только в последней папке есть файл. Без отключения соответствующей настройки VS Code отображает в проводнике такую структуру вот так folder/folder/file, что не очень удобно. Избавляемся от этого таким образом:

1. Откройте настройки VS Code.
2. Выберите Функции > Проводник.
3. Найдите там секцию Compact Folders, либо вбейте чуть выше в строке поиска Compact Folders.
4. Если вы нашли секцию через поиск, то она будет называться Explorer: Compact Folders. Снимите в данной секции флажок.

Автоматизм: 80lvl

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

Данное расширение умеет подсвечивать синтаксис, выявлять ошибки в файлах, показывать различную информацию при наведении и многое другое. Но есть у Svelte for VS Code и одна важная функция, которая почему-то в настройках отключена. Это генерация маршрутов, файлов и папок, с созданием базового кода в файлах.

Если включить настройку, то работать эта функция будет так: наводим мышь на любую папку нашего Svelte-проекта, кликаем правой кнопкой, выбираем пункт SvelteKit Files и уже там щелкаем на нужный пункт. После этого вверху редактора появится строка, куда нужно вбить название папки или путь до папки. Например, если я хочу создать файл +layout.server.js в папке src/routes/blog/tags, то в строке можно прописать /blog/tags, поскольку автогенерация файлов работает по умолчанию только с каталогом routes.

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

Чтобы включить в плагине Svelte for VS Code автогенерацию маршрутов и файлов, убедившись что расширение установлено, нужно сделать следующее:

1. Откройте настройки VS Code.
2. В строке поиска напишите @ext:svelte.svelte-vscode.
3. В самом низу страницы найдите секцию Svelte › Ui › Svelte Kit Files Context Menu: Enable.
4. В выпадающем меню в данной секции выберите пункт always.

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

Быстрее, еще быстрее

Если вы своем сознании разработчика настолько преисполнились, что вам лень прописывать базовые конструкции SvelteKit, например, перебор массива, условную логику или даже структуру компонента (script, html, style), то вам поможет плагин Svelte 3 Snippets. Установите его, включите и создавайте код с помощью магии.

Если ввести в файле компонента s-, то можно увидеть в контекстном меню варианты для вставки нужного сниппета. Например, s-component-format создаст структуру svelte-файла, s-if-else-block вставит блок условной логики, а s-await-then-block блок с асинхронным запросом. Полный список команд можно посмотреть на странице расширения.

Бонус: трюк с плюсом

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

Сам Рич Харрис, создатель Svelte, предложил удобный трюк по поиску нужный файлов в проектах в VS Code. Для этого нужно открыть поиск сочетанием клавиш Ctrl + P или нажатием на F1. Затем ввести в строку «+» и вам откроется вся палитра файлов Svelte с указанием маршрутов.

Открывайте и делайте нужные вам правки, не боясь ошибиться. А ведь было время, когда многие разработчики удивлялись, зачем Харрис придумал добавлять плюсик в начало названия файлов в Svelte. Один из ответов: для удобного поиска файлов в каталогах проекта.

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