Skip to content

IDE and other tooling

Erik Vullings edited this page Mar 22, 2015 · 17 revisions

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-,):

  • atom-typescript for typescript support, compiling the current file on save, and performing a rebuild on CTRL-B. Follow the link for other shortcuts.
  • docblockr for helping me write JsDoc documentation on entering /**
  • valign with CTRL-\ to keep everything neatly aligned

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"
    ]
}