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. I've started using Visual Studio, but lately I've switched to Atom, which is more light-weight and responsive. Here's why.

Visual Studio

Initially, I've used Visual Studio 2013 with the nodejs tools extension to work on this TypeScript project. Although the environment is quite niceand familiar, there are still many rough edges. Among others, I 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

More recently, I've started using 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 I've started 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"
    ]
}