VS Code Extension — Snippets — Я расскажу как сэкономить время

Работая долго на каком-то проекте, часто сталкиваешься с потребностью скопировать какую-то часть типичного кода и вставить ее в нужное место. В таких ситуациях snippets выручают как нельзя к стати. Именно на их примере я и расскажу как строить расширение для собственных нужд в VS Code.

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

Я работаю на Mac поэтому команды будут соответствующие…

И так, что нам нужно?

  • Собственно VS Code
  • Node.js, а точнее его файловый менеджер — nmp
  • VS code generator
  • Прямые руки

Процесс установки необходимых инструментов. Осторожно! Используется Terminal!


  1. Установка Node.js (можно пропустить если уже есть)
    • Установка brew (можно пропустить если уже есть)
      /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

    • Установка Node.js
      brew install node


  2. Установка VS code generator
    npm install -g yo generator-code


Создание Extension Template-а


  1. Работая все в той же консоли выполним команду
    yo code

    Пред вами предстанет следующая картина:
    image
    Необходимо выбрать JavaScript
  2. Затем механизм предложит вам заполнить еще несколько полей, после чего начнется процесс создания
    image

Поздравляю. Template создан. Перейдем к коду.

Создание Extension-а


  1. Откроем созданную папку. Имя ее совпадает с extension identifier который вы указали ранее)
    image
  2. Создаем папку snippets с вложенным json файл(ом/ами). Смысл в том чтобы для каждого языка vs editor можно было применять свой набор snippet-ов, чтобы это реализовать, необходимо регистрировать для каждого из требуемых вам языков свой файл snippet-ов. К примеру я использую sql и js, поэтому я сделаю себе 2 файла
    image
  3. Регистрируем snippets в Extension-е. Зарегистрируем Snippet файлы и привяжем их к языкам к которым они будут применяться. Для этого в файле package.json добавим следующую простую конструкцию, в которой указано какому языку соответствует какой snippet

    image

    Код для ленивых
        "snippets": [
            {
                "language": "csharp",
                "path": "./snippets/js_snippets.json"
            },
            {
                "language": "sql",
                "path": "./snippets/sql_snippets.json"
            }
        ]
                


  4. Описание тела snippet-ов. Тело должно быть в формате json как уже было обозначено ранее. К примеру я для себя создал два шаблона (snippet-a). Один из них создает тело pl sql программы, а второй просто содержит в себе output snippet. Каждый snippet состоит из:

    • json object snippet-a — определения его имени;
    • prefix — команда благодаря которой сможем найти snippet;
    • body — тело которое вставится в редактор;
    • description — описание snippet-a.

    image

    И опять код
        {
            "Default body": {
                "prefix": "defaultbody",
                "description" : "Declare dafault body",
                "body": [
                    "declare",
                    "",
                    "    v_errorCode    int;",
                    "    v_errorMessage nvarchar2(255);",
                    "",
                    "begin",
                    "",
                    "    begin",
                    "",
                    "        null;",
                    "        --Do something",
                    "",
                    "    exception when others then",
                    "",
                    "        v_errorCode    = 101;",
                    "        v_errorMessage = substr(sqlerrm, 1, 200);",
                    "        ",
                    "    end;",
                    "",
                    "    <<cleanup>>",
                    "        --dbms_output.put_line('Error code    : '||v_errorCode);",
                    "        --dbms_output.put_line('Error message : '||v_errorMessage);",
                    "end;"
                ]
            },
            "Output": {
                "prefix": "output",
                "description" : "Dbms output",
                "body": [
                    "dbms_output.put_line('');"
                ]
            }
        }
                


  5. Запуск. Производится при помощи все того же vs code после чего открывается новый instance vs code
    image
  6. Проверка. В новом instance нам необходимо выбрать язык написания кода sql и начать писать prefix одного из snippet-ов соответствующих выбранному языку и вот что у нас получится
    image

    image

  7. Применение. Чтобы оставить extension на своем тарантасе и чтоб он всегда работал необходимо переместить папку с проектом в
    user/.vscode/extensions/


Кажется, получилось неплохо? Экономьте время, народ… Time is $
Поделиться публикацией
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 15

    0
    Если тебе часто приходится делать copy/paste — значит ты делаешь что-то не так.
      0
      Я понимаю о чем вы. Но нельзя отрицать что есть какие-то типичные блоки кода (а правильнее даже — конструкции) без которых сложно справиться.
        0
        Хм… Наверно, Вы правы, хотя я лично никогда не сталкивался с тем, чтобы какой-то повторяющийся блок нельзя было оформить в отдельную функцию или генератор.
          0
          «Повторяющийся код» может быть не обязательно из этого проекта, а совсем из другого. Для это и есть сниппеты, что бы не писать один и тот же код заново когда начинаешь новый проект.
            0
            Не могу не согласиться. Ваша формулировка более точна.
              0
              «Повторяющийся код» может быть не обязательно из этого проекта, а совсем из другого.

              Тогда логично обособить его в отдельный модуль и импортировать?
                +1

                Так snippets это не про это. Это не про использования кода, это про объявление кода. Например обявление класса, начинаешь писать cla... и тебе сразу объявлние класса вылазит, с конструктором, и только подставляешь значение имени класса один раз. Но это такой тривиальный пример. Или там try/except сразу парой. Возможно более сложные случаи, посмотрите гифку на сайте vscode.

          0
          if err != nil {
          //....
          }
        • НЛО прилетело и опубликовало эту надпись здесь
            +1
            Высокомерия я тут не разглядел. Пытался писать максимально тактично и толерантно.

            Мне кажется каждому разработчику хочется выпустить продукт, которым бы пользовались люди. Поэтому разработка собственного Extension-а даже пусть и такого простого будет хорошим началом в этом деле. Ведь те Сниппеты, о которых говорите вы, невозможно выложить в качестве Extension-а в глобальный доступ. Они будут доступны лишь вам.

            Спасибо за конструктивную критику и советы. Есть над чем подумать…
            • НЛО прилетело и опубликовало эту надпись здесь
            0
            Осторожно! Используется Terminal!

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

              0
              Простите. Не хотел задеть ваши чувства.
              –1
              Спасибо большое!
              Изложение не особо важно. Я просто не знал про эту фишку. Теперь поэкономлю дополнительное время:)

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

            Самое читаемое