What is VSCode

What is VSCode, the full name of VSCode is Visual Studio Code, but the full name is so long that many users like to call it VSCode, which is officially defined as a free, open source cross-platform editor. I think the emphasis on "editor" is because VSCode is not intended to be a full-size integrated development environment, or IDE.

Many people equate editors with IDEs, but this is not true from a professional point of view. IDEs are more concerned with out-of-the-box programming experience, often have a good intelligent understanding of the code, while focusing on engineering projects, for code debugging, testing, workflow and other graphical interface support, so relatively bulky, Java programmers commonly use Eclipse positioning is the IDE; while the editor is relatively lighter, focusing on files or folders, language and workflow support is more rich and free, VS Code positioned itself in the direction of the editor, but is not completely limited to this.

If you are interested, you can open your favorite editor’s website to see how it is positioned. In general, the popular trend in recent years is a lightweight editor, which is also the general trend.

To understand the design thinking of VSCode code editor, you need to look at the development trajectory of VS Code first. From my point of view, whether you are learning a programming language, or a framework, or an editor, you should first look at its ins and outs, understand how they have evolved, what problems they have encountered and how they have been solved, all this information facilitates you to improve your understanding of the nature of things in the big picture.

VSCode History

In late 2011, Microsoft brought Erich Gamma, co-author of the book Design Patterns, who invented JUnit with Kent Beck and led the development of Java development tools at IBM, on board from IBM. Microsoft brought him on board to create an online development tool that would give developers an IDE-like development experience in the browser, which became known as Monaco Editor.

Erich Gamma witnessed the entire journey of Eclipse from its rise to its gradual bloat and then gradual decline, and he deeply realized that part of the reason for Eclipse’s success was its extreme customizability, and any functionality could be implemented in Eclipse with plug-ins; however, since Eclipse’s plug-ins run in the same process as the core code, as the number of plug-ins increases, the core functionality is often bogged down by plug-ins, which makes it even more unwieldy.

As a result, when building Monaco Editor, the development team focused heavily on the performance of the core functionality, keeping it as light as possible, while the more resource- and performance-hungry features ran in other processes.

In 2015, Erich Gamma led the team that ported Monaco Editor to the desktop platform, the protagonist of this column, Visual Studio Code, or VS Code.

VS Code inherits the design principles of Monaco Editor, the core of which is to be a high-performance lightweight editor; the personalized features are left to the plug-in system. This can be said to be inherited from Eclipse, but at the same time learned from Eclipse, the plug-in system runs outside the main process, highly customizable but at the same time controllable.

At the same time, VS Code has its own mission, which is to give developers an IDE-like development experience in the editor, such as intelligent understanding of source code, graphical debugging tools, versioning, and more.

It is easy to see that VS Code wants to find a balance between the editor and the IDE. With this design in mind, you can open the editor, start using it without creating any project files, and manipulate text efficiently and conveniently; you can get syntax checking and smart hints with the support of programming language plugins; and you can extend VS Code to meet your needs with a rich plug-in API.

It can be very difficult to achieve such goals, but VS Code achieves good results. The reason for this, in my opinion, is that Microsoft has created an open platform. Although it’s a bit of an "afterthought", let’s take a look at how such an open platform helps VS Code.

VSCode is the open source and open platform

First, VS Code’s source code is open source under the MIT protocol. This means not only that the core VS Code code is freely available to everyone, but also that the community can develop their own products based on VS Code code.

Some of the more well-known VS Code based projects in the industry are SourceGraph, StackBlitz, CodeSandbox, etc. These products provide a development experience that is very close to VS Code, and VS Code often draws valuable technical and product-level lessons from them.

Secondly, the development process and feedback channels are open. VS Code source code is hosted on GitHub, and GitHub is used to manage the development schedule and testing of projects, and every user can see the progress of VS Code development on GitHub. At the same time, GitHub is the only feedback channel for VS Code, and the development team coordinates feedback based on its level of impact. As a user, you can communicate with the development team in near real time to see what’s going on with the product.

Once again, the interface is open. VS Code comes with TypeScript and Node.js support, so users can download VS Code and immediately get smart tips for writing JavaScript and TypeScript, and immediately debug Node.js code without any configuration. With a team of Node.js experts at its core, and TypeScript being an official Microsoft product, it doesn’t seem like a surprise that VS Code does a good job of supporting both languages. But the VS Code team can’t be fluent in all languages, so how can VS Code support languages they’re not familiar with?

There’s no better way than to leave it to the professionals to do what the professionals do. To that end, VS Code provides a unified API for programming language workers, the Language Server Protocol and the Code Debugging Protocol, so that each language can implement both APIs for an IDE-like development and debugging experience on VS Code.

And VS Code doesn’t give TypeScript a small start just because it’s a Microsoft first, but treats everyone the same. For example, the language support for Rust is developed and maintained by the official Rust team, who are arguably the most knowledgeable group of people in the world about how to do syntax support for Rust.

In such a platform, editor developers, programming language workers, and the community each do what they do best, and do their part to the best of their ability. The technical practices and results of VS Code are also given back to the community in the form of open source, so that everyone can use VS Code to build their own products and succeed together.

VSCode Learning Path

After a brief history of VS Code, if you also share its design philosophy and mission, you must also want to know how to translate this set of VS Code into your own internal power. In my first talk, "What should I ‘learn’ about editors?" I talked about the general approach to editor learning, and it applies to VS Code. You can follow these three steps to master VS Code step by step. 1.

1. Use of the core editor. VS Code has its own set of shortcuts that you can learn to use to learn the features supported by the core editor. Also, VS Code allows custom mapping of shortcuts, so if you have your own set of familiar shortcuts, you can use them seamlessly on VS Code. In addition to shortcuts, VS Code has full support for mouse operations, multiple cursors, and search; VS Code is also on par with IDEs in terms of programming language support, with auto-completion, code snippets, and more. With the core editor, VS Code can be your everyday general-purpose editor. 2.

2. The use of workstations and work areas. In addition to the editor area, there are many other features in VS Code, such as explorer, cross-file search, and plugin management, which together form a unified interface we call the workbench. The design of this workbench represents VS Code’s choice of workflow. The built-in software versioning, terminal emulator, debugger, etc., are VS Code’s "hand-picked" tools to further enhance productivity.

3. VS Code customization and plug-in development. As a tool with millions of users, the default settings for many features can’t satisfy everyone or every work scenario, so you can learn how to customize VS Code’s components so that you can’t always follow the rules.

With these three steps, you’ll be able to "do whatever you want" with VS Code. It’s also worth subscribing to the official VS Code blog, where members of the team share their insights on the development process and are at the forefront of technology sharing.