Is VS Code an IDE?

First of all, let’s get one thing cleared away. What is an “IDE”?

IDE is an Integrated Development Environment for developing some software. Usually, the text editor helps edit text. However, in recent years, text editors have gone far beyond editing text due to plugins.

l

Now VSCode, short for Visual Studio Code, is just a glorified code editor which is highly extensible. So, with the right plugins and instructions, a developer can coax it into being the most productive development tool.

I would say that the boundary between text editors and IDEs is increasingly blurred. What lies between them is less technical and more personal or conventional. In short, I can conclude the following:

It is not a complete IDE without its extensions. But it is even a lot more than an IDE with its extensions.

 Why should I use VS Code over other IDEs?

First, let’s see some other popular choices we have:-

• IntelliJ IDEA
• Eclipse
• PyCharm
• Atom
• Jupyter Notebook
• Code::Blocks
• NetBeans

Now, how does VS Code match up to these proper IDEs? Let’s explore.

Here, I will just mention the comparison. Then, you can read further to know in detail to know how to use particular features and why exactly I claimed something during the comparison.

Now, IntelliJ IDEA, to put it simply, is a MEMORY HOG and the performance is not up to the mark on low end devices. On the other hand,   VSCode is as light as a feather. (Unless you load it with hundreds of extensions 🙂

Developed by the Eclipse Foundation Eclipse, eclipse is a good IDE, and you can code in Python/ Java/ C++ on any kind of OS; and is even free to use. But you can’t use it for Web Development, and the customization is lacking compared to VSCode.

PyCharm is one of the most famous IDE for coding in Python, which is the shortcoming. Of course, it’s just for Python, but you would have to download different software for different languages.

Developed by the ‘GitHub’ Atom, it is mainly used for web development. It’s an open source and cross-platform. It is highly customizable and has many useful plugins like VSCode. Atom has an attractive interface and a color-coded syntax. But the disadvantage is that it suffers from high start-up time.

Jupyter Notebook isn’t a full-fledged IDE, it is an open-source web-based application. It is widely used in data science, scientific computing, and machine learning. It is used with Python and is just experimental with other languages. However, you can’t even create simple .py scripts or code in various languages with it.

The problem in Code Blocks and NetBeans is the same; they are outdated and just don’t have enough functionality, not to mention the theming.

 Features

1. Cross-Platform

Visual Studio Code supports macOS, Linux, and Windows, so you can hit the ground running, no matter the platform.

Download it here: https://code.visualstudio.com/download

2. Editing, building, and debugging

At its heart, Visual Studio Code features a lightning-fast source code editor. With support for hundreds of languages, VS Code helps you be instantly productive with syntax highlighting, bracket-matching, auto-indentation, box-selection, snippets, and more; it is a great code editor. Intuitive keyboard shortcuts and easy customization are some features.

Visual Studio Code includes built-in support for IntelliSense code completion, rich semantic code understanding and navigation, and code refactoring.

Debugging is often the one feature developers miss most in a leaner coding experience, so we made it happen. Visual Studio Code includes an interactive debugger, so you can step through source code, inspect variables, view call stacks, and execute commands in the console.

 VS Code also integrates with build and scripting tools to perform common tasks, making everyday workflows faster. In addition, VS Code supports Git, so you can work with source control without leaving the editor, including viewing pending changes diffs. One can integrate even Cloud within VS, whether G-cloud, Azure, or AWS.

3. Customisable

Customize every feature to your liking and install any number of third-party extensions that support these languages and many more. While most scenarios work “out of the box” with no configuration, VS Code also grows with you. You can install extensions to your linking, whether GitHub related, docker related, html related, and so on.

These extensions will make your life easier.

And while we’re on that, keep in mind that there are thousands of themes, you can customize your look.

These extensions will make your life easier.

And while on that, there are thousands of themes and you can customize your own look.

4. Built with love for the Web

VS Code includes enriched built-in support for Node.js development with JavaScript and

TypeScript, powered by the same underlying technologies that drive Visual Studio. VS Code also includes great tooling for web technologies, such as JSX/React, HTML, CSS, SCSS, Less, and JSON.

There are also extensions present to run live development servers for web design.

5. Robust and extensible architecture

Architecturally, Visual Studio Code combines the best of web, native, and language-specific technologies. Using Electron, VS Code combines web technologies such as JavaScript and Node.js with the speed and flexibility of native apps. In addition, VS Code uses tools service architecture to integrate with many of the same technologies that power Visual Studio, including Roslyn for .NET, TypeScript, the Visual Studio debugging engine, and more. The extensions can’t be stressed enough.

At its heart, Visual Studio Code is a code editor. Like many other code editors, VS Code adopts a common user interface and layout of an explorer on the left, showing all of the files and folders you have access to, and an editor on the right, showing the content of the files you have opened.

 Basic Layout

VS Code UI is divided into 5 main areas: –

• Editor – The main area to edit your files. You can open as many editors as you like side by side, both vertically and horizontally.
• Side Bar – Contains different views like the Explorer to assist you while working on your project.
• Status Bar – Information about the opened project and your editing files.
• Activity Bar – Located on the far left-hand side, this lets you switch between views and gives you additional context-specific indicators, like the number of outgoing changes when Git is enabled.
• Panels – You can display different panels below the editor region for output or debug information, errors, warnings, or an integrated terminal. One can also move the panel to the right for more vertical space.

Each time you start VS Code, it opens up in the same state it was when you last closed it. The folder, layout, and opened files are preserved.

Open files in each editor are displayed with tabbed headers (Tabs) at the top of the editor region (like web browser tabs).

 Side-by-side-editing

You can open as many editors as you like side by side vertically and horizontally. If you already have one editor open, there are multiple ways of opening another editor to the side, like just click on the other file, so it also has its tab above the editor area, then just drag and drop. And we are done with Grid style editing.

You can even move the panel’s location with the terminal.

Tabs

Visual Studio Code shows open items with Tabs (tabbed headings) in the title area above the editor. For example, when you open a file, a new Tab is added for that file.

 Minimap

A Minimap (code outline) gives you a high-level overview of your source code, which is useful for quick navigation and code understanding. A file’s minimap is shown on the right side of the editor. You can click or drag the shaded area to quickly jump to different sections of your file.

 Breadcrumbs

The editor has a navigation bar above its contents called BreadCrumbs. t shows the current location and allows you to quickly navigate between folders, files, and symbols.

 Explorer

The Explorer is used to browse, open, and manage all your project files and folders. VS Code is file and folder-based, and you can start immediately by opening a file or folder in VS Code.

After opening a folder in VS Code, the folder’s contents are shown in the Explorer. You can do many things from here:

• Create, delete, and rename files and folders.
• Move files and folders with drag and drop.
• Use the context menu to explore all options.

You can even search and filter files and the data inside the files.

 Activity Bar

The Activity Bar on the left lets you quickly switch between Views. You can also reorder Views by dragging and dropping them on the Activity Bar or remove a View entirely (right-click Hide from Activity Bar). It can be seen on the left side of the above picture.

 Command Palette

VS Code is equally accessible from the keyboard. The most important key combination is Ctrl+Shift+P, which brings up the Command Palette. For example, from the View menu, you can hide or toggle various parts of the user interface, such as the SideBar, Status Bar, and Activity Bar.

 Configuring the editor

VS Code gives you many options to configure the editor. From the View menu, you can hide or toggle various parts of the user interface, such as the SideBar, Status Bar, and Activity Bar.

 Settings

Most editor configurations are kept in settings that one can modify directly. You can set options globally through user settings or per project/folder through workspace settings.

Actions to perform:

• Select File > Preferences > Settings

(Or press Ctrl+,) to edit the user settings.json file.

• To edit workspace settings, select the WORKSPACE SETTINGS tab to edit the workspace settings.json file.

Zen Mode

Zen Mode lets you focus on your code by hiding all UI except the editor (no Activity Bar, Status Bar, Side Bar, and Panel), going to full screen, and cantering the editor layout. Zen mode can be toggled using View menu, Command Palette, or the shortcut Ctrl+K Z. Double Esc exits Zen Mode.

One can edit the defaults in the settings. As you can see in the image, we see just the code and nothing else.

Key Bindings

Visual Studio Code lets you perform most tasks directly from the keyboard. The following way lists the default bindings (keyboard shortcuts) and describes how you can update them.

First press Ctrl + Shift + P, then search and select the Open Keyboard Preferences. Then, you can just search and learn/update the keybind.

 Keymap extensions

Keyboard shortcuts are vital to productivity and changing keyboarding habits can be tough. To help with this, File > Preferences > Keymaps shows you a list of popular keymap extensions. These extensions modify the VS Code shortcuts to match those of other editors, so you don’t need to learn new keyboard shortcuts. There is also a keymap category of extensions in the Marketplace.

 Conclusion

VSCode is as great a tool as you want and make it to be. So just keep using it, keep learning new tech and keybinds, and most of aSo just keep using it, keep learning new tech and keybinds, and most of all, keep coding.

Do you wish to learn more about the 4 W’s of coding? If you do, click on this link.