Visual Studio Code 101 #3 : 20+ Recommend VSC extension you have to install in advanced purpose

VSC Series

Visual Studio Code 101 #3 : 20+ Recommend VSC extension you have to install in advanced purpose

∘ Introduction
∘ Story Series
∘ Main Part on VSC extension
∘ 1. Version control — git — on VSC extension
∘ 2. Pretter code on VSC extension
∘ 3. Restful utility on VSC extension
∘ 4. Testing on VSC extension
∘ 5. Document Enhancement 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 advanced 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 #3 : 20+ Recommend VSC extension you have to install in advanced purpose”, we are going to introduce about 5 advanced purpose parts — Version control — git — on VSC extension, Pretter code on VSC extension, Restful utility on VSC extension, Testing on VSC extension, and Document Enhancement 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

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

1. Version control — git — on VSC extension

Got your git perfect fit in VSCode IDE!!

gitignore

• CodeName: codezombiech.gitignore
• Description: Lets you pull .gitignore templates from the https://github.com/github/gitignore repository. Language support for .gitignore files.
• Given Ranking: ⭐⭐⭐⭐ 4 stars
• VSC Link: Link
• Comment: You can use that, I use this extension to write down gitignore file with template such as python, nodejs, or C++. For me, just quickly finish basic template and put extra word or filename into .gitignore file.
• Quick View:

gitignore extensions in Visual Studio Code

Git History

• CodeName: donjayamanne.githistory
• Description: View git log, file history, compare branches or commits.
• Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
• VSC Link: Link
• Comment: You should use that, I use this extension to view git history, git log, git file change, so I can understand what happened in my files history. Good for me.
• Quick View:

Git History extensions in Visual Studio Code

Git Graph

• CodeName: mhutchie.git-graph
• Description: View a Git Graph of your repository, and perform Git actions from the graph.
• Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
• VSC Link: Link
• Comment: You should use that. I use this extension to view a git graph of my repository, and easily perform Git actions from the graph. Simple Git GUI than like Git Fork or Gitkrankan.
• Quick View:

Git Graph extensions in Visual Studio Code

GitLens — Git supercharged

• CodeName: eamodio.gitlens
• Description: Supercharge Git within VS Code — Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more.
• Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
• VSC Link: Link
• Comment: You should use that. I use this extension to view my file and I like the revision navigation feature. that is very useful to know who edit this code and make this smell bad. WOW. Anyway, this all improve the whole team’s code quality by this tool.
• Quick View:

GitLens — Git supercharged extensions in Visual Studio Code

GitLens Tree View extensions in Visual Studio Code

New Relic CodeStream: GitHub, GitLab, Bitbucket PRs and Code Review

• CodeName: CodeStream.codestream
• Description: GitHub pull requests, GitLab merge requests, and code reviews in your IDE. Eliminate context-switching. Integrates with New Relic observability, Bitbucket, Slack, MS Teams, Jira, Trello and more.
• Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
• VSC Link: Link
• Comment: You should try that. I use this extension to review pr, discuss code, and eliminating context-switching. It is different of view in git tool.
• Quick View:

New Relic CodeStream: GitHub, GitLab, Bitbucket PRs and Code Review extensions in Visual Studio Code

comment and code review process in Visual Studio Code

2. Pretter code on VSC extension

Making all code look like the same style is the first step to improve the code quality.

Table Formatter

• CodeName: shuworks.vscode-table-formatter
• Description: Format table syntax of Markdown, Textile and reStructuredText.
• Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
• VSC Link: Link
• Comment: You have to use that, I use this extension to pretty the text table, so I can easily type all essential words and get the beautiful table that I don’t waste my time!!
• Quick View:

Table Formatter extensions 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 extensions in Visual Studio Code

Code Spell Checker

• CodeName: streetsidesoftware.code-spell-checker
• Description: Spelling checker for source code
• Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
• VSC Link: Link
• Comment: You have to use that, I use this extension to check all code or word spell error and I can add some special words in except list. This extension reduce my type error. Truly recommendation.
• Quick View:

Code Spell Checker extensions in Visual Studio Code

Prettier — Code formatter

• CodeName: esbenp.prettier-vscode
• Description: Code formatter using prettier
• Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
• VSC Link: Link
• Comment: You have to use that, I use this extension to format like JavaScript, TypeScript, JSX, JSON, CSS, SCSS, or Less language. All I need is to format the general style. Pretty easy format file with format on save files setting.
• Quick View:

Prettier — Code formatter extensions in Visual Studio Code

Beautify

• CodeName: HookyQR.beautify
• Description: Beautify code in place for VS Code
• Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
• VSC Link: Link
• Comment: You have to use that, I use this extension to format like JavaScript, JSON, CSS, SCSS, or HTML language. All I need is to format the general style. This extension is like “Prettier — Code formatter”. You can try these two extension and find the best one for you.
• Quick View:

Beautify extensions in Visual Studio Code

3. Restful utility on VSC extension

Great tool to help you develop Restful API is incredible efficiency.

REST Client

• CodeName: humao.rest-client
• Description: REST Client for Visual Studio Code
• Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
• VSC Link: Link
• Comment: You have to use that. I use this extension to write down all api read/write/update/delete method and description in .http file and then each developer can follow this file to coding backend api server or testing their api by a click. Most importantly, it reduce the communication effort on api design. Truly recommendation.
• Quick View:

REST Client extensions in Visual Studio Code

Thunder Client

• CodeName: rangav.vscode-thunder-client
• Description: Lightweight Rest API Client for VS Code
• Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
• VSC Link: Link
• Comment: You have to use that, I use this extension to test all api read/write/update/delete method. If you like GUI tool and you don’t miss this extension. Off cause, each developer can follow this collection file to coding backend api server or testing their api by a click. Have a try.
• Quick View:

Thunder Client extensions in Visual Studio Code

4. Testing on VSC extension

Nice GUI Tool show all testing result.

Test Explorer UI

• CodeName: hbenl.vscode-test-explorer
• Description: Run your tests in the Sidebar of Visual Studio Code
• Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
• VSC Link: Link
• Comment: You can use that. I use this extension view my unit test in python or javasctipt. Moreover, This extension provides an extensible user interface for running your tests in VS Code. It can be used with any testing framework if there is a corresponding Test Adapter extension. It support GO/Python/C++/Java language.
• Quick View:

Test Explorer UI extensions in Visual Studio Code

Python Test Explorer for Visual Studio Code

• CodeName: LittleFoxTeam.vscode-python-test-adapter
• Description: Run your Python tests in the Sidebar of Visual Studio Code
• Given Ranking: ⭐⭐⭐⭐ 4 stars
• VSC Link: Link
• Comment: You can use that. I use this extension view my pytest in python files. Moreover, this extension allows you to run your Python Unittest, Pytest or Testplan tests with the Test Explorer UI. Just try that if you are a python developer.
• Quick View:

Python Test Explorer extensions in Visual Studio Code

5. Document Enhancement on VSC extension

We recommend below extension to handle below general files.

• yaml
• markdown
• rst
• xml
• excel

YAML

• CodeName: redhat.vscode-yaml
• Description: YAML Language Support by Red Hat, with built-in Kubernetes syntax support
• Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
• VSC Link: Link
• Comment: You should use it. I use this extension to write down the yaml file, and I like the feature that detects whether the entire file is valid yaml. For dockerfile, Kubernetes, or some configuration file that use YAML format. It is good for devops engineer.
• Quick View:

YAML extensions in Visual Studio Code

Markdown All in One

• CodeName: yzhang.markdown-all-in-one
• Description: All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more)
• Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
• VSC Link: Link
• Comment: You should use it. I use this extension to write down the markdown file, and I like the feature that automatically create table of contents in my markdown file. Truly recommendation.
• Quick View:

Markdown All in One extensions in Visual Studio Code

markdownlint

• CodeName: DavidAnson.vscode-markdownlint
• Description: Markdown linting and style checking for Visual Studio Code.
• Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
• VSC Link: Link
• Comment: You should use it. I use this extension to highlight the markdown type error, and I can fix that pretty soon.Moreover, I like the feature show rule checker — MD01 “heading-increment/header-increment — Heading levels should only increment by one level at a time”. This extension includes a library of rules to encourage standards and consistency for Markdown files. Truly recommendation.
• Quick View:

markdownlint extensions in Visual Studio Code

reStructuredText Syntax highlighting

• CodeName: trond-snekvik.simple-rst
• Description: Syntax highlighting and document symbols for reStructuredText.
• Given Ranking: ⭐⭐⭐⭐ 4 stars
• VSC Link: Link
• Comment: You can use it. I use this extension to write the live web document that support syntax highlighting, and I reduce the type error when I write documents by reStructuredText. You should use that when you try to auto-generate from document by python comment.
• Quick View:

reStructuredText Syntax highlighting extensions in Visual Studio Code

reStructuredText

• CodeName: lextudio.restructuredtext
• Description: reStructuredText language support (RST/ReST linter, preview, IntelliSense and more
• Given Ranking: ⭐⭐⭐⭐ 4 stars
• VSC Link: Link
• Comment: You can use it. I use this extension to live preview document when I write documents by reStructuredText. You should use that when you try to auto-generate from document by python comment.
• Quick View:

reStructuredText extensions in Visual Studio Code

XML Tools

• CodeName: DotJoshJohnson.xml
• Description: XML Formatting, XQuery, and XPath Tools for Visual Studio Code
• Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
• VSC Link: Link
• Comment: You should use it. I use this extension to do XML formatting, tree view, and linter. Good tool to handle XML files.
• Quick View:

XML Tools extensions in Visual Studio Code

Excel Viewer

• CodeName: GrapeCity.gc-excelviewer
• Description: XML Formatting, XQuery, and XPath Tools for Visual Studio Code
• Given Ranking: ⭐⭐⭐⭐⭐ 5 stars
• VSC Link: Link
• Comment: You should use it. I use this extension to view .csv or excel file, and I don’t need to open excel or someone else. It is most useful on you parse data or clean data on csv or excel file. It is good for Data Engineer.
• Quick View:

Excel Viewer extensions in Visual Studio Code

Summary

In this post, we recommend the 5 parts extension to use in advanced purpose, and cutting the best extensions for general purpose that you should try. Again, we recommend these extensions to speed your productivity up 30% and high efficiency on writing your code.

1. VSC setting sync on VSC extension
2. Folder and file manager on VSC extension
3. Restful utility on VSC extension
4. Testing on VSC extension
5. Document Enhancement 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.