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
“
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
- {
-
-
- "version": "0.1.0",
- "command": "grunt",
- "isShellCommand": true,
- "args": ["--no-color"],
- "showOutput": "always",
- "tasks": [
- {
- "taskName": "scripts",
- "isBuildCommand": true,
- "showOutput": "always"
- },
- {
- "taskName": "sass",
- "isBuildCommand": true,
- "showOutput": "always"
- }
- ]
- }
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: