Пусть ничто не мешает вам персонализировать ваш любимый редактор кода!

«Автоматизация, применяемая к неэффективным операциям, увеличит неэффективность» - Билл Гейтс.

Visual Studio Code, пожалуй, самый используемый текстовый редактор в мире, когда дело доходит до программирования! Фактически, VS Code был признан самым популярным инструментом для разработчиков в опросах разработчиков StackOverflow 2018 и 2019. Это легкий, легкий в навигации и легко настраиваемый редактор кода, который нужен каждому. Это сделало VS Code любимым для всех с момента первого выпуска в 2015 году.

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

Зачем создавать собственное расширение?

Я спрашивал себя об этом тысячу раз, пока мне не пришлось его создать!

Есть расширения почти для всех очевидных вариантов использования. Но как разработчики, каждый из наших рабочих процессов отличается. Личные предпочтения, которые несет каждый из нас, широки, и разделение их по коробкам не всегда может сработать.

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

Для меня это было про Angular

Я работаю с Angular ежедневно. Что похвально делает Angular, так это готовая модульность. Каждый компонент, который вы создаете с помощью Angular CLI, генерирует для вас четыре файла.

  • Компонент .html (шаблон)
  • Компонент .ts файл (контроллер)
  • Файл таблицы стилей компонентов
  • Компонентный файл .spec (модульное тестирование)

Я обнаруживал, что переключаюсь между этими файлами снова и снова. С годами я понял, что трачу на это много продуктивного времени.

Процесс будет выглядеть так (переход от шаблона к контроллеру)

  1. Открыть боковую панель (Cmd + B)
  2. Используйте тачпад для перехода к файлу компонента
  3. Щелкните файл контроллера
  4. Закрыть боковую панель (Cmd + B)

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

Давай создадим один

Без лишних слов, давайте напишем код.

Самый простой и рекомендуемый способ создания шаблонов для расширения VS Code - использовать генератор кода Yeoman. Yeoman - это инструмент для создания шаблонов проекта. Каждое приложение Yeoman известно как генератор, поскольку оно обычно генерирует файлы из команд конфигурации. В нашем случае мы хотим использовать генератор с именемgenerator-code.
Поехали!

npm install -g yo generator-code

yo это пакет yeaoman npm и generator-code пакет генератора yeaoman

После того, как вы все установили, запустите

yo code

чтобы подготовить для вас свой первый проект расширения кода VS. Yeoman запросит дополнительную информацию о вашем расширении. Ответьте на все это соответственно, вот пример.

? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? ng-switch
? What's the identifier of your extension? ng-switch
? What's the description of your extension?
? Initialize a git repository? Yes
? Bundle the source code with webpack? Yes
? Which package manager to use? npm

Используйте New Extension (javaScript), если вы предпочитаете js, а не ts

Рабочее пространство проекта будет похоже на

Здесь есть два интересных файла.

  1. package.json
    Помимо информации о пакете, в этом файле есть записи, указывающие, как должно быть активировано событие (скажем, при нажатии сочетания клавиш). Событие - это любое действие, которое вы хотите выполнить с помощью расширения. Каждое действие называется командой.
  2. src / extention.ts
    Команды зарегистрированы в этом файле. Команда может быть просто информационным всплывающим окном, которое вы хотите показать пользователю.

Итак, вкратце, файл extensions.ts - это то место, где записываются команды, а package.json содержит информацию о том, как их активировать. команды.

Давайте сделаем шаг назад и обозначим нашу первоначальную цель.

Нам нужно зарегистрировать команду, которая переключает файлы и активирует ее с помощью сочетания клавиш, скажем Cmd+Y.

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

Регистрируем команду, а именно ng-switch.switch.

ng-switch - уникальный идентификатор нашего расширения, а switch - команда

При активации этой команды запускается следующий поток.

  1. Получить текущий путь к открытому файлу (файл component.ts или файл component.html)
  2. Поменять местами имена файлов (.html на. ts и наоборот)
  3. Создать VS Code URI для пути к файлу
  4. Откройте файл, используя URI

Да вот так просто!

Теперь остается только активировать эту команду в событии нажатия сочетания клавиш.

Давайте перейдем к файлу package.json и обновим запись дополняет следующим образом.

Массив commands можно использовать для запуска команды через палитру команд VS Code (в данном случае 'switch'), а массив keybindings будет содержат все сочетания клавиш, активирующие команду.

Это, очевидно, приводит к активации нашей зарегистрированной команды (switch), когда пользователь нажимает Cmd+Y или Ctrl+Alt+Y.

Мне не терпится увидеть все удивительные расширения, которые вы создадите!

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

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

Больше таких статей 👇



Бхаратх Рави | Статьи по javaScript
Компетентные статьи для повышения уровня ваших навыков работы в Интернете. Личный блог Бхарата Рави, разработчика полного стека javaScript bharathravi.com



Найдите меня в Твиттере здесь.

удачного взлома!