IDE and other tooling

Tooling

What tools do you use to code? Here, two IDE's will be discussed: the free version of Visual Studio Community Edition, and Atom, which is more light-weight and responsive.

Visual Studio 2013

The out-of-the-box experience for programming TypeScript in VS2013 is a bit limited, so you have to pimp VS with the nodejs tools extension to improve your experience. Although the environment is quite OK, with Intellisense and code completion, there are still many rough edges. Among others, you have to disable Resharper, as it doesn't play nicely with nodejs. Furthermore, start-up time is slow and memory consumption is high. But if you are sticking to it, you should also use the TaskRunner extension to start the default gulp script on opening the solution.

Atom

An open source alternative is the open source Atom editor and a couple of plugins (which can be installed using the shortcut Ctrl-,) or, alternatively, using the atom package manager from the command line (comes default with atom). In my case, I've used the latter approach, and installed the following list of packages:

apm install linter
apm install autocomplete-plus
apm install atom-typescript
apm install gulp-control

• atom-typescript for typescript support, compiling the current file on save, and performing a rebuild on F6. Follow the link for other shortcuts.
• gulp-control to open a panel (CTRL-ALT-O) to start the default gulp task.

---

Gulp is used as a post-build event manager, e.g. copying csComp.d.ts and csComp.js from the csComp project to the csMap project, or transforming a directive's HTML template (*.tpl.html) to a *.ts file which can be easily included.

• valign with CTRL-\ to keep everything neatly aligned
• Enhanced tabs to make switching between tabs with CTRL-TAB more like the experience that VS offered. So instead of switching between the tabs in the order that they are shown in the editor, switch between the most recently used tabs first.

The atom-typescript plugin uses the tsconfig.json file for determining what to include, and below you can see an example. Or read more here. The filesGlob expands to a list of files to include (that's what the ./**/*.ts part does), and a number of files to exclude (starting with a !). I've excluded the node and bower module folders, since they contained *.d.ts files that were already specified elsewhere too, and those make the TypeScript compiler whine about duplicate entries.

As we are dealing with at least two projects, csComp and (a derivative of) csMap, you probably also need two running instances of Atom, one for each project, and each with its own tsconfig file. I haven't found a way to create a multi-project solution file with Atom like Visual Studio does. Drop me a note if you know how to do that, please.

BTW note that you need to start the excluded folders with !./node_modules/**/*.d.ts. I've come across examples where they used !node_modules/**/*.d.ts', so without the leading ./`, but that didn't work for me under Windows, and those files were still included.

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "declaration": false,
        "noImplicitAny": false,
        "removeComments": false,
        "noLib": false
    },
    "filesGlob": [
        "./**/*.ts",
        "!./node_modules/**/*.d.ts",
        "!./public/bower_components/**/*.d.ts"
    ]
} 

Built process

The built process consists of the following steps:

• Clone csWeb and csMap.
• Please keep the following folder structure: root\csWeb, root\apps\csMap in order for gulp to work well
• In the folders csWeb\csComp, csWeb\csServerComp and csMap you need to run 'npm update'
• In csMap\public you also need to run 'bower update'

On a day-to-day basis, you also need to:

• Start gulp in csMap
• Open csWeb/csComp, csWeb/csServerComp and csMap in Atom en built them (F6).
• In csMap, you can start “node server.js”