Всем привет! На Хабре много статей про настройку VSCode, но большинство написали разработчики и для разработчиков. Это достаточно крутой и универсальный инструмент, который можно использовать не только для программирования. В этой статье я на своем примере покажу, как его можно настроить и расширить для работы с данными.

Меня зовут Юлия Васильева, и я системный аналитик в МТС Диджитал. Работаю с B2C-продуктом и анализирую много-много разных Json-файлов. В этой статье я расскажу, как облегчила себе работу с ними благодаря VSCode и почему я в восторге от этого инструмента.

VSCode я использую для анализа больших файлов

Я тесно работаю с frontend-разработчиками. Прежде чем начать проектирование новых блоков на витрине — сайте или приложении — мне бывает нужно разобраться с уже имеющимися ответами на запрос. Понять, какой набор полей используется в текущей версии приложения и как это сопоставляется с реальными данными на экранах. А какие еще могут быть варианты значений в этих полях? Запросы большие, форматы бывают разные, и мне нужны специализированные инструменты для обработки и визуализации.

Раньше я использовала онлайн-инструменты, но результаты работы не сохранялись и приходилось начинать каждый раз заново. Да и в целом есть данные, которые лучше не выносить за пределы компании. Не хочется каждый раз думать: это достаточно чувствительные данные или нет? Еще раздражало, когда в инструменте обновлялся интерфейс, и я не могла сразу найти нужные кнопки. К этому всему закладок стало так много, что я сама стала путаться, какой инструмент какую задачу решает.

Мне был нужен единый инструмент, объединяющий множество функций. Моя личная записная книжка и рабочая тетрадь. Я стала искать варианты и остановилась на VSСode:

1. Он бесплатный.

2. Он поддерживает большое количество плагинов и языков программирования, разметки данных, построения диаграмм.

3. Он безопаснее онлайн-сервисов: редактирование и преобразования происходят локально. Порой я работаю с чувствительными данными и хочу быть уверена, что мои схемы и файлы не улетают неизвестным поставщикам онлайн-редакторов.

Например, коллеги хотят изменить дизайн существующего раздела, который не был описан ранее. В этой задаче мне нужно собрать данные, перенести к себе, разобрать зависимости и сделать соответствующие выводы. С помощью VSСode я могу выполнить основные операции в одном окне, а не переносить их из одного приложения в другое. В этом редакторе я под каждую операцию смогу подобрать специализированный плагин и ниже покажу, с помощью чего я буду решать эту конкретную задачу.

Prettier — Code formatter: форматирование и приведение в читаемый вид

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

Требуется привести файл к читаемому виду. Я вручную устанавливаю в VSCode формат файла — Json. Становится интереснее, ведь VSCode подсвечивает синтаксис. Дополнительно я включаю подсветку отступов. Иногда я читаю по диагонали и без подсветки могу неверно понять вложенность. Когда я вижу вложенность, мне проще понять границы данных для копирования и переноса в другое место. Отступы мне раскрашивает плагин indent-rainbow. Можно и без него, но мне нравится так 🙂

Далее я устанавливаю плагин Prettier — Code formatter — так у меня появляется команда Format Document.

Почему именно Prettier — Code formatter? Я работаю с GraphQL-запросами. Я использую один плагин для обработки Json и запросов GraphQL. Важно лишь верно указать тип файла, если он не определился автоматически.

Основные проблемы с Prettier возникают из-за невалидного файла:

• потерялись запятые;

• файл содержит непечатаемые символы;

• файл содержит не один язык (пример — GraphQL-запросы), а GraphQL-запрос и Json-ответ;

• неверно выбраны расширение и язык.

Как этого избегать? Заранее смотреть, что именно вы копируете и вставляете! Дописать или удалить лишние запятые, удалить часть ненужного запроса или перенести его в отдельную вкладку для дополнительного анализа.

Плагин Partial Diff: сравнение запросов с помощью встроенной функциональности

Теперь я хочу сравнить 2 запроса. Например, запросы с веб-витрины и из приложения. Я могу использовать встроенную функциональность: выделить файл и нажать «Добавить в сравнение», потом выделить второй файл «Сравнить с ранее выбранным». И посмотреть результат. Например, вижу, что во втором файле есть новый параметр, которого не было в первом.

Есть еще один вариант проверки с помощью плагина Partial Diff. Этот плагин добавляет возможность сравнивать блоки текста внутри одного файла. Я выделяю текст, который нужно сравнить, и могу выбрать одну из опций:

1. Select Text for Compare — добавить выбранный текст для сравнения.

2. Compare Text with Previous Selection — сравнить с прошлой выборкой.

3. Compare Text with Clipboard — сравнить текст с буфером обмена.

4. Compare Text in Visible Editors — сравнить текст в видимых редакторах.

Мне пригодилась опция сравнения текста в одном файле, когда я заметила, что в ответе мы получали два одинаковых массива, но с разными названиями.

Выборка значений с помощью jq

jq — это язык запросов к Json-объекту, который выбирает из него данные в соответствии с моими пожеланиями. Почитать о нем можно в этой статье или сразу в первоисточнике.

C его помощью я могу:

1. Выбрать из всего Json перечень значений, которые принимает конкретный параметр.

2. Понять, сколько их.

3. Отсортировать при необходимости.

Есть несколько плагинов, которые позволяют мне использовать язык для формирования запросов. Я рассмотрю jq-live и jq-vscode. Они немного отличаются механикой использования. Первый плагин сохраняет результат в файл, но в нем нельзя редактировать запрос. Второй позволяет редактировать запрос, но для дальнейшей обработки требуется скопировать результат, так как его нельзя сохранить в файл.

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

Далее я могу отсортировать или оставить только уникальные значения. Для этого я использовала встроенную функциональность сортировки и выборки уникальных значений самого VSCode.

Мне это пригодилось, когда я нашла поле, которое было на витрине веб, но не запрашивалось в мобильном приложении. Так я поняла, как именно оно заполняется и как его найти.

Рисование UML-диаграмм с помощью плагина PlantUML

Для рисования UML-диаграмм существует много разных сервисов, но я уже использую VSCode для своих дел. Зачем мне другой инструмент? С плагином PlantUML VSCode отображает схему без доступа в интернет, что гораздо безопаснее.

Работа с OpenAPI (ex. Swagger)

Для меня OpenAPI — это способ передачи информации между собой и разработчиками. Записать требования к формату запросов и ответов в этом формате удобнее, чем с помощью таблицы.

Аналогично я могу воспользоваться открытым ресурсом в сети. Но не хочу. Есть плагин OpenAPI, который распознает оба формата спецификации (json и yaml) и отображает в удобочитаемом представлении. С помощью этого плагина я могу легко редактировать и использовать файлы с применением нужного формата.

Все эти кейсы — только вершина айсберга

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

Очень удобно, что VSСode автоматически сохраняет открытые файлы. Это как браузер, который никогда не закрывает вкладки. Для меня это идеальный инструмент, когда нужно срочно что-то записать, чтобы позже вернуться, или нужно найти примеры, с которыми ранее работала. Аналитику VSСode дает свободу в выборе инструментов. Нужные методы с любовью выбираются и складываются в копилку плагинов. Плагины можно устанавливать не только по прямой ссылке через интернет, но и через встроенный магазин — по названию.

На этом у меня все, с удовольствием обсужу, как вы решаете свои задачи. А если это будет новый плагин или команда в VSCode, то мне точно нужно про это знать))

P. S. Если я вас заинтересовала, то вот гайд по базовой настройке VSCode на русском языке

1. Скачать можно напрямую с сайта: code.visualstudio.com/download.

2. По желанию установить русский язык. Первый год я использовала английский. Чувствовала себя классно, а потом я посмотрела, как легко работать с русским — и тут же сменила язык на родной:

• найти и установить плагин через меню слева — Russian Language Pack for Visual Studio Code. Нажать кнопку «Установить». После установки плагин можно использовать. Читала, что сразу после установки потребуется перезагрузка и язык сменится. У меня этого не произошло автоматически, и мне потребовалось его изменить;

• запуск смены языка.

Запускаем строку для ввода команд — Command Palette. Для этого выполняем действия:

1. Нажать клавиши Сtrl + Shift + P (на Windows или Linux) или Сmd + Shift + P (на MacOS).

2. В рабочей области набрать символ «>».

Вызов Command Palette понадобится для работы с большинством плагинов. Незнание, как его вызвать, тормозило меня в работе.

Про вызов меню написано в описании плагина. Выбираем Configure Display Language и далее следуем подсказкам.

VSCode перезагружается — и дальше работаем с русским языком.