Всем привет! На Хабре много статей про настройку VSCode, но большинство написали разработчики и для разработчиков. Это достаточно крутой и универсальный инструмент, который можно использовать не только для программирования. В этой статье я на своем примере покажу, как его можно настроить и расширить для работы с данными.
Меня зовут Юлия Васильева, и я системный аналитик в МТС Диджитал. Работаю с B2C-продуктом и анализирую много-много разных Json-файлов. В этой статье я расскажу, как облегчила себе работу с ними благодаря VSCode и почему я в восторге от этого инструмента.
VSCode я использую для анализа больших файлов
Я тесно работаю с frontend-разработчиками. Прежде чем начать проектирование новых блоков на витрине — сайте или приложении — мне бывает нужно разобраться с уже имеющимися ответами на запрос. Понять, какой набор полей используется в текущей версии приложения и как это сопоставляется с реальными данными на экранах. А какие еще могут быть варианты значений в этих полях? Запросы большие, форматы бывают разные, и мне нужны специализированные инструменты для обработки и визуализации.
Раньше я использовала онлайн-инструменты, но результаты работы не сохранялись и приходилось начинать каждый раз заново. Да и в целом есть данные, которые лучше не выносить за пределы компании. Не хочется каждый раз думать: это достаточно чувствительные данные или нет? Еще раздражало, когда в инструменте обновлялся интерфейс, и я не могла сразу найти нужные кнопки. К этому всему закладок стало так много, что я сама стала путаться, какой инструмент какую задачу решает.
Мне был нужен единый инструмент, объединяющий множество функций. Моя личная записная книжка и рабочая тетрадь. Я стала искать варианты и остановилась на VSСode:
Он бесплатный.
Он поддерживает большое количество плагинов и языков программирования, разметки данных, построения диаграмм.
Он безопаснее онлайн-сервисов: редактирование и преобразования происходят локально. Порой я работаю с чувствительными данными и хочу быть уверена, что мои схемы и файлы не улетают неизвестным поставщикам онлайн-редакторов.
Например, коллеги хотят изменить дизайн существующего раздела, который не был описан ранее. В этой задаче мне нужно собрать данные, перенести к себе, разобрать зависимости и сделать соответствующие выводы. С помощью 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-ответ;
неверно выбраны расширение и язык.
Как этого избегать? Заранее смотреть, что именно вы копируете и вставляете! Дописать или удалить лишние запятые, удалить часть ненужного запроса или перенести его в отдельную вкладку для дополнительного анализа.
Немного ночного кошмара системного аналитика: нечитаемый GraphQL-запрос
Я копирую из консоли запрос, и он сплошняком в строку. Я ничего не понимаю, прошу пощады.
soft wrap — чтобы поместить текст в ширину окна (Alt + Z на Windows или Linux или Opt + Z на MacOS)
Удаляю лишние скобки, кавычки, оставляю только сам запрос либо копирую на отдельную вкладку, т. к. сейчас этот файл — синтаксически валидный Json. Вызов команды Format Document помогает мне отформатировать документ в удобочитаемый вариант.
Плагин Partial Diff: сравнение запросов с помощью встроенной функциональности
Теперь я хочу сравнить 2 запроса. Например, запросы с веб-витрины и из приложения. Я могу использовать встроенную функциональность: выделить файл и нажать «Добавить в сравнение», потом выделить второй файл «Сравнить с ранее выбранным». И посмотреть результат. Например, вижу, что во втором файле есть новый параметр, которого не было в первом.
Есть еще один вариант проверки с помощью плагина Partial Diff. Этот плагин добавляет возможность сравнивать блоки текста внутри одного файла. Я выделяю текст, который нужно сравнить, и могу выбрать одну из опций:
Select Text for Compare — добавить выбранный текст для сравнения.
Compare Text with Previous Selection — сравнить с прошлой выборкой.
Compare Text with Clipboard — сравнить текст с буфером обмена.
Compare Text in Visible Editors — сравнить текст в видимых редакторах.
Мне пригодилась опция сравнения текста в одном файле, когда я заметила, что в ответе мы получали два одинаковых массива, но с разными названиями.
Выборка значений с помощью jq
jq — это язык запросов к Json-объекту, который выбирает из него данные в соответствии с моими пожеланиями. Почитать о нем можно в этой статье или сразу в первоисточнике.
C его помощью я могу:
Выбрать из всего Json перечень значений, которые принимает конкретный параметр.
Понять, сколько их.
Отсортировать при необходимости.
Есть несколько плагинов, которые позволяют мне использовать язык для формирования запросов. Я рассмотрю 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 на русском языке
Скачать можно напрямую с сайта: code.visualstudio.com/download.
По желанию установить русский язык. Первый год я использовала английский. Чувствовала себя классно, а потом я посмотрела, как легко работать с русским — и тут же сменила язык на родной:
найти и установить плагин через меню слева — Russian Language Pack for Visual Studio Code. Нажать кнопку «Установить». После установки плагин можно использовать. Читала, что сразу после установки потребуется перезагрузка и язык сменится. У меня этого не произошло автоматически, и мне потребовалось его изменить;
запуск смены языка.
Запускаем строку для ввода команд — Command Palette. Для этого выполняем действия:
Нажать клавиши Сtrl + Shift + P (на Windows или Linux) или Сmd + Shift + P (на MacOS).
В рабочей области набрать символ «>».
Вызов Command Palette понадобится для работы с большинством плагинов. Незнание, как его вызвать, тормозило меня в работе.
Про вызов меню написано в описании плагина. Выбираем Configure Display Language и далее следуем подсказкам.
VSCode перезагружается — и дальше работаем с русским языком.
Комментарии (12)
Didimus
16.07.2024 11:00Сваггер удобнее таблицы? Ну такое себе...
dimonier
16.07.2024 11:00Из спеки OpenAPI можно сделать таблицу. А вот обратно - фиг.
Didimus
16.07.2024 11:00А что мешает это автоматизировать? Чат-боты это уже умеют.
Но таблицу я могу показать на собрании с другой командой и всем будет понятно, что в интеграции.
Kokokakoly Автор
16.07.2024 11:00У меня получаются массивные таблицы, которые сложно поддерживать в актуальном состоянии. OpenAPI после этапа проектирования передаю на поддержку кодом, и Swagger актуальный после каждой доработки. Поделитесь, как у вас проходит процесс актуализации документации?
Kokokakoly Автор
16.07.2024 11:00Подскажите, каким инструментом пользуетесь, чтобы получить таблицу из OpenAPI?
Willamette
16.07.2024 11:00А excel со встроенным powerquery не устроил? Он и json и XML ест.
Kokokakoly Автор
16.07.2024 11:00Хороший вопрос. Выбрала VSCode из-за дальнейшего пути данных, с которыми работаю. Данные нужно передать разработчику чтобы положить в код, а значит нужно понять, но сильно не менять структуру. Excel выручал, когда я только разбиралась с тем, что хочется получить. VSCode - следующий этап для моих задач
m03r
С тех пор, как я освоил rectangling (https://tidyr.tidyverse.org/articles/rectangle.html) при помощи tidyr, анализ JSON'ов любой сложности перестал представлять какие-либо проблемы.
В приведённом примере с датами операций их можно извлечь примерно одной строкой, а второй строкой преобразовать строки в настоящие даты и построить в соседнем окошке график
Kokokakoly Автор
Спасибо за наводку! Подскажите, как вы вышли на этот инструмент и сколько потребовалось времени на освоение?
Пример с графиком в соседнем окошке вдохновляет. Хочется оценить трудоёмкость и необходимость погружения
m03r
Про R я в принципе знаю достаточно давно, но именно на tidyverse меня навела ChatGPT, так что какие-то базовые вещи я освоил меньше, чем за день. Правда, она довольно быстро перестала помогать и начала мешать, поэтому дальше я, собственно, читал статьи на сайте tidyverse.
Вот, кстати, добрался до компьютера и могу привести те самые две строчки (и масса «обвеса») для ваших данных:
Из неочевидных плюшек NSE, о котором упоминал в комментарии ниже, например, возможно такое:
Можно пощупать прямо в бразуере
DeepHill
Почему именно R? Pandas вроде такое же методы имеет
m03r
Из-за того, что называется NSE — non-standart evaluation. R ленив, и вычисляет значения аргументов только при необходимости. Более того, их можно превратить обратно в языковые конструкции и проинтерпретировать иначе. В итоге каждая функция может иметь свой мини-синтаксис для аргументов. Потенциально это может, конечно, вести к хаосу, но на деле это делает синтаксис яснее и понятнее, например:
оставит только те столбцы, имена которых начинаются с
c
, позволяя не перечислять их имена.Ну и pipe-оператор, действующий так:
Из-за этого код получается короче и яснее