Zack Lovatt | 2d Technical Director

Bitbucket GitHub LinkedIn Skype Vimeo
May 19, 2018

Visual Studio Code Stuff

Posted In: etc, expressions, scripting

At this point, the majority of my work is in developing scripts for Adobe After Effects. The language used here (Extendscript) is a fork of ES3 from 1999. It’s old. This means that we’re limited to very, very vanilla javascript when we develop, with polyfills or helper libraries taking a lot of the headache out of this process.

I use Visual Studio Code as my one and only code editor. Apart from providing a wonderful development experience, you can sort of trick it into using some modern functionality when you write, even though it’s not quite expecting it (and there are a few hiccups).

Very rarely, I get asked about my preferred extensions & settings, so! Here is more or less how I use it. The writeups, settings and extensions listed below are solely a reflection of what I currently work on; as I grow and evolve, so do my needs and preferences.


Native Features:

Workspace

Unlike Sublime, vscode doesn’t exactly have a sense of a single, coherent workspace — just folders containing files, and maybe the folder is also a git repo.

Once a workspace is initialized, you can do all sorts of fun things like hovering over function calls and seeing the jsdoc comment from it, the source code, being able to jump to the definition, renaming all uses of that function name, and so on. You also get code completion, being able to start typing a module name and have vscode prompt you with a list of the available functions & properties in that module.

You can initialize a workspace by adding a jsconfig.json or tsconfig.json file in the root, telling vscode that this is a javascript or typescript project. For our needs, I use a really simple jsconfig file:

{
  "compilerOptions": {
    "checkJs": true,
    "target": "ES3"
  }
}

 

Typings

I include this set of type definitions in my projects, so that vscode autosuggests properties, methods for AE components, or throws an error if I’m doing something funky.

Using these typings also means that you can specify a jsdoc param/return type as {Layer} and it’ll behave as you’d expect. Cool!

 

Build

Most of my projects are structured around a gulp-centric workflow for building, linting and bundling (and then minification, obfuscation and zipping deliveries when it comes to it).

vscode lets you define and run tasks directly in-app, so I no longer need to keep a terminal window running in order to have my watch task or specific build tasks running (concurrently!). You can also define a “Problem Matcher” in your build task, so that any issues your linter throws will show up natively in vscode, letting you jump directly to that line / column / file.

This feature set also gives you instant “build” shortcuts, letting you trigger a rebuild whenever you want.


Extensions:

Adobe Script Runner

Align

Bracket Pair Colorizer

Document This

ESLint

One Dark Pro

Prettify JSON

Prettier

Settings Sync

vscode-icons


Settings:

Here are my vscode settings.

{
  "editor.colorDecorators": false,
  "editor.cursorBlinking": "phase",                // Blink animation is important :)
  "editor.formatOnSave": false,                    // Auto-pretty on save?
  "editor.renderWhitespace": "boundary",           // I want to see tab/space characters everywhere except between words
  "editor.rulers": [                               // Let me see if my line is getting too long
      80,
      100,
      120
  ],
  "editor.tabSize": 2,
  "editor.wordWrap": "off",                        // I don't like word wrap.
  "search.useIgnoreFiles": true,                   // vscode should respect my .gitignore file when searching
  "window.zoomLevel": -1,                          // For whatever reason, vscode default font is so BIG. Shrink it.
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "vscode-icons",
  "workbench.startupEditor": "newUntitledFile",    // "New File" actions should show a new, untitled file

  "files.eol": "\n",                               // Use "\n" for end of line
  "files.exclude": {
      "**/.git": true,
      "**/.svn": true,
      "**/.hg": true,
      "**/CVS": true,
      "**/.DS_Store": true,
      "**/.next": true
  },
  "files.insertFinalNewline": true,                // Always insert a new line at end of file
  "files.trimTrailingWhitespace": true,            // Every time I hit 'save', trim any extra space characters on lines

  // Settings Sync Stuff
  "sync.gist": "xxxxxxx",
  "sync.askGistName": false,
  "sync.autoDownload": false,
  "sync.autoUpload": false,
  "sync.forceDownload": false,
  "sync.host": "",
  "sync.lastDownload": "",
  "sync.lastUpload": "2018-04-07T22:40:39.145Z",
  "sync.pathPrefix": "",
  "sync.quietSync": false,
  "sync.removeExtensions": true,
  "sync.syncExtensions": true
}
0 Comments

Would you like to share your thoughts?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.