Запускаем Google apps script в Visual studio

Имея дело с GAS в Web app часто приходится работать в связке с html.

Делать данную работу во встроенном Script editor в части тегов не всегда удобно.

Однако, этой проблемы можно избежать, если настроить скрипты в Visual studio

Что понадобится?

  1. Visual code — https://code.visualstudio.com/

2. Node js — https://nodejs.org/en/

3. Clasp — https://github.com/google/clasp

Приступаем

Ставим Vs Code и Node JS

После заходим в Vs Code и убеждаемся, что Node JS встал без ошибок

Для этого заходим в терминал

и пишем node -v

если все успешно, то система покажет текущую версию Node JS

Затем устанавливаем clasp — npm install -g @google/clasp

в результате получаем следующее:

проверяем, успешно ли встал clasp — clasp -v

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

Лечится это просто.

Открывается power shell от имени администратора и в ней пишется Set-ExecutionPolicy RemoteSigned

(через обычную cmd это не работает, запускать надо именно PowerShell)

и пишем ответом А

после этого clasp -v в терминале Vs Code ошибок выдавать не будет

Далее переходим в гугл — https://script.google.com/home/usersettings

и включаем API скриптов

Возвращаемся в терминал VS Code и пишем clasp login,

даём все разрешения, которые запросит гугл.

После успешного разрешения в браузере появится

Далее возвращаемся в Vs Code и создаём отдельную папку под код

Клонируем скрипт

Для того, чтобы получить локальную копию скрипта нужно клонировать его по ID

ID скрипта можно получить здесь:

пишем все в том же терминале:

npm init, который создает файл package.json

и

clasp clone «1yEgj9wiKzCe8ILLQAPhY5jgeKW1mWJWyt7V2J3Zs9SvtVEWsdXMIBJLS» —rootDir src

где в кавычках — ID скрипта, а —rootDir src — куда его копировать

В результате в папке src получаем тот же самый гугл скрипт, что и на сети

Пишем и обновляем код

Возьмём любой код клонированного скрипта, например:

или он же в Vs Code:

и допишем в него ещё одну функцию

Так как эти изменения коснулись лишь локальной версии скрипта, на сети все осталось прежним.

Чтобы обновить скрипт на сети надо сделать clasp push в терминале, поймав следующее

однако, ничего создавать или клонировать не надо

файл .clasp.json есть в папке src

откуда его надо перетянуть в корневой каталог

после чего снова сделать clasp push в терминале

Вот и всё! Теперь мы получили обновлённую версию скрипта и на сети

Ну и напоследок… делаем автозаполнение в VS Code

Идём сюда — https://github.com/google/clasp/blob/master/docs/typescript.md

и находим строчку

  1. Install TypeScript definitions for Apps Script in your project’s folder.
    • npm i -S @types/google-apps-script

запускаем ее в терминале VS Code и теперь он умеет дозаполнять методы


Ваше мнение важно и может улучшить блог

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

У этой записи 2 комментариев

  1. InExSu

    Привет!

    Спасибо.

    Заметил, что в гугл редакторе видны методы из всех файлов.
    А в VSCode не виден код из соседних файлов.

    Что делать?

    1. Добрый день!
      Можно подетальнее?
      Я правильно понимаю, что Вы о том, что в гугл редакторе в любом скрипте виден весь набор доступных методов gas, классов и тд?
      А при работе в вс коде у вас этого авто(до)заполнения нет?
      Если так, то как и писал выше, в вс коде надо установить пакет — npm i -S @types/google-apps-script

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