Pull to refresh

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

Reading time 3 min
Views 14K
Работая долго на каком-то проекте, часто сталкиваешься с потребностью скопировать какую-то часть типичного кода и вставить ее в нужное место. В таких ситуациях 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 $
Tags:
Hubs:
0
Comments 15
Comments Comments 15

Articles