Typescript testing workflows - part 2: Integrating editors

Re-cap(uccino)

In my previous post, I walked through some basics with gulp, typescript and mocha.

Integrate with $env:UsersFavouriteEditor

Because gulp is just another node application, we can integrate it to any number of editors, to use key bindings or buttons to mash when building.

I’ve provided some examples of popular editors:

• VS Code
• Atom
• Sublime Text 3
• Brackets
• Vim
• Visual Studio

Visual Studio Code

VS Code uses its own task runner and a tasks.json file to integrate your projects chosen runner. If you hit Ctrl+Shift+B without this file, VS Code will create a sample for you.

Below is an example that utilizes gulp and uses the gulp-tsc ‘problemMatcher’ (think: output formatter) to yield any problems to the IDE.

./.vscode/tasks.json

{
    "version": "0.1.0",
    "command": "gulp.cmd",
    "isShellOutput": true,
    "showOutput": "always",
    "tasks": [
        { "taskName": "default", "isBuildCommand": true, "isTestCommand": true, "problemMatcher": "$gulp-tsc" },
        { "taskName": "some:other" }
    ]
}

You can also create a key bindings easily, by choosing File -> Preferences -> Keyboard Shortcuts. > HINT: If you use the Ctrl+K, Ctrl+K key chord while the shortcut editor window is focused, you get some neat assistance for making the entries. Also, the list of unused, available commands are listed at the bottom of the global file in the left pane.

Here’s mine (I’ve bound Run Task to Shift+Alt+T)

[
    { "key": "shift+alt+t", "command": "workbench.action.tasks.runTask", "when": "editorFocus" }
]

Once saved, isBuildCommand and isTestCommand bind to Ctrl+Shift+B and Ctrl+Shift+T respectively as well.

Atom

Atom has a diverse range of packages that you can add. You can even automate this with apm. Here I’ll use apm to install gulp-control for a graphical gulp experience.

apm install gulp-control

Once installed just open gulp-control with Ctrl+Alt+O. This gives you large buttons to mash when building is required.

Sublime Text 3

Sublime Text 3 has a great site for package management that integrates with the editor. I’ve found the Sublime Gulp package to work well: https://packagecontrol.io/packages/Gulp

1. Install package control https://packagecontrol.io/installation
2. Ctrl+Shift+P (Ctrl+Command+P) to open the command pallette
3. Type ‘install package’ wait for the repo to index
4. Reboot sublime (!)
5. Repeat step 2
6. Type ‘Gulp’

Once Installed open the command palette (Ctrl+Shift+P), type gulp, then select the task you want to run.

Brackets

The Brackets community also enjoys a huge variety of packages. There is a brackets-gulp package that is no longer maintained, and the owners advice appears to be ‘use brackets-shell’

1. File -> Extensions Manager -> Search -> ‘brackets-shell’
2. install brackets-shell
3. There will now be a shell icon right of screen, click it and type ‘gulp’ in the console bottom screen.

type ‘gulp’ to run your build

Vim

I highly recommend using vim-plug for automating plugin installation over the traditional method of self management.

Vim has a nice little gulp wrapper plugin called gulp-vim which is easy to install and use.

1. Install vim-plug (instructions)
2. Configure to use gulp-vim

:e ~\.vimrc

call plug#begin
Plug 'KabbAmine/gulp-vim'
call plug#end

:wq
<reopen>
:PlugInstall

1. now cwd to your source and start using it:

:cd /path/to/source
:Gulp <task_name>

Visual Studio

Visual Studio now has an in built, grunt/gulp aware Task Runner Explorer that requires no steps to configure.
Open the explorer with Ctrl+Alt+Bkspce and it will inspect available gulpfiles for tasks to run. IMO this works best in conjunction with Node Tools for Visual Studio to provide nodejs debugging where required.

Final thoughts

It is no surprise really that with the diversity of OSS actors, that we would end up with build technologies that are reasonably decoupled from IDE’s and indirectly result in a high degree of developer choice.

Its certainly an exciting time to be a developer!