Working with Google Apps Script in Visual Studio Code using clasp

Google Apps Script to Visual Studio Code with Clasp

Google Apps Script, clasp, Visual Studio Code, Node.js, npm, Windows 10

I don’t mind the Google Apps Script built-in online editor. It provides word completion, error handling, and pretty formatting, making it ideal to hash out a small automation project pretty quickly.

However, one of its major limitations is that after 1,000 or so lines of code and multiple files, it can start to get a little clunky. It also makes things a bit difficult when you want to use your own debugging or testing software. Further, if you have a HTML (CSS, JS) intensive app, it is quite hard to create and test the front end. Finally, it can be just damn comfortable slipping on a pair of your favourite slippers and using your preferred Text Editor or IDE.

This little tutorial is going to guide us through the steps that will allow us to work, push and pull Google Apps Script code from the online editor to Visual Studio Code. We’ll even be able to run the program from the terminal in VS Code and manage versions.

Fortunately, Google developed a tool that enables us to develop Google Apps Script code from the command line, clasp.

Setup Visual Studio Code for Google Apps Script

The steps to setting up Visual Studio for Google Apps Script production are as follows:

  1. Install clasp via npm.
  2. Give permission to run the Apps Script API.
  3. Get text completion for Apps Script

Installing clasp

clasp is a command-line tool that allows you to connect with your Google Apps Script files to:

  • Pull them from the cloud.
  • Push them from your PC to the cloud.
  • Review and set versions.
  • Open the Google Apps Script project on the online editor.

There are a few other tasks that clasp achieves but these are the ones I think you are going to use the most.

clasp is run in node.js via npm. You will need to install a recent version of Node.js that is 6.0.0 or later.

Note: I’ll be focussing on a Windows 10 install.

Right-click and run your preferred command-line interpreter as administrator (I’m using Powershell for Windows) enter the following:

The above command invokes npm instructing it that it will install (i)and then gets clasp from the Google repository. It then ensures that clasp will be installed over the entire system, or globally (-g).

Installing google clasp for apps script

To test to see if clasp is working, you can now type clasp into the command line. You should see a list of command option if all is working.

google clasp options

Next, type login. This will set you up login for the first time.

A browsers window will appear prompting you to log into your chosen account.

google clasp login

google clasp login permissions

Once you select your account. Another window will appear with a crazy-long list of permissions that you need to allow.

You will then get a confirmation if all goes well:

One final little job you will need to do is to go into your Google Apps Script Settings and toggle the API to, on.

 

 

 

Google Apps Script API settings

Setup Google Apps Script Word Completion in Visual Studio Code

Before we get cracking with playing around will Clasp, let’s make sure Visual Stuido Code is set up to be able to autocomplete Google Apps Script classes and methods.

On the command line, type:

Note: you might want to install this locally with your project if you use other TypeScript packages. 

Running Google Apps Script in Visual Studio Code

Open Visual Studio Code. Navigate to your usual programming or practice folder. You and create a new folder for your Google Apps Script project here or you can do it from the command line.

You can run command-line prompts from your preferred interpreter inside Visual Studio Code by going to the Terminal menu and selecting New Terminal or Ctrl + Shift + `.

visual studio code make a directory

clasp create

Go into your new folder. To connect your project with clasp type:

You will be prompted with an option of which type of script you wish to choose, for example, standalone, spreadhseet document, etc. You can use the arrow keys to select the one you want. For our example, we will just run a standalone script. Click <enter>.

clasp will create the project on your script.google.com dashboard and also save two JSON files into your new clasp_test directory.

clasp create in VS Code

*.gs files = *.js files

When we normally create a Google Apps Script file, we usually have two options the .gs file for Google Script server-side code and the .html for client-side code.

clasp expects you to run .js files from your pc and will upload and convert the file to .gs when you push it to the cloud and reverse the process when you pull it to your computer.

Go ahead and make a simple “Hello, World” program that we can log. Give it a file name test.js and add the following code. Try typing it in and you should see that autocomplete is working.

clasp push

Great, we created our file. Let’s go and push it to our cloud script.google.com.

You will be returned the following:

clasp open

If we want to see our script on the Google Apps Script code editor in your browser, you can type:

This will open your project online:
clasp open GAS online editor

You can see that the test.js file has been converted to test.gs during the push.

Let’s go ahead and make a few changes to our code on our online editor. We can see that we made a few mistakes in our code. Let’s change the function name to runTest and remove line 3. We’ll also go ahead update our log to something more pure, some more honest…

Go ahead and save that in your browser text editor, then head back to the Visual Studio Code terminal.

clasp pull

In Visual Studio Code, type:

This will grab the code from the browser text editor and update your local files on your computer.

Updating Versions

You can also manage version control from clasp.
To create a version type:

This will return the version number, but not the description you created. To see the description you can view all versions.
To see your versions, you can type:

This will result in something like:

You can also pull a project by version number.

Clone

You can also make a copy or clone your project.

Open a new window in Visual Studio Code (Ctrl + shift + n). Create a new directory and open the terminal. We’ll call ours, clasp_test2.

You will need either the URL or the script id. The fastest way for me to find the script id was to go back to the original clasp_test window in Visual Studio Code and open the clasp.json file and copy the scriptId. You could just as easily grab the URL from going to your script in your browser or typing clasp list to get a list of your recent projects and copying the appropriate URL. -version as well.

Back in your clasp_test2 window on Visual Studio Code, type into the terminal:

This will create a copy of your project in your new directory. This will still reference the same project id as your other project and any changes will influence your other clones.

Conclusion

That’s the basics. You can explore more about clasp by going to their GitHub page. If you want to automate some of these processes – like have the push and pull automated – you can use tools like grunt and gulp to make your life easier.

So, do you prefer working in Visual Studio Code over Google Apps Scripts online Text Editor? Was it worth the effort to set it all up? Let me know in the comments below.

Looking to learn more about Google Apps Scripts in a more structured format? Udemy has some great courses that can get your from the basics to a real Google Apps Script pro!

Got a more specific problem you need help with, but don’t have the time to develop the skills? Fiverr’s your best bet to find a skilled Google Apps Script professional to solve your problem quickly and cheaply. *

 

*The above affiliate links have been carefully researched to get you to what you specifically need. If you decide to click on one of these links it will cost you just the same as going to the site. If you decide to sign up, I just get a little pocket money to help pay for the costs of running this website.

~Yagi

11 thoughts on “Working with Google Apps Script in Visual Studio Code using clasp”

  1. I saw a lot of tutorials on this subject, they instruct you to do a lot of unnecessary stuff claiming that their way is the bare minimum. This tutorial is the simplest best one I’ve read so far, thanks for the time you took doing it.

Leave a Reply