How to enable autocomplete for Google Apps Script in locally-installed IDE

Question

I'm trying to build GAS projects locally using clasp.

Any locally-installed IDE is a huge improvement over Google's Script Editor, so the tool looks very promising. Unfortunately, the autocomplete feature for GAS services doesn't seem to be included in the package.

The documentation says:

The Apps Script CLI uses TypeScript to provide autocompletion and linting when developing. Use an IDE like Visual Studio Code for TypeScript autocompletion.

After going through the steps and installing all required dependencies, I'm still unable to get the autocomplete feature to work. When I execute the clasp pull command for the existing project, it converts the ".gs" extension to ".js". The autocomplete suggestions are simply the result of parsing existing code.

For example, if I call sheet.getRange() somewhere in my code, then the getRange() method will pop up in suggestions, but I can't list available options for, say, PropertiesService, unless it's already used in my code.

Has anybody had any luck with enabling autocomplete feature for Google Apps Script?

score 28 · Accepted Answer · edited May 05 '20 at 20:29

28

I found the solution that partially works, but it may not be applicable to other software. The steps below are for Visual Studio Code:

Install the NPM package containing type definitions for GAS using
```
https://www.npmjs.com/package/@types/google-apps-script
```
In your locally-saved script, create a '.js' file and type
```
import 'google-apps-script';
```

edited May 05 '20 at 20:29

the Tin Man

158,662
42
215
303

answered Mar 05 '18 at 15:32

Anton Dementiev

5,451
4
20
32

9

With the latest clasp, step 2 and removing imports are not needed. They are handled automatically. – V.i.K.i Mar 15 '19 at 07:03
should it be installed locally or globally for it to work? – EdgeDev Apr 09 '19 at 23:30
@EdgeDev you can install locally. See this guide for updated instructions: https://github.com/google/clasp/blob/master/docs/typescript.md – Grant Timmerman Jul 31 '19 at 01:50
3

in `Visual Studio Code`... `npm i @types/google-apps-script` works alone to add **intellisense**: no need to create an extra file to `import 'google-apps-script'` nor to add anything to `.claspignore` – rellampec Mar 07 '20 at 22:34
2

@rellampec Now it sure does. It didn't as of 2018. Thanks for the clarification though. – Anton Dementiev Mar 08 '20 at 17:34
I had everything working fine with typescript for a couple days. I never did the import statement because I didn't seem to need it and then one day it suddenly required it. Couldn't find interfaces or functions defined in other files anymore. Curious if anyone knows why. Maybe vscode had just sort of remembered everything since I created it all in one session? This seemed to fix it – Simon_Weaver Dec 22 '20 at 08:36

TheMaster · Answer 2 · 2019-09-29T16:23:09.400

17

This answer is a minor variation on the accepted one for IDEs/extensions which support Typescript auto completion based on tsc/tsserver:

Install TypeScript and @types/google-apps-script
- https://www.npmjs.com/package/typescript
- https://www.npmjs.com/package/@types/google-apps-script

Create a jsconfig.json file in your local project directory:

{ 
    "compilerOptions": {
        "checkJs": true
      }
}

Alternatively, If you're using typescript along with javascript, then create a tsconfig.json:

{ 
    "compilerOptions": {
        "allowJs": true,
        "checkJs": true,
        "types": ["google-apps-script"]
      }
}

Include both filenames in .claspignore, if you're using clasp and if the file is in your local directory.
You can also use any of this config globally, if the config is in your home/parent directory, as tsc searches for this config from project/local folder to root(in which case, you don't need to include it in .claspignore).

edited Sep 29 '19 at 16:23

answered Aug 09 '18 at 16:40

TheMaster

45,448
6
62
85

Which IDE is this for? I'm trying to find a way to get this to work in Notepad++. – IMTheNachoMan Sep 04 '19 at 16:46
@IMThe Should work with any ide that supports autocomplete+typescript. I'm not sure whether notepad++ supports autocomplete from typescript. See [this](https://stackoverflow.com/questions/12165017/) and [this](https://github.com/Microsoft/TypeScript/wiki/TypeScript-Editor-Support#notepad) – TheMaster Sep 04 '19 at 17:20
1

I'm using VS Code, this solution works well, no need to create `.claspignore` because it already ignores all extensions excepting some by default. But I had a little annoying error in `tsconfig.json`: "Cannot write '.../Code.js' because it would overwrite input file .ts". I fixed the error with `"outDir": "./built"` in `"compilerOptions"`. – dmitry1100 Jul 24 '21 at 14:06
1

Minor issue with ts types. It should be `"types": ["@types/google-apps-script"]` – Townsheriff Jul 29 '21 at 11:38

score 7 · Answer 3 · answered Dec 14 '19 at 21:01

7

If you are using any JetBrains IDE:

Go to Languages & Frameworks -> JavaScript -> Libraries -> Download... and download the library google-apps-script.

answered Dec 14 '19 at 21:01

daaawx

3,273
2
17
16

This basically just installs correct @types again similarly as doing it by installing NPM deps. If you took over the set of *.gs files from the web app then this also requires going to settings `Editor - File types` and set JavaScript extension as `*.gs` so the code highlights correctly – dkocich Jan 05 '21 at 12:55

score 6 · Answer 4 · edited Dec 22 '20 at 08:55

6

Try including the file name, import.js in .claspignore (docs).

This should save some trouble deleting the file before each push every time.

edited Dec 22 '20 at 08:55

Simon_Weaver

140,023
84
646
689

answered Apr 21 '18 at 22:16

meleu

61
2

score 4 · Answer 5 · edited May 05 '20 at 20:32

4

This is an answer provided by Google developers in the "TU17: Enhancing the Google Apps Script Developer Experience with clasp and TypeScript" video.

Add a JavaScript file to your project like "appscript.js" and, in that file, add:

import "google-apps-script";

Save that file but make sure to ignore it when pushing files back to your project using a .claspignore file.

edited May 05 '20 at 20:32

the Tin Man

158,662
42
215
303

answered Sep 05 '19 at 16:59

J King

4,108
10
53
103

How to enable autocomplete for Google Apps Script in locally-installed IDE

5 Answers5

Linked

Related