Подборка расширений VS Code для full stack SDE

Марат Зимнуров

Full Stack SDE

Современный full stack SDE, как и любой другой разработчик, имеет свой набор расширений для повседневной IDE. VS Code из-за своей многогранности идеально подходит для full stack, с лёгкостью заменяя кучу инструментов, таких как Android Studio, Xcode, Eclipse, IDEA, NetBeans, Visual Studio, Shell-environments и т. д.

Представляю вашему вниманию подборку из расширений для VS Code, которые использует, как минимум, один full stack SDE.

Docker

Для full stack SDE важно иметь под рукой доступ к любому окружению и при этом не умножать количество ненужных инструментов в надежде, что они когда-нибудь потребуются.

Смысл перечисленных ниже расширений в том, чтобы максимально упростить работу с контейнерами Docker:

• Docker — позволяет с лёгкостью собирать, управлять и развёртывать контейнеризированные приложения.
• Docker Compose — даёт возможность управлять Compose проектами (Up, Down), Compose сервисами (Up, Shell, Attach, Start, Stop, Restart, Build, Kill, Down), Compose сервисами контейнеров (Attach, Start, Kill) и поддерживает множественную корневую поддержку.
• Docker Explorer — позволяет управлять Docker контейнерами, Docker образами, Docker Hub и Azure Container Registry.
• Docker Linter — добавляет возможность использования линтер для Perl, Python и/или Ruby внутри ваших Docker контейнеров.

Удалённое подключение

Итак, с контейнерами разобрались, но иногда приходится работать из дома, или, к примеру, подключаться к production руками, а старый Termux немножко мозолит глаза. Хотелось бы видеть нормальный проводник боковой панели постоянной IDE.

Тут на помощь приходит набор решений для Remote Development.

Данные расширения помогают забыть о том, что пользователь подключается к удалённому серверу, а не находится в локальной папке:

• Remote Development Pack by Microsoft — набор расширений, который позволит открыть любую папку в контейнере, на удалённой машине или в Windows Subsystem for Linux (WSL) и воспользоваться всеми возможностями VS Code.
• SSH FS — расширение, которое позволяет смонтировать удалённую папку через SSH как локальную папку рабочего пространства.

Syntax Sugar

Современный разработчик тоже человек и любит, когда всё красиво и аккуратно, а значит, в каждом full stack есть доля фронтенда, который не обходится без линтера и инструментов для форматирования и подсветки. А также бэкенд не обходится без highlight’а для различных конфигурационных файлов, а также есть сотни (возможно, тысячи) различных тем для VS Code.

Данные расширения упрощают работу с .env, форматированием JavaScript-, CSS-, HTML- и других файлов:

• Prettier — средство форматирования кода, которое обеспечивает согласованный стиль, анализируя ваш код и перепечатывая его с собственным правилами, учитывающими максимальную длину строки, при необходимости упаковывая код.
• DotEnv — отвечает за подсветку синтаксиса для файлов с расширением .env.
• Atom Material Theme — одна из многих тем оформления для VS Code, которая позволяет кастомизировать среду разработки под себя.

Runners and previewers

Часто нужно запустить простенькую функцию или кастомизируемые команды на родном языке программирования, но поднимать Visual Studio, IntelliJ IDEA или любую другую тяжёлую IDE нет времени. Или нужно всего-то посмотреть HTML файл, но Chrome открывать тяжко. Или вам просто хочется взглянуть, что там в табличке в MySQL происходит, а тут надо консоль открывать и команды вспоминать, а для MS SQL запускать целую SQL Management Studio…

На помощь приходят Code Runners & File Previewers:

• MySQL — средство для управления серверами, базами данных, таблицами, колонками и запросами для MySQL.
• Code Runner — позволяет запускать написанный код на большинстве языков программирования без дополнительных настроек и заморочек.
• HTML Preview — позволяет видеть результат редактирования HTML-файла в режиме реального времени.
• GraphQL for VSCode — набор инструментов для форматирования, дополнения, подсветки синтаксиса для GraphQL и не только.
• Data Preview — подойдёт для просмотра, обрезки, перетасовки, построения графиков, экспорта огромных JSON массивов/конфигураций, YAML, Apache Arrow, Avro и Excel-файлов.
• SQLTools – Database tools — средство для подключения, выполнения и дополнения запросов, закладок, истории операций для баз данных. Почувствуйте себя героем в мире СУБД.
• Android iOS Emulator и Android Emulator Launcher — два инструмента, которые позволяют эмулировать Android и iOS устройства.

Другие инструменты

Иногда нужно немного подумать над архитектурой и порисовать yUML, DFD и так далее. А иногда хочется не открывать Chrome, а просто не вылезать из VS Code и загуглить «javascript reduce vs reduceRight» сразу на StackOverflow, MSDN, Google и ещё чтобы рейты хайлайтило. А ещё бы REST-запрос вызвать или просто открыть какой-то сайт. С этим помогут:

• Let Find — помогает искать информацию в Google, MSDN, StackOverflow не выходя из VS Code и демонстрирует рейтинг ответов и их актуальность для каждого сервиса. При нажатии открывает страницу внутри IDE.
• REST Client — позволяет выполнять HTTP-запросы и получать ответы на них.
• J2UML, vscode-ts-uml, yUML — все три помогают с UML диаграммами, но каждое по-своему. Первое конвертирует классы Java в диаграммы. Второе — классы TypeScript. А третье базируется на синтаксисе yUML и поможет рисовать офлайн-диаграммы под UML.