Visual Studio Code 101 #2 : 20+ Recommend VSC extension you have to install in general…

VSC Series

∘ Introduction
∘ Story Series
∘ Main Part on VSC extension
∘ 1. VSC setting sync on VSC extension
∘ 2. Beautiful IDE Viewer on VSC extension
∘ 3. Folder and file manager on VSC extension
∘ 4. Content and highlight tools on VSC extension
∘ 5. Todo list highlight on VSC extension
∘ 6. IDE keymap compatible on VSC extension
∘ Summary

Introduction

Visual Studio Code is a powerful and free IDE and support 10+ language development and rich of marketplace that is managed by Microsoft official. In this story, we would share the experience on 100+ extensions, and cutting the best extensions for general purpose that you can’t miss. Moreover, we recommend these extensions to speed your productivity up 30% and high efficiency on writing your code. In this section “Visual Studio Code 101 #2 : 20+ Recommend VSC extension you have to install in general purpose”, we are going to introduce about 6 general purpose parts — VSC setting sync on VSC extension, Beautiful IDE Viewer, Folder and file manager on VSC extension, Content and highlight tools on VSC extension, Todo list highlight on VSC extension, and IDE keymap compatible on VSC extension, and we wish these extensions could help you speed up your working efficiency.

Share the experience on 100+ extensions in Visual Studio Code

Story Series

Now, I hope to share some experience to decrease the gap from a novice to an expert. This series will introduce Visual Studio Code 101 from 0 to 100 migration from the other IDE, it contains below parts :

Series

Visual Studio Code 101 #1 : Introduction and Get start
Visual Studio Code 101 #2 : 20+ Recommend VSC extension you have to install in general purpose
Visual Studio Code 101 #3 : 20+ Recommend VSC extension you have to install in advanced purpose
Visual Studio Code 101 #4 : 7+ C_C++ extension in recommendation (Clang-Format)
Visual Studio Code 101 #5 : 10+ Python extension in recommendation
Visual Studio Code 101 #6 : 10+ Javascript Node React extension in recommendation
Visual Studio Code 101 #7 : 10+ HTML CSS extension in recommendation
Visual Studio Code 101 #8 : 10+ Docker and kubernetes container extension in recommendation
Visual Studio Code 101 #9 : 10+ CICD Jenkins, Gitlab, Github Action, and Azure-pipeline extension in recommendation
Visual Studio Code 101 #10 : DevOps Engineer extension in recommendation
Visual Studio Code 101 #11 : Cloud Engineer extension in recommendation

Main Part on VSC extension

1. VSC setting sync on VSC extension

Syncing all thing cross computer, platform, and OS.

Settings Sync

CodeName: Shan.code-settings-sync
Description: Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.
Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
VSC Link: Link
Comment: You have to use that, you can use this extension to sync all setting cross all platform or computer.
Quick View:

2. Beautiful IDE Viewer on VSC extension

Got your own IDE Viewer!!

vscode-icons

CodeName: vscode-icons-team.vscode-icons
Description: Icons for Visual Studio Code
Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
VSC Link: Link
Comment: You have to use that, I use this extension to make my IDE pretty good and I can identify the file with icons. Moreover, you can select different theme that you like.
Quick View:

3. Folder and file manager on VSC extension

Go to speed your searching and comparing with tools.

Project Manager

CodeName: alefragnani.project-manager
Description: Easily switch between projects.
Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
VSC Link: Link
Comment: You have to use that, I use this tool to manager my project and folders easily.
Quick View:

Bookmarks

CodeName: alefragnani.Bookmarks
Description: Mark lines and jump to them
Given Ranking: ⭐⭐⭐⭐ 4 stars
VSC Link: Link
Comment: I use this tool to bookmark the files or folder that I want to keep as browser favoriate. However, it is some overlap to TODO tag for me.
Quick View:

filesize

CodeName: mkxml.vscode-filesize
Description: Show the current file size in the status bar.
Given Ranking: ⭐⭐⭐⭐ 4 stars
VSC Link: Link
Comment: I use this tool to view all files size. it is a convenient tool.
Quick View:

Compare Folders

CodeName: mkxml.vscode-filesize
Description: Compare folders by contents, present the files that have differences and display the diffs side by side.
Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
VSC Link: Link
Comment: You have to use that, I use this tool to compare files or folder that I feel confused. It is a convenient tool to figure these error and bugs.
Quick View:

4. Content and highlight tools on VSC extension

Go to speed your typing and coding with tools.

Trailing Spaces

CodeName: shardulm94.trailing-spaces
Description: Highlight trailing spaces and delete them in a flash!
Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
VSC Link: Link
Comment: You have to use that, I use this tool to remove the spaces that I feel annoying. It is a convenient tool to remove these thing and keep code and word clear.
Quick View:

Expand Selection To Scope

CodeName: vittorioromeo.expand-selection-to-scope
Description: This extension introduces a command that incrementally expands the selection to the nearest outer scope (delimited by bracket pairs)
Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
VSC Link: Link
Comment: You have to use that, I use this tool to select target scope sequence. It is a convenient tool to help you and me on hating select to wrong region.
Quick View:

Bracket Peek

CodeName: jomeinaster.bracket-peek
Description: Preview the opening line of code matching the inspected closing bracket
Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
VSC Link: Link
Comment: You have to use that, I am usually confused on bracket between bracket when I edit my post or code. It is a convenient tool to preview which two bracket are the same pair.
Quick View:

indent-rainbow

CodeName: oderwat.indent-rainbow
Description: Makes indentation easier to read
Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
VSC Link: Link
Comment: You have to use that, I use this extension to make clear screen in all document or coding file, and I have to yo say — this tool is so good that you can recognize the wrong place in one eye. Expecilly, it is useful for python file, because python language use the indent as structure definition
Quick View:

Output Colorizer

CodeName: IBM.output-colorizer
Description: Syntax highlighting for log files
Given Ranking: ⭐⭐⭐⭐ 4 stars
VSC Link: Link
Comment: You can try it, I use this extension to make clear console log, but I think it dependent on your favorite style. However, give IBM extension a try.
Quick View:

Output Colorizer display in Visual Studio Code

EditorConfig for VS Code

CodeName: EditorConfig.EditorConfig
Description: EditorConfig Support for Visual Studio Code
Given Ranking: ⭐⭐⭐⭐ 4 stars
VSC Link: Link
Comment: You can try it, I use this extension to align all file format style. For clear file format, but I think it dependent on your favorite style.
Quick View:

EditorConfig extension in Visual Studio Code

Shortcut Menu Bar

CodeName: jerrygoyal.shortcut-menu-bar
Description: Add handy buttons like beautify, show opened files, save, toggle terminal, activity bar etc to editor menu bar. User-defined buttons are also possible.
Given Ranking: ⭐⭐⭐⭐ 4 stars
VSC Link: Link
Comment: You can try it, I try this one to give me convenient shortcut menus bar, but I think it dependent on your favorite style.
Quick View:

5. Todo list highlight on VSC extension

The most easily way to fix something lately is to show FIXME with red color.

TODO Highlight

CodeName: wayou.vscode-todo-highlight
Description: highlight TODOs, FIXMEs, and any keywords, annotations…
Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
VSC Link: Link
Comment: You have to use that, I use this tool to comment document or code with TODO: or FIXME: comment, and I can go away to do something and come back to finish them by easily highlight. Moreover, you should use this and next extension Todo Tree together.
Quick View:

Todo Tree

CodeName: wayou.vscode-todo-highlight
Description: Show TODO, FIXME, etc. comment tags in a tree view
Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
VSC Link: Link
Comment: You have to use that, I use this tool to comment document or code with TODO: or FIXME: comment, and I can go away to do something and come back to finish them by easily highlight. Moreover, you should use this and previous extension TODO Highlight together.
Quick View:

6. IDE keymap compatible on VSC extension

Keyboard shortcuts are vital to productivity and changing keyboarding habits can be tough.

Sublime Text Keymap and Settings Importer

CodeName: ms-vscode.sublime-keybindings
Description: Import Sublime Text settings and keybindings into VS Code.
Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
VSC Link: Link
Comment: If you is used sublime before, you have to use that now. Just the familiar keymap and shorcut.
Quick View:

Vim

CodeName: vscodevim.vim
Description: Vim emulation for Visual Studio Code.
Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
VSC Link: Link
Comment: If you is used vim before, you have to use that now. Just the familiar keymap and shorcut.
Quick View:

Atom Keymap

CodeName: ms-vscode.atom-keybindings
Description: Popular Atom keybindings for Visual Studio Code.
Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
VSC Link: Link
Comment: If you is used atom IDE before, you have to use that now. Just the familiar keymap and shorcut.
Quick View:

Brackets Keymap

CodeName: ms-vscode.brackets-keybindings
Description: Popular Brackets keybindings for VS Code.
Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
VSC Link: Link
Comment: If you is used brackets IDE before, you have to use that now. Just the familiar keymap and shorcut.
Quick View:

Summary

In this post, we recommend the 6 parts extension to use, and cutting the best extensions for general purpose that you can’t miss. Again, we recommend these extensions to speed your productivity up 30% and high efficiency on writing your code.