Making VS Code | Development a Breeze

Posted on March 12, 2021July 7, 2022

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 🙂

wflMalGoGpmPhWT4lnjqEPUQYAtWAl41wQga cpiq5VjrUDZ2u2oeHVcuW 0MbNOfcdO6MrWFaAWFZNtDcYm8yPqtcR vPdyzowAgUX3Um2W EsGeSuf4hIR7qkNecHSI9I6HUt8IjJy6ad4Q

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.

FBSLV9M2g9HFXuWVbGP

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.

Lau6NfK qmE bZmcvXDX483NcFSbSjII0Rihrk76l4qKB3Ici6XpGmQzFJoT2z8PN5sdf2h9yfWI3FiykDo0JDL7EvZs1PqM2rcMBHjqcbFDgo8yOxYOpdAr yDUYnrfesAPO78cDBd9j Dmtw

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.Z8pkXb8b hETh88yCKhgmUfTgn1M F6zkreyp4rpbDsETxaBkzqM fClrg325yrPGS6a01LVJ8V1UPT9SgOcLkfffuxDZk06imHiCHmIHERQ9jZEy20EQAq9o Sd9tMe8YyQmwp9stROwvw lQ

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.

BmxG9KWpMhUs9co1YQ0dex4Aet 2Ewyoavuqo1o2h5WBb 15DrfZckVn4AGg98 NtLnIm3hKlr5lyuNgAaIbPXKRFX4CFk5XsGaWT9DCzPSGFO9dwZp6lqYLszsQeS7yBjcUYQ8W6rBKMIhG2Q

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.

w3JD4neV0CbqvMWjRRc205OuQAmXvsMW7J3u2AjjXcBVD DPHACEgXBnyFj6ainGVan3dK4qTRy6JxW4ILzW4QXwcMRTlqTd3hdjGETF3vptSvVRTh5SB1h aR tbRLZNPW9e2XPvos3I194Bg

 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

  1. 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.

V8t5TteUe27b1KO wuWXRoIMwjqDUrFFZmfOW5QkH1hAovHKjGfw64T2eKIL6tADpvUT3TwD84VdJ1Gl4xyAgiVMSuBQrEcBu03KpXeFcPugmlFDLZu4aPODM9gv 2dj6nnDPooij c85kYdvA

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

h0A2In8HTvTMMj5cgOwZIhVU3N bVlJWhHJhVp9aig29A9dwGykSUb86TmZ1h4

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.

XFbQeTgmILmMV0CPSv6AfqPPFtt s7AmC HqzC1FLXBnwwKZblosZDcMtLo0uLDpf88PzkB75AYL5RuO7ACblHj tSbQqo7ukhOFc HCTHYxaks7v5VP0IgE50gffZy6kUngEcgl X27W CN1w

  1. 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.

9Lv3RHhMhdlHjbeke8X OGikwprbf3QhsQGuLQCGyhSxXUAMtE38SsRS3OWzxIDcw5wQ5tfG22emCWEZA02Xv0gzG0

These extensions will make your life easier.

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

  1. 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.

bkIyoPxIkMdMgWCO6r6qC4vr55Ys3PoO9n99Rf7X hbLf4PK01eoP8JF

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

  1. 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.

kDJIb8KjDSA4qlecKOOUuApt0xop5YaFO gQBcqE9B5AfsI2vBhY9MbH4YbhPfND8Iria7eLHRSRFoaVuYSRYwRocO0MUo Pis0gE DCkG K19m 3qf7ymJSQj00zCkgX86 OuYH4moD9KTrtQ

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.

BNN9X01ywaQJFrufDjNkbwfePziZ3rEQk7Rlgpv joBzkXaZFVBfv0TGL74WjkXyYBlIFR zq7s2vk4zahP 7Kdy 6PFaepBCxpHKOWBelvtnY7tUvadfBTQW y Z693gzFo0VcnGahS0nGSiQ

 Minimap

MEdnzocxeKZbeV3jfB2dd6pDkDygHuC8Vgo2DM

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.hEqZldTgLW1UwVbFMq8OVM07Q3qAdWbQdfdQfvFoj6jdzZV 7y ME8oRl4D43Gr8NkagP539 fMugKE9zzj5c7oQCrVZg7L55pCrcROHEDw62Wja a4nqF5ajRFfAmBEUoNunSaisRQJjCwVQ

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 SideBarStatus Bar, and Activity Bar.

4 3CnXNaLFy5C5XxcTJAKF8

 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

ZYNVde55IHmxcziRoYlyOycFj2AccOzC4wapcUsj hMrizVE48jSgRH2UAIl8S4dWT9WdOrdQC1bxn36k0RWth56BBcvG 5 4DmtyR1pb62hp9hK0IvvylRT0shqPRwLE35cZHCHE RSFhtjBw

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.P6pgFikif OnTU bvEmTwhvOovazVgQJa BdqPzwfIeolni2 Sci1zdmUDgeY5C9KnSzi2eoyTx8aJzfA PsMdfWF2lwqVphmg nUYREuXfJAXnFC R2q88eMuIZi2scG5 yvNh3iZsShyfbmg

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.

qag6by46RNOIn7fr700cHPHQD5Hk0kO8bDgZ

 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.

Similar Posts

logo think create apply new 2 2048x525 1
Group 271
Group 545 4
Group 270

Launching New
3D Unity Course