Visual Studio Code (VSCode) is a code editor developed by Microsoft. It is based on the Electron platform and is available for Windows, macOS and Linux. It supports a variety of programming languages, including C++, C#, Java, Python and Node.js. According to the Stack Overflow Developer Survey 2018, Visual Studio Code is the most popular code editor, with 49% of developers using it.
There are many ways to note a TODO list. You can use a notebook, a computer, or even your phone. You can make a list of items that need to be done, or you can make a list of goals that you want to achieve. But if you’re already using VSCode as your primary development tool, you may want to know how to create a TODO list right inside the editor.
In this article, we will show you a few extensions to help you quickly manage TODO lists in VSCode.
VSCode TODO extensions
Visual Studio Code extensions are popular among developers because they offer a lot of flexibility and customizability. There are a wide variety of extensions available, and developers can find one that meets their specific needs.
Extensions can be used to add new features to Visual Studio Code or to customize the way it works.
TODO Tree
TODO Tree is a VSCode extensions which processes opened file contents and turns it into a tree view, based on the file content structure. The TODO list by default will be avaiable in the sidebar, makes it easy for you to quickly take a look to see which needs to be done right away.
Basically, you will have to format your to-do list using comment tags such as TODO and FIXME, and the extension will quickly searches (using ripgrep) your workspace to find and display them in the sidebar as a tree view. Below is a quick example that demonstrate how you would format a task:
// TODO - todo note
// FIXME - fix something
// BUG - a bug needs to be fixed
// NOTE - some note in the codeCode language: JSON / JSON with Comments (json)The tree view can be placed anywhere you like, including the activity bar or explorer pane.
Double-clicking a TODO in the tree will open the file and put the cursor on the line containing the task. In open files, TODOs can also be highlighted for easier navigation. You can further customize the extension by specifying specific flags in VSCode settings, more details can be found at TODO Tree wiki page.
The TODO Tree extension is open source, distributed under MIT License.
TODO Highlight
TODO Highlight by Wayou Liu is a powerful VSCode extension which highlights TODO, FIXME and other annotations within your code, making it easier to stay organized and productive.
If you’re constantly forgetting to mark sections of code with TODO or FIXME tags, this plugin will help you out by highlighting them so you don’t have to worry about these nitty gritty details and focus on more important development.
Comment Anchors
With Comment Anchors by Starlane Studios, you can easily place anchors within comments or strings to bookmark important sections of your code. This can be really useful for tracking TODOs, writing notes, or creating foldable sections. It also makes it easier to navigate your files.
The extension helps you keep track of your code, letting you build “quick jump” points as well as categories for variables or methods. You can create custom keywords to use to tag the sections of your code.
You can also create hierarchies with the anchors, link one to another for quick navigation (ex. from a method to another related one located elsewhere)
Stepsize
Stepsize goes beyond just highlighting TODOs, it’s a VSCode extension that manage technical debt & prioritise refactoring work, all directly from VSCode.
Stepsize features list includes:
- Create and organize your bookmarks and to-dos into beautiful issues.
- Prioritize them in the VSCode editor or webapp.
- Explore the codebase to find areas that needs to be refactored.
- Share your findings with your teammates in order to get their insights and brainstorm on the next steps.
- Integration with Jira, Linear, GitHub, Slack.
- And many more
Trello Viewer
Trello is a project management tool that is popular with both individuals and businesses. If you’re already using Trello to manage your TODO lists, Trello Viewer will help you do that right inside VSCode. It allows you to:
- Browse different Trello boards, lists and cards in the sidebar.
- Move, add, or archive a card.
- Create and delete cards inside VSCode.
- Add comments and edit title and description of cards.
- View your selected card using the markdown previewer and open it to the side.
- Preview the card’s cover image and formatted checklists.
- Create a favorites list to easily access your most-used cards.
- Saves your login information to use between sessions.
- With a few clicks, you can filter your board to show only the starred ones.
We hope that the information above is useful to you. If you’re interested in more advanced editing features of VSCode, check out our post on how to enable/disable word wrap in VSCode, How to use LaTeX in VSCode or how to automatically indent your code in Visual Studio Code.
