The story of the 33 extensions for VS Code, about their development and management

Original author: Fabio Spampinato
  • Transfer
The author of the material, the translation of which we are publishing today, has created 33 extensions for VS Code. He decided to share with those who like this editor, the methodology for developing and supporting extensions. In addition, he briefly talked about their projects. Perhaps you will find among them something that is useful to you.



How to write extensions


I strive for productive work and love automation, so I developed a well-organized development process for VS Code extensions. I will tell about the main components of this process.

▍Tools


I wrote a very simple tool that helps you quickly start working on new projects using a template. The corresponding utility works like this:

  • At the entrance, it takes a folder (this is what is called a “template”).
  • It processes all files using the handlebars package , asking questions during the processing about what should be substituted for each found placeholder (like {{name}}).
  • As a result, she forms a new folder, the files in which contain what was entered in response to her questions.

I was thinking about using the yeoman utility for working with templates , but for my needs, it seems unnecessarily complex. I used the khaos tool , but it is not supported and does not automatically update templates, and updating them manually whenever I need to use them is not particularly convenient.

▍Template


This is how I, using the template-vscode-extension template , begin to develop a new extension for VS Code.


Creating a new project

After the answers to the questions of the program are entered, I have at my disposal a working extension, something like “Hello, world!” For VS Code. The template includes many support functions, which, as it turned out, I often use when developing extensions. In particular, the template supports downloading a user configuration file from a folder.vscode, automatic registration of commands, it can find the current root directory based on the active file and solve other similar tasks.

If I could turn back the clock, I would probably put all these support functions in a standalone package, in something likevscode-utils, instead of making copies of these functions in each extension development project. But then, unfortunately, I did not know that I would create dozens of extensions. Now I have to spend some time updating the corresponding code in all projects of my extensions.

If you are planning to develop VS Code extensions, I would advise you to create your own template, perhaps taking mine as a basis.

▍Useful documentation


During the development process, I always keep on hand the documentation on the VS Code API. At first, working with this document, which is a huge page, is not particularly convenient, but if you take some time to have a quick look at it, if you understand which APIs are available to you, it will be comfortable to use them. In general, I can say that I am quite satisfied with the set of available APIs.

And, by the way, if you want to develop extensions for VS Code, it will be extremely useful for you to read this section of the documentation.

▍About the extensions I developed


I am developing extensions to solve various problems, we will talk about them below. In addition, some of these extensions help me develop other extensions.

My extensions


As I said, I strive for productivity, so many of my extensions are aimed at increasing productivity. I try not to engage in the constant invention of the bike, trying to achieve a clear separation of the functions of the various extensions so that their sharing does not cause problems.

I do not know whether this is good or bad, but I like to create extensions for VS Code. In addition, the flow of tasks that can be automated, does not dry out. That is why I, after writing the first extension, made the second, then the third, having reached, as a result, up to the thirty-third.

Now I will briefly talk about my extensions. Details about them can be found on their pages.

Extensions to create extensions


№1. Debug manager


The Debug Manager extension allows you to start debugging, even from a terminal, without the need to create tasks or configuration files. I created this extension because I did not want to clutter the repositories with unnecessary files (and who, for example, uses tasks?). I believe that launching a debugger from a terminal is an opportunity that is so useful that it would be worth including it in the VS Code itself.


Starting the debugger from the terminal

№2. StatusBar Debugger


The StatusBar Debugger extension adds debugging controls to the program status bar. This is much more convenient than the standard debug panel . Also, if VS Code would give more debugging data , my extension would be even better.

Number 3. Install .VSIX


The Install .VSIX extension allows you to install .vsixfiles directly from the panel Проводник(Explorer). The reason for the appearance of this extension was the fact that the standard procedure for installing such files is inconvenient .

№4. Bump


The Bump extension allows you to increase the project version number and add new data to the change log. This tool acts according to its own internal logic, but is configurable. I created it because any decent extension needs a change log, but this does not mean that the developer of such an extension has to make entries in the log manually. This is one of my favorite extensions. Perhaps, I will create a command line tool based on it, as I would like it to someday allow to automate GitHub releases as well.


Using the Bump Extension

№5. Optimize Images


The Optimize Images extension allows you to optimize images present in a project using an external application selected by the user. One team - and it's done.

Проект Project Management


№6. Projects +


Projects + extension is used for project management. It has rich features, is customizable, automatically finds projects. One of the most widely used extensions of this kind is the Project Manager , but I have about a hundred repositories, and I need the right tools to manage them, one of which is to support groups of unlimited nesting levels.


Work with Project + extension

▍Manage todo lists


№7. Todo +


The Todo + extension makes it easy to work with todo lists. It is a powerful tool, easy to use and customizable. If you do not need syntax highlighting for TODOfiles, or if you might like the standard built-in highlighting, you can try a good Todo Tree extension .


Syntax Highlighting with Todo + and Project Level Information

№8. Highlight


The Highlight extension is an advanced syntax highlighter based on regular expressions. It is useful to work with todo-lists, annotations and other similar. The TODO Highlight extension is very popular in this area , but my extension is more versatile and much more powerful. In addition, it probably works faster.

№9. Markdown Todo


The Markdown Todo extension makes it easy to work with todo lists inside markdown files. There is nothing special about it, but it allows you to use the features of Todo + inside markdown files.

№10. Projects + Todo +


The Projects + Todo + extension allows you to analyze projects, so to speak, from a bird's-eye view, to see the result of the aggregation of all todo-files in one file. If you use the Projects + extension for project management, and Todo + for working with todo lists, then thanks to this extension you will be able to collect todo lists from all (or some) projects in one place.

▍ Extensions for opening files


I am interested in the ability to quickly switch between different applications or web pages. That is why I created a series of extensions for VS Code, simplifying the solution of such problems.

№11. Open in application


The Open in Application extension allows you to open arbitrary files in a default application or in an application that the developer decides to use. This is a universal extension.

№12. Open in Browsers


The Open in Browsers extension adds commands to the editor that allow you to open the current file or project in any browser or even immediately in all available browsers.

№13. Open in code


The Open in Code extension makes it easy to switch between VS Code and VS Code Insiders.

№14. Open in finder


The Open in Finder extension is designed to open the current file or project in the Finder file manager.

№15. Open in github


The Open in GitHub extension allows you to open the current project or file on github.com. There are many extensions to solve this problem, but when I tried them, it turned out that they had too many functions that I did not need.

№16. Open in GitTower


The Open in GitTower extension adds a command to the editor to open the current project in GitTower .

№17. Open in Marketplace


The Open in Marketplace extension equips the editor with a command to open the current project in the extension directory for VS Code.

№18. Open in node_modules


The Open in node_modules extension allows you to find node_modulesmodules in the folder that match the selected text or some arbitrary string, and open their folders. It is useful for those cases when the developer wants to better understand the modules used by him.

No. 19 Open in NPM


The Open in NPM extension allows you to open module pages in the npm directory. It is convenient to use to view reference information modules.

№20. Open in Ship


The Open in Ship extension adds a command to the editor to open the current project in Ship. Sorry, Ship has stopped working. Therefore, now I, in order not to forget about the incoming information about problems in my projects, I have to use a special reminder sheet in Noty .

№21. Open in terminal


The Open in Terminal extension simplifies the opening of the current project in the terminal.

№22. Open in transit


The Open in Transmit extension allows you to open the current file or project in Transmit .

▍Miscellaneous


No. 23 Browser Refresh


Browser Refresh extension allows you to refresh the page in the browser by pressing ⌘R directly from VS Code, without the need to switch to the browser. This extension is useful in cases where the online reload feature cannot be used, and when you do not need to browser-syncrefresh the page without the need for it .

№24. Commands


Commands extension allows you to call arbitrary commands from the status bar. Passing arguments is supported.


User commands created by Commands

№25. Diff


Diff extension allows you to compare open files. I created this extension because the design code-diff path1 path2is too slow.

№26. Git file history


The Git File History extension simplifies the analysis of the differences in the current file from its previous version. There are many extensions to solve this problem, but when I tried them, they turned out to be either filled with unnecessary opportunities or non-working ones.

№27. Github notifications


A secure and configurable GitHub Notifications extension is designed to display notification information on GitHub on the status bar.

№28. Monokai Night Theme


Monokai Night Theme is a minimalistic dark theme based on the Monokai theme. I created it due to the fact that I could not pick up what would suit me, from the existing topics.


Monokai Night Theme

№29. No [Unsupported]


The extension No [Unsupported] is intended to remove the string "[Unsupported]" from the editor header. This extension is outdated, so instead I recommend Fix VSCode Checksums . Unfortunately, even after this and this discussion, the annoying inscription “[Unsupported]” never went away.

№30. Open multiple files


The Open Multiple Files extension allows you to simultaneously open all files in a folder. If necessary, files can be filtered by template.

№31. Search - Open All Results


The Search - Open All Results extension allows you to simultaneously display all search results using a single command.

№32. Terminals manager


The Terminals Manager extension automates the work of several terminals at once, for example, the execution of some commands in them. I must say that Terminals Manager was my first extension. If you use terminals, I recommend trying it.

No. 33 Transmit


The Transmit extension equips the editor with several commands for organizing interaction with Transmit.

Extension Management


Managing multiple repositories can be a daunting task. I'll tell you how I do it.

▍Repeating commits


Sooner or later there comes a time when you need to make a certain change in all supported repositories. This boils down to the fact that in many repositories you have to make the same commits. Very soon it turns into the most boring occupation.

In order to automate the solution of this problem, I created autogit , a tool that allows you to execute commands applied to multiple repositories.


Running a command with autogit

I constantly find new ways to use itautogit. For example, I recently performed with the help of this tool the following changes in all repositories that store the code of my extensions for VS Code:

  • Build with webpack. This gave an improvement in launch speed of about 80%.
  • Ignore file package-lock.json. This file only litters my commit history. Here is a good material on this topic.
  • Update tsconfig.json. I intensively use new features of the language, in particular, asynchronous functions. They are transpiled if the purpose of the transpilation is given as <= es5to very slow constructions. Since VS Code understands modern code, there is no longer any need for it.
  • Remove TSLint . I found that, basically, I do not pay attention to the tips of the linter, so I got rid of this opportunity.
  • Use high resolution logo in reference materials. I used to use a 128x128 logo, now, in order to improve the look of reference materials, I used a better image. I can not say that the picture itself is a miracle as good, but that's another story.

It is not long to make such changes in one repository, but when it comes to thirty-three, it is much more difficult to live without automation tools.

▍ Synchronize descriptions and keywords with GitHub


What is going to be discussed here is not necessary, but a tool that automates the synchronization of descriptions and keywords would not hurt me. This task can be handled with the tools of my autogit and autogit-command-github-sync tools .


Synchronization of descriptions and keywords by means of autogit

But autogit-command-github-publish is my tool for automated creation of new repositories.

▍Reports


Soon after I created several extensions, I was interested to find out how popular they are, how, over time, the number of their downloads changes. Find information on all extensions of a certain developer on a special page. For example, here is my page. However, this page does not provide information, for example, on how many extensions downloads have been made since the last check. That is why I created rssa . This is a tool that allows you to track changes to anything that is available by URL.


The data received by means of rssa

The text is good, but where it would be better to present the data in the form of a graph. Now I am developing a tool for solving this problem, I have not published it yet. Here, for example, looks like the download schedule for the Todo + extension, built on the basis of the data obtained withrssa.


Todo + Download Schedule

Here, in some places, you can see a sharp increase in the number of downloads. This happens when updates are published, since the installation of updates to an extension is taken into account by the system as a download. This leads to the fact that anyone can be the author of the extension with a million downloads, writing it and publishing a lot of updates. This, by the way, is one of the problems with the VS Code extension directory.

Results


At one time I thought that, by the number of published extensions for VS Code, I am in second place after Microsoft. However, as it turned out, some of them are 2 more than me. Therefore, I continue to write extensions.

Dear readers! Do you write extensions for VS Code?


Also popular now: