Работайте над проблемами LeetCode с полной поддержкой IDE в VS Code, а не в браузере.

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

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

К счастью, для VS Code есть отличный плагин, позволяющий работать над задачами в редакторе. Мои цели по настройке рабочего пространства:

  • Отредактируйте и отправьте в VS Code
  • Нет вырезания и вставки между leetcode.com и VS Code
  • Сохранить работу на Github

Среда и инструменты, с которыми я работаю:

  • macOS Биг Сюр
  • Код VS (ноябрь 2021 г., версия 1.63)
  • Фаерфокс 95.0

Расширение LeetCode

Существует отличное Расширение LeetCode для VS Code, которое делает большую часть тяжелой работы для моей установки. Требования к расширению следующие:

У меня был установлен VS Code, но не Node. Самый простой способ установить Node на macOS — использовать Homebrew.

brew install node

Само расширение можно установить с помощью обычного процесса установки расширений в VS Code.

Теперь самое сложное. Запустите команду LeetCode: Sign In, чтобы войти в LeetCode. Однако вход с пользователем и паролем не работает.

Войти с помощью куки

Чтобы войти в свою учетную запись LeetCode, вам необходимо использовать параметр LeetCode Cookie команды LeetCode: Sign In. Есть несколько ресурсов, которые помогут разобраться, что здесь делать. Шаги:

  1. Откройте браузер и перейдите на сайт leetcode.com.
  2. Щелкните правой кнопкой мыши на странице и выберите «Проверить».
  3. В инструментах разработчика перейдите на вкладку «Сеть» и выберите XHR.
  4. Нажмите на любую ссылку на странице leetcode.com.
  5. Выберите любой из http-вызовов на вкладке «Сеть».
  6. Найдите атрибут Cookie в заголовках запроса.
  7. Скопируйте значение Cookie (исключая строку «Cookie:»)
  8. Запустите команду LeetCode: Sign In в VS Code
  9. Выберите вариант LeetCode Cookie
  10. Введите имя пользователя и вставьте значение атрибута Cookie.

Настроить Гитхаб

Создайте новое репо в Github для хранения решений ваших проблем. Теперь нам нужно настроить расширение LeetCode для сохранения в директорию git.

  1. Клонируйте репозиторий Github локально. Я клонировал свой на /Users/ericness/github/leetcode.
  2. Обновите файл VS Code settings.json, чтобы указать эту папку в качестве рабочей области. К сожалению, расширение LeetCode не позволяет дополнять идентификатор проблемы нулями, чтобы файлы сортировались правильно. Есть открытый вопрос по проблеме, но над ним не работали больше года.

3. Щелкните правой кнопкой мыши любую проблему в проводнике расширений LeetCode и выберите «Показать проблему».

4. В вашем репозитории Github создается проблемный файл. Отредактируйте и зафиксируйте этот файл с помощью git, как и любой другой файл кода.

5. Используйте команды расширения LeetCode для тестирования и отправки вашего решения.

Заворачивать

Эта настройка включает все инструменты VS Code при работе с проблемами LeetCode, избегая при этом проблемы вырезания и вставки между браузером и IDE. Он обеспечивает современный опыт разработки и ускоряет процесс решения проблем LeetCode. Удачи вам в вашем путешествии по LeetCode!