DEV Community: a

VS Code : Productivity

Sun, 12 Dec 2021 00:58:40 +0000

Being productive with VS Code will help you focus solely on your code & speed up some time-consuming chores. All you need to do to get started being productive is learn a few keyboard shortcuts and install a few extensions. These extensions will help you dramatically increase your productivity while coding.
So, here are some VS Code tricks that I use on a daily basis to boost my overall productivity.

If you like my Series, make sure to click the ❤️ icon on every post and 🔖 bookmark to save for later 😄 .

1. DevDocs Tab

DevDocs is an open source online software that aggregates documentation for a variety of developer tools into a single searchable interface.
DevDocs has been extensively optimized for mobile devices and is extremely responsive & can be installed to your computer. It gives you easy access to the reference manuals for "almost every language and framework/library". It displays all of the APIs for a certain language, as well as their official documentation 😱. You can open your DevDocs Tab right in your VS Code Workspace...

2. Pomodoro Timer

The Pomodoro Technique is a time management system that encourages people to work with rather than against the time they have. Using this method, you divide your workday into 25-minute increments separated by five-minute intervals, rinse and repeat, and then take a lengthier break. This provides your brain with small boosts during each sprint of heavy activity. You can use this extension to add a timer to your taskbar.

3. Code Time

Code Time is an open source plugin for Visual Studio Code that automates programming metrics and time tracking. Over 200,000 developers who use Code Time are able to "reclaim time for uninterrupted, focused development." It helps you stay in flow while preserving a lot of crucial programming time.
When you're in flow, "Automatic Flow Mode" identifies it and automatically mutes distractions and prevents interruptions. It's a fun productivity hack for productivity enthusiasts like myself 😏.

4. AI Assistants

Github Co-Pilot

GitHub Copilot is an AI pair programmer that assists you in writing code more quickly and efficiently. GitHub Copilot extracts context from comments and code and rapidly suggests individual lines and entire routines. OpenAI Codex, a new AI system developed by OpenAI, powers GitHub Copilot. The tool can understand both programming and human languages. The GitHub Copilot technical preview is now available as a Visual Studio Code extension. It is astonishingly powerful !.
Kite Co-Pilot

Kite is an artificial intelligence-powered programming helper that helps you write code quicker in Visual Studio Code. Kite makes it easier to write code by saving keystrokes and displaying the relevant information at the right moment. It is very quick and integrates well with many IDEs apart from VS Code.
Tab Nine

This is another tool which is similar to Kite. Both tools are superior to their predecessors in terms of code completion. They all need to use a large amount of memory, and Tab Nine uses almost twice as much memory as Kite.
VS Code Intellicode

The Visual Studio IntelliCode plugin in VS Code provides AI-assisted development tools for Python, TypeScript, JavaScript, and Java developers, including insights based on understanding your code context and machine learning. Built by the developers of VS Code for VS Code (Microsoft).

NOTABLE MENTIONS 🖊️

Snippet Packs : SUPER ESSENTIAL !!
Auto Rename Tag
Emmet Abbreviations (HTML & CSS)
Dictionary Completion
Image Preview
Path Intellisense ./

@ free_one Follow me on GitHub
Any more productivity centered Extensions ?

Drop a suggestion in the Comments section 👇...

VS Code : Organization

Sat, 11 Dec 2021 13:07:46 +0000

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 more organized and productive.

If you like my Series, make sure to click the ❤️ icon on every post and 🔖 bookmark to save for later 😄 .

1. Project Dashboard

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 Project Dashboard isn't for you, the Project Manager might be a better fit (although it isn't as intuitive).

2. TODO TREE & 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 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.

3. BookMark

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 🔖
Icons in gutter and overview ruler
See a list of all Bookmarks in one file and project
A dedicated Side Bar

@ free_one Follow me on GitHub

I would like some suggestions on many other Extensions which are tailored towards easier Project structure management ❤️. Drop a suggestion in the Comments section 👇...

VS Code : Aesthetics

Sat, 11 Dec 2021 01:06:45 +0000

Visual Studio Code is the most popular software development environment at the moment. It is developed by the guys at Microsoft and has a GREAT community and ecosystem to support it. You can browse through the community-created open-source extensions that help fill in the gaps in productivity needs.

You can truly accelerate your development with these tools and improve your collaboration with teammates. However, the sheer number of options make it difficult to choose the ones that will be most useful. Therefore, I've curated a series detailing many extensions I personally think you should try.

If you like my Series, make sure to click the ❤️ icon on every post and 🔖 bookmark to save for later 😄 .

1. Editor Themes & Icon Packs

Color themes let you modify the colors in Visual Studio Code's user interface to suit your preferences and work environment. My personal favorites are:

Icon Themes

The best icon themes give meaningful good looking icons to Files & the Editor:

vscode-icons (files)
material-product-icon-theme (editor)

2. Beautify & Prettier

Even if you're a good programmer, if you don't take care of proper formatting, your work will get messy QUICK !!. Code Formatters aid in the efficient cleaning up of code. It appears more organized, and when someone looks at your code, it will also help to give a positive impression.
These extensions give you the power to format hundreds of lines of code with a click of a button. But Prettier doesn’t work for all languages. I would recommend Beautify (~~prettier~~ 👎), I prefer the styling scope to that of Prettier's.

3. Peacock

With this extension you can "subtly change the color of your Visual Studio Code workspace". This is helpful when you have multiple VS Code instances opened up and you want to classify them by color 🌈. And also when using Live Share to quickly identify your own editor.

4. Better Comments

This extension will help you create more human-friendly comments in your code. Color coding for categories of Comments.
With this extension, you will be able to categorise your annotations into:

Alerts
Queries
TODOs
Highlights

5. Code Snap & Fira Code Font

FIRA CODE : Programmers utilize a lot of symbols, which are frequently encoded with many characters. Sequences like ->, =, or == are single logical tokens for the brain thus the creation of this font.
CODE SNAP : enables you to be able to "Take beautiful screenshots of your code in VS Code!". All in a "Mac" like 😏 Desktop frame.

6. Bracket Pair Colorizer 2

The purpose of this extension is pretty obvious & the name is self-explanatory...

NB: "This feature is now native to vscode with a recent update to the Editor"

Ohh !! and One more trick ⭐, "move your Sidebar to the RIGHT" 😉

What other extensions add to the aesthetic feel of your personal
VS Code experience ❓. Drop a suggestion in the Comments section 👇...

@ free_one Follow me on GitHub
Check out the next POST 👍