JavaScript is a language of the Web. This series of articles will talk about my observations learned during my decade of software development experience with JavaScript.

Before moving further let us look at the previous articles of the series:

I believe a good editor makes life easy for a developer. My favorite editor is VSCode.

About VSCode
As stated,

“Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, OS X and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (C++, C#, Python, PHP) and runtimes.”.

In the last series I talked about a few editors, but what makes VSCode awesome? In my point of view VSCode is breath of fresh air. Let’s deep dive:

Command Palette

A very handy tool so developers can fire commands from editor only. Press Ctrl+Shift+P or F1 and a pop up will open,

command

Now you can search your respective command, ex,

command

Extensions

It supports 30+ programming languages out-of-the-box. You can install extensions by opening Command Palette.

Extensions

Select “Install Extension” & you will see a huge list there,

Extensions

You can find extensions available online at marketplace to install:

VS Code also supports APIs that allow you to develop extensions. You can use JavaScript or TypeScript to build your own extensions and debug and test them in VS Code

Tasks

I am in love with this feature of VSCode. You can write your own tasks and VSCode is intelligent to determine and show in task runner list. I have chosen Grunt task runner. Before we move forward, please install NODE & NPM to install node packages. To install grunt use below command

npm grunt install


Open Command Palette and choose “Tasks: Configure Task Runner”

Tasks

VSCode will create tasks.json file. Delete everything and add following code for Grunt task runner

  1. {
  2. // See http://go.microsoft.com/fwlink/?LinkId=733558
  3. // for the documentation about the tasks.json format
  4. "version": "0.1.0",
  5. "command": "grunt",
  6. "isShellCommand": true,
  7. "args": ["--no-color"],
  8. "showOutput": "always",
  9. "tasks": [
  10. {
  11. "taskName": "scripts",
  12. "isBuildCommand": true,
  13. "showOutput": "always"
  14. },
  15. {
  16. "taskName": "sass",
  17. "isBuildCommand": true,
  18. "showOutput": "always"
  19. }
  20. ]
  21. }
With above code we’re creating 2 tasks, i.e., scripts & sass. Now press F1 and type “tasks” and select “Tasks: Run task”. You’ll see sass & scripts added in it,

task

For now, we haven’t installed all modules of Grunt therefore after running scripts you’ll face below error in OUTPUT window. This is beyond scope of this article but Output screen is similar to Visual Studio Editions.

task

Git Integration

VSCode side navigation contains reference to Git repo (Ctrl+Shift+G). You can initialize Git repo and start using Git commands like pull, push, commit etc.

Git Integration

Misc features

Goto line: F1 and type “:” and you can goto line number you want in file,

Compare files: Right click on a file and “select compare file” then right click and select another file to compare.

features

Below view will showcase match/mismatch lines. I don’t use any other file comparison tool because now VSCode provides it.

code

Debugging

The real power of VSCode is debugging capabilities. You will not miss the wonderful experience of Visual Studio Editions here. My next article is dedicated to Debugging capabilities of VSCode, please read once published.

Summary

I would say if you’re using VSCode until now then you must download and try it. It is a developer friendly editor installed by millions of developers. Please share your feedback or comments.
Read more articles on Visual Studio Code: