Debugging websites with Visual Studio code

Posted on 7/11/2015 @ 12:42 AM in #Vanilla .NET by | Feedback | 7713 views

Visual Studio Code – is that new fancy IDE Microsoft released. Actually, IDE isn’t the right word. It’s more of an editor. For those of us (including me) who have used Visual Studio for years will find Visual Studio code much less featured. My biggest gripe is, it’s not very search engine friendly – literally everything I search for brings me to a page about help about Visual Studio IDE, not Visual studio code.

Anyway, so the thing is, the Visual Studio code (editor) is actually how the new kids are writing code lately. People don’t like heavy duty IDEs like XCode or Visual Studio, those are being relegated to compiled languages. In this new web friendly JavaScripty/TypeScripty, CSS/SASS/LESS world, you need a newer approach. The most popular editors are sublime, brackets, and atom. Microsoft took atom, and forked it into Visual Studio Code.

While I write this, the latest version is 0.5.0. I am sure more features will be added, but one feature I sorely miss – being able to write a simple website using this IDE.
In brackets I can hit a live preview button, it launches a web server, and I am debugging happily. But brackets has poor support for grunt/gulp/typescript/code formatting, and one thing I REALLY miss, is search within files. Brackets doesn’t have good source control integration either.

This is where Visual Studio code excels. I want to write TypeScript, and not have 3 terminal windows minimized running tasks (or background tasks). I want F5 or ⇧⌘B and be able to run the “project” – I want my TypeScript compiled, I want my CSS generated, minification done, and I want to launch the browser and edit stuff. If I edit a file, I want it to be instantly available .. especially if it is a scss or ts file. Sometimes when working with quirky CSS issues, I want live reload. And I don’t want to run  terminal commands, before I can start “working”. I want it all to be seamless – as a project, that I can check into source control. That another team member can grab and use – WITHOUT any setup. Speaking of source control integration, Visual Studio code has pretty good integration with git.

Anyway, this blogpost is about “How to setup a simple environment where you can write  a website using Visual Studio Code”.

The trick is, Visual Studio code has integration with gulp task runner. So,

1. Install gulp

$ npm install --global gulp

2. Install gulp in your project

$ npm install --save-dev gulp

3. Install gulp-connect, which is a pretty awesome webserver called Connect written purely in JavaScript,

npm install --save-dev gulp-connect

4. Create a gulpfile.js in the root of your www folder .. and author the following code in it,

   1:  var gulp = require('gulp');
   2:  var connect = require('gulp-connect');
   4:  gulp.task('build', function () {
   5:    connect.server();
   6:  });
   8:  gulp.task('default', ['build']);

5. Next, in your ./settings/launch.json file add the following,

   1:  {
   2:      "version": "0.1.0",
   3:      // List of configurations. Add new configurations or edit existing ones.  
   4:      // ONLY "node" and "mono" are supported, change "type" to switch.
   5:      "configurations": [
   6:          {
   7:              // Name of configuration; appears in the launch configuration drop down menu.
   8:              "name": "node gulp.js ..",
   9:              // Type of configuration. Possible values: "node", "mono".
  10:              "type": "node",
  11:              // Workspace relative or absolute path to the program.
  12:              "program": "./node_modules/gulp/bin/gulp.js",
  13:              // Automatically stop program after launch.
  14:              "stopOnEntry": true,
  15:              // Command line arguments passed to the program.
  16:              "args": [],
  17:              // Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
  18:              "cwd": ".",
  19:              // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
  20:              "runtimeExecutable": null,
  21:              // Optional arguments passed to the runtime executable.
  22:              "runtimeArgs": [],
  23:              // Environment variables passed to the program.
  24:              "env": { },
  25:              // Use JavaScript source maps (if they exist).
  26:              "sourceMaps": false,
  27:              // If JavaScript source maps are enabled, the generated code is expected in this directory.
  28:              "outDir": null
  29:          }, 
  30:          {
  31:              "name": "Attach",
  32:              "type": "node",
  33:              // TCP/IP address. Default is "localhost".
  34:              "address": "localhost",
  35:              // Port to attach to.
  36:              "port": 5858,
  37:              "sourceMaps": false
  38:          }
  39:      ]
  40:  }

6. Finally, in your ./settings/tasks.json file, add the following,

   1:  {
   2:      "version": "0.1.0",
   3:      "command": "gulp",
   4:      "isShellCommand": true,
   5:      "args": [
   6:          "--no-color"
   7:      ],
   8:      "tasks": [
   9:          {
  10:              "taskName": "build",
  11:              "args": [],
  12:              "isBuildCommand": true
  13:          }
  14:      ]
  15:  }

So what we did in steps #4, #5, and #6 – defined a build task, which will launch everytime I press ⇧⌘B. And VS Code will use node gulp.js as our startup task.

That’s basically it! Press ⇧⌘B, and start writing JavaScript and HTML, and debug – like say you’d do in Visual Studio :-).

And if you wish to add support for TypeScript or SCSS in your project, just add more tasks in tasks.json (well actually they are already there, you just need to uncomment them).

Also, the gulp connect server has support for watching filesystem and do live reloads. I don’t like to enable that usually since live reload can mean the equivalent of F5, which totally looses my state.

But now, you have an awesome IDE/Editor ready for all your web/cordova work.

That wasn’t hard at all, was it?

Sound off but keep it civil:

Older comments..