VS Code : Organization
Tags: vscode, productivity, webdev, javascript
Published: 2021-12-11 13:07:46

To manage your time and complete projects successfully, you must **organize** your tasks as a developer. When you first decide to learn how to code, it's common to try out a variety of languages, code editors, IDEs, and other tools, making it difficult to keep track of your projects as a whole and _subfolders + files_ within those projects. This was a huge struggle for me as well. In just a over a year, I accumulated over a hundred tiny micro-projects. I also spent a lot of time quickly concatenating files together as projects. Luckily there are some very useful extensions that solve these problems.
These VS Code extensions will assist you in becoming <u>more organized and productive</u>.

> If you like my **_Series_**, make sure to click the :heart: icon on every post and :bookmark: bookmark to save for later :smile: .

---
<br />
### 1. [<u>Project Dashboard</u>](https://marketplace.visualstudio.com/items?itemName=kruemelkatze.vscode-dashboard)
![Project Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lmascai7s0j92pn5rgyc.png)
Project Dashboard is a "plugin that allows you to manage your projects in a speed-dial style". To rapidly access commonly visited folders, files, and SSH remotes, pin them to a dashboard. The dashboard is a dedicated user interface that can be opened with `CMD / CTRL + F1` and set to open automatically. `CMD / CTRL + Click` launches a project in the current window.
Surprisingly, it hasn't received as many downloads, which is quite shocking.
Projects are organized into groups and can be color-coded to make them easier to find. The dashboard is used to manage the groups and projects.
> If the <u>Project Dashboard</u> isn't for you, the [Project Manager](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager) might be a better fit (although it isn't as intuitive).

---
<br />
### 2. [<u>TODO TREE</u>](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree) & [<u>TODO HIGHLIGHT</u>](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight)

* **TODO TREE:** This extension quickly searches (_"using ripgrep"_) your workspace for comment tags like **TODO and FIXME**, and displays them in a tree view in the explorer pane. Clicking a TODO within the tree will open the file and put the cursor on the line containing the TODO.
![todo tree vscode extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rkambs4sre5kcf13l427.png)

* **TODO HIGHLIGHT:** Sometimes you forget to review the **TODOs** you've added while coding before you publish the code to production. This an extension that highlights them and reminds you that there are _notes_ or things not done yet. Found _TODOs_ can also be highlighted in open files.
![todo highlight vscode extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/epsj0ctyq2d8oprj22kp.png)

---
<br />
### 3. [<u>BookMark</u>](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)
![bookmark vscode extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdsedjukn9lrxmyd3etl.gif)
It helps you to **navigate in your code**, moving between important positions easily and quickly. No more need to search for code. It also supports a set of selection commands, which allows you to select bookmarked lines and regions between bookmarked lines. It's really useful for **log file analysis**.

Here are some features "Bookmark" offers:

* Mark/unmark positions in your code
* Mark positions in your code and give it name
* Jump forward and backward between bookmarks :bookmark:
* Icons in _gutter and overview ruler_
* See a list of all Bookmarks in one file and project
* A dedicated _Side Bar_

---
<br />

> [@ free_one](bit.ly/3rVRAhR) Follow me on GitHub
<br>I would like some suggestions on many other Extensions which are tailored towards easier Project structure management :heart:. Drop a suggestion in the Comments section :point_down:...