There are too many plugins to enhance GitHub's functionality, and there are thousands of them in the Chrome store. This article will not list all the plug-ins, but only six plug-ins that everyone is sure to use and are grounded. Other fancy plug-ins or plug-ins that I haven't used are not recommended.
Figure 1: Related plug-ins in the Chrome store
Due to network problems, it may not be convenient to download Chrome plug-ins in China. You can download it all for you, just get the download method at the end of the article.
1. Octotree
When developing a project, many packages are created to make the code structure clear.
Take a Java project as an example. Generally, the src directory is created to store the project source code, and the test directory stores some scripts for testing. In the src directory, there will be resource resources and some business logic codes (such as Controller, Service, Dao that follow the MVC development model)
The same is true for other projects. We found that a complete project has a clearly structured code, but if you use GitHub to view the source code of a project, the experience will be very poor. The operation of viewing different directories is like this:
Figure 2: GitHub directory operation
There is no doubt that such an experience is very bad. The Chrome plug-in Octotree can solve this problem. When you install this plug-in, when you open the GitHub repository, there will be a button on the left. Click the button and you will see the complete directory tree of the project. The experience is similar to that in the IDE.
Figure 3: Directory tree display
The Chrome plug-in Octotree has 30W+ users with a rating of 5.0.
Figure 4: Schematic diagram of plug-in download
2. Sourcegraph
If Lao Wang recommended a good GitHub project and you want to learn its code logic, what would you do? I guess it should be Download first, import the IDE to solve all the errors, then Run up, and then read its source code.
We are accustomed to using IDE to read source code. The reason may be that most people are accustomed to using Ctrl + left mouse button to quickly locate the code.
But some people don't bother to download the source code. If you look at the source code directly on GitHub, it looks like this:
Figure 5: Schematic diagram of browsing source code on GitHub page
In this way, the source code has neither a code hierarchy nor a jump location. Is there a plug-in that can solve this pain point?
The answer is yes. The name of this plugin is Sourcegraph . This plug-in has a score of 4.8 in the Chrome store, with 100,000+ users, is super popular and feature-rich, just like a powerful IDE.
Figure 6: Schematic diagram of plug-in download
If you can’t log in to the Google Store to download, Laoguan also provides other download methods, which you can get at the end of the old rules.
After installing the plug-in, open GitHub, the cool icon shown below will appear, click on it and you will find a new world.
Figure 7: The red circle is the plug-in function start button
Click this icon, the interface will change to the following figure. The functions of each area are marked out. I think it can be comparable to editors at the level of browsing code. Next, I will introduce three more commonly used functions.
Figure 8: Plug-in function interface
1. File tree browsing
This plug-in also supports file trees, and is also equipped with more and more powerful functions. If you install this plug-in, you can completely discard the Octotree plug-in just mentioned.
Figure 9: Directory tree
2. Code positioning
If there is an instantiated object in the current file, we want to view the corresponding class source code of the object. In IDEA, we can Ctrl + left mouse button to locate it. After installing this plug-in, we can click "Go to definition" to jump .
In fact, a plug-in called OctoLinker can also achieve this function, but the Sourcegraph plug-in is sufficient.
Video 1: Demonstration of code positioning function
3. Search enhancement
When you just learned a technology, you want to find a Demo to learn. At this time, you don’t need to open GitHub to search. The Chrome browser equipped with this plug-in can complete this operation . Yes, search the code directly in the browser search bar instead of searching on the GitHub platform. Search across warehouses.
You only need to type src in the address bar of the browser and then a space to search and query Demo on Sourcegraph.
Video 2: Demonstration of search enhancements
Sourcegraph can basically meet our needs for browsing source code on the browser side, but there are still many needs that it cannot meet, such as: only want to download a certain file in a project. The git clone command is used to clone the entire warehouse. How to easily obtain part of the code in a warehouse?
3. GitZip
The plug-in can help you easily download part of the code in a warehouse, and it is also very simple to use. After installing the plug-in, find the directory you want to download, right-click on the blank space , and click the Download directory name to download.
Figure 10: Download part of the code demo
Consider visiting the old plug-ins installed three is enough, here I will introduce a few simple've used recently but not very commonly used plug-ins, do not want to look down friends can point a praise and then quit.
Notifier for Github
This plug-in can help display the number of unread messages on GitHub, and also supports desktop notifications, so you can know if there are new messages on GitHub for the first time.
Octohint
GitHub only provides basic syntax highlighting. If you want to find a variable, you need Ctrl + F to find it. If it is a large file, this traditional search method is cumbersome and inefficient.
After installing the Octohint plug-in, when using GitHub to browse the code, functions such as parameter attribute prompts and variable name highlighting will be added by default to make browsing the code more convenient.
Figure 11: Plug-in function demonstration
Github Hovercard
This is a simple GitHub floating card Chrome plug-in, which can easily view user/repo/issue and other information on GitHub, enhancing the interactive experience of GitHub.
4. Download method
I downloaded these six plug-ins, and the download link can be obtained by entering the command "GitHub plug-in" in the background of the official account "Wandering GitHub".
Installation is also very simple: click the Chrome menu → More tools → Extensions to enter the extension page.
Figure 12: Extension page entry
Drag and drop the downloaded .crx extension to complete the installation
Figure 13: Drag and drop to install the plugin
5. Nonsense
Well, if you have used other good plug-ins, you can leave me a message in the background, I will read them. I also reply to everyone about the robbing of Maotai. Many people in the background asked me if I got it. My score is relatively low, so I gave up after grabbing twice. If your white score is less than 100, don’t accompany you. Up.
Finally, those who like this article can forward it and read it. The following platforms have old shoppers. Welcome everyone to follow my account of the same name on other platforms.
Recommended reading
1. A person actually used a Douyin App
2. IntelliJ IDEA from entry to addiction
3. GitHub dark mode is finally here!
Recommend a GitHub project every day that is interesting, fun and you may use.
△Scan the code to follow me△