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 $

FavoriteLoadingДобавить в избранное
Posted in Без рубрики

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *