Hi, I’m your cat brother, the super cat who doesn’t like to eat fish and doesn’t like cats

How to find good open Source projects? Check out GitHub’s Tips for Finding Good Open Source Projects

1. code-server

Once code-Server is configured on the Server side, you can use VS Code on any browser.

The goal of Code Server is to create a convenient and unified development environment for developers to write code from any device, anywhere through the browser. This eliminates the problem of environment setup in the normal IDE development process.

The first problem code Server addresses is environmental consistency across devices. Because Code Server is always running in a remote cloud environment, its development environment is always consistent and there are no problems with different platforms or devices running the same code.

Github.com/coder/code-…

2. monaco-editor

Monaco Editor is an open source online code Editor. It is the Monaco Editor browser version of VSCode, which has become popular in recent years. At present, there is some tendency to catch up with their predecessors.

The Monaco Editor is a browser-side Code Editor library that is also used by VS Code. The Monaco Editor can be thought of as an Editor control that provides only the basic Editor and language-specific interface and can be used in any project built on Web technologies, while VS Code is desktop software with file management, version control, plug-ins, and more.

Github.com/microsoft/m…

3. Vim

VSCodeVim is the Vim emulator for Visual Studio Code.

Github.com/VSCodeVim/V…

4. vscode-drawio

IO is a website tool that supports online drawing. It is popular with many users because of its simple and intuitive interface and rich and powerful functions.

As we can clearly see from the figure above, draw. IO has a comprehensive set of features that can easily meet our daily graphics needs.

IO also allows users to save graphics to cloud drives such as Google Drive, One Drive and GitHub repositories, so that users can sync and read them at any time.

Due to the large number of people using the tool, the developers also carefully translated the international copywriting. Therefore, students who are not good at English should not worry too much.

With VSCode now fully integrated with DRwa. IO, users can instantly experience all the core features of Draw.

Github.com/hediet/vsco…

5. vscode-debug-visualizer

When we write code, the most troublesome thing is that it is very difficult to locate the error, especially when the code is very long and the error is hidden deeply, whether it is debugger, console.log, or the browser debugging tool to break the point, you need to slowly troubleshoot the error one by one.

All these debugging methods require our brain to think and sort out errors. Is there a more convenient way to show us the results in the form of pictures and the process?

Here we introduce a magic tool: VScode-debug-Visualizer

It provides a way to show the process of forming data structures in the form of diagrams, such as trees, tables, curves, graphs, and so on.

This form of presentation can not only help us in code debugging, but also in learning data structures, algorithms, brush Leecode can be used, it will let you see the process of data generation very clearly.

Github.com/hediet/vsco…

6. vscode-gitlens

GitLens enhances Git in VS Code and unlocks the undeveloped knowledge in each repository. It helps you visually visualize code authorship through Git blame comments and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights through rich visualizations and powerful comparison commands, and much more.

GitLens simply helps you understand your code better. Quickly learn who changed lines or blocks of code, why, and when. Review history to further understand how and why code evolved. Easily explore the history and evolution of the code base.

Today, GitLens has been installed more than 13 million times and downloaded nearly 79 million times, and is loved and relied upon by millions of users, from individual developers to large enterprise teams.

Github.com/gitkraken/v…

7. polacode

The vs Code Screenshots beautification plugin makes it easy to create beautiful code screenshots.

Github.com/octref/pola…

8. codetour

CodeTour is a VS Code plug-in that allows you to record and replay walkthroughs and ideas of your Code base. CodeTour usually uses code comments or documentation to explain the functionality and logic of a piece of code or method, which is relatively simple but not user-friendly. CodeTour allows us to add comments to the code and string them together to dynamically show our thinking and code logic.

Like a directory, you can easily join new projects/features, and visualize bug reports or understand the context of code review /PR changes. The code tour is simply a series of interactive steps, each associated with a specific directory or file/line and including a description of the corresponding code. Developers can clone a repository and immediately start learning without having to refer to a CONTRIBUTING. Md file or rely on others for help.

Github.com/microsoft/c…

9. vscode-database-client

Visual Studio Code supports MySQL/MariaDB, PostgreSQL, SQLite, Redis, ClickHouse, Taman, and ElasticSearch. And can be used as an SSH client to maximize your productivity!

Github.com/cweijan/vsc…

10. vscode-icons

Icons for Visual Studio Code

Github.com/vscode-icon…

The last

How to find good open Source projects? Check out GitHub’s Tips for Finding Good Open Source Projects

For more exciting projects, please see the treasure warehouse below.

Github.com/FrontEndGit…

Unconsciously, the original article has already written the 70th issue, almost every article is the high-quality open source project carefully selected by Cat Brother, and the project in every article pushed is almost very helpful to the front-end development.

Original is not easy, a high-quality article is to liver a few nights to liver out, spend a lot of time, energy to screen and write recommendation reasons, the big guys after reading the article easily point to praise or forward it, when the cat brother a little encouragement.

Past pure text

  • 110K Star! Top 10 front-end learning resource projects with the largest annual growth!

  • 7 open source projects for decryption and analysis of Vue2 and Vue3 are recommended

  • Vue3 learning tutorial summary, source code interpretation project, support UI component library, quality actual combat project

  • 10 top GitHub Interviews to Build your own Salary Bonanza