Работая долго на каком-то проекте, часто сталкиваешься с потребностью скопировать какую-то часть типичного кода и вставить ее в нужное место. В таких ситуациях snippets выручают как нельзя к стати. Именно на их примере я и расскажу как строить расширение для собственных нужд в VS Code.
По поводу создания расширений VS Code имеет документацию, однако тут я попытаюсь более сжато показать процесс создания.
Я работаю на Mac поэтому команды будут соответствующие…
И так, что нам нужно?
Процесс установки необходимых инструментов.
Поздравляю. Template создан. Перейдем к коду.
Кажется, получилось неплохо? Экономьте время, народ… Time is $
По поводу создания расширений VS Code имеет документацию, однако тут я попытаюсь более сжато показать процесс создания.
Я работаю на Mac поэтому команды будут соответствующие…
И так, что нам нужно?
- Собственно VS Code
- Node.js, а точнее его файловый менеджер — nmp
- VS code generator
Прямые руки
Процесс установки необходимых инструментов. Осторожно! Используется Terminal!
- Установка Node.js (можно пропустить если уже есть)
- Установка brew (можно пропустить если уже есть)
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
- Установка Node.js
brew install node
- Установка brew (можно пропустить если уже есть)
- Установка VS code generator
npm install -g yo generator-code
Создание Extension Template-а
- Работая все в той же консоли выполним команду
yo code
Пред вами предстанет следующая картина:
Необходимо выбрать JavaScript
- Затем механизм предложит вам заполнить еще несколько полей, после чего начнется процесс создания
Поздравляю. Template создан. Перейдем к коду.
Создание Extension-а
- Откроем созданную папку. Имя ее совпадает с extension identifier который вы указали ранее)
- Создаем папку snippets с вложенным json файл(ом/ами). Смысл в том чтобы для каждого языка vs editor можно было применять свой набор snippet-ов, чтобы это реализовать, необходимо регистрировать для каждого из требуемых вам языков свой файл snippet-ов. К примеру я использую sql и js, поэтому я сделаю себе 2 файла
- Регистрируем snippets в Extension-е. Зарегистрируем Snippet файлы и привяжем их к языкам к которым они будут применяться. Для этого в файле package.json добавим следующую простую конструкцию, в которой указано какому языку соответствует какой snippet
Код для ленивых"snippets": [ { "language": "csharp", "path": "./snippets/js_snippets.json" }, { "language": "sql", "path": "./snippets/sql_snippets.json" } ]
- Описание тела snippet-ов. Тело должно быть в формате json как уже было обозначено ранее. К примеру я для себя создал два шаблона (snippet-a). Один из них создает тело pl sql программы, а второй просто содержит в себе output snippet. Каждый snippet состоит из:
- json object snippet-a — определения его имени;
- prefix — команда благодаря которой сможем найти snippet;
- body — тело которое вставится в редактор;
- description — описание snippet-a.
И опять код{ "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('');" ] } }
- Запуск. Производится при помощи все того же vs code после чего открывается новый instance vs code
- Проверка. В новом instance нам необходимо выбрать язык написания кода sql и начать писать prefix одного из snippet-ов соответствующих выбранному языку и вот что у нас получится
-
Применение. Чтобы оставить extension на своем тарантасе и чтоб он всегда работал необходимо переместить папку с проектом в
user/.vscode/extensions/
Кажется, получилось неплохо? Экономьте время, народ… Time is $