Visual Studio Code 101 #2 : 20+ Recommend VSC extension you have to install in general…
6 general purpose parts — VSC setting sync on VSC extension, Beautiful IDE Viewer, Folder and file manager on VSC extension, Content and…
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.
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 #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 #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:
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:
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.
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
IDE keymap compatible on VSC extension
If you have any good idea or recommend VSC extension, please tell me!! Thank you.
Most of pictures are from each extension. They have the copyright.