Visual Studio Code is a useful programming tool, it supports almost all popular programming languages: Python, JavaScript, HTML, CSS, TypeScript, C++, Java, PHP, Go, SQL, Ruby, ...

 

Another thing regarding language support is that documentation for popular programming languages in homepage. Shows that the development direction of this editor is aimed at all programmers, regardless of what programming language or field they use in the programming industry.

It can be said that it is one of the software with the richest extension store with thousands of extensions of all types such as programming languages, themes, services,...

VS Code extensions let you add languages, debuggers, and tools to your installation to support your development workflow.

 

In my work,  I have found some extensions to be particularly useful, so I would like to share them with everyone below.

The first:  I will introduce about install 
+ Find and install an extension:
In the Extensions, input 'code' the search box to filter the Marketplace offerings to extensions with 'code' in the title or metadata.
You can see this extension and choose what you want use.

    


Some useful application for developers:

 

1.Git Graph

- Introduce: 

View a Git Graph of your repository, and easily perform Git actions from the graph.

Normally we will use some tools like Tortoise Git, Source Tree, Git Base to manage our git,
track commits, merge requests, see git branches, people committing code,...

The purpose is to know where the information about these branches will come from, when they committed, and who committed them in a clear diagram with easy-to-see colors.

To meet this need, we will have an extension called Git Graph, we can use the extension to review all necessary information without using other external tools.


- Install: Menu Extensions-> Search Git Graph -> Click Install Button

2.GitLens — Supercharge

- Introduce: 

If Git Graph helps us review all the information through the commit schedule.

But it has a limitation: to view information, we need to click on the menu of this extensions , and only view each file.

On the contrary, GitLens can help us see information about each line of code: who wrote this line of code, what date it was committed, branch name, version ,...

We just need to click the cursor directly on that line of code to see the information


- Install: Menu Extensions-> Search GitLens -> Click Install Button

3. Rainbow Tags
- Introduce:

Rainbow Tags are extremely useful Extensions, especially for web programmers, for pages with too much html code.

It is difficult for us to check the opening and closing of tags, parent tags, and child tags.

Rainbow Tags will help us review code easily, the tags are colored differently for each level, there will be no color overlap if the same type of tag

Then we will easily see the opening and closing of this tab. Color will make us feel more interested in programming


- Install: Menu Extensions-> Search Rainbow -> Click Install Button


4. Lines of Code (LOC)

- Introduce:

At the end of the project, we will have an extremely important job: to summarize the number of lines of code of that project.

This is for the purpose of accurately evaluating and making statistics about our projects to report to superiors, customers, to evaluate KPIs, Sales,...

And Lines of Code will support us very well in this.

Lines of Code can be listed by file or by entire project: total number  files, number code, number of comment lines, number of blank lines

The results are exported as json files and txt files


- Install: Menu Extensions -> Search Lines of Code -> Click Install Button

[Reference Source]

https://code.visualstudio.com/

https://miro.medium.com/v2/resize:fit:720/format:webp/0*vz3WV7ng_xjlY06r

https://marketplace.visualstudio.com/VSCode

https://github.com/mhutchie/vscode-git-graph/raw/master/resources/demo.gif

https://raw.githubusercontent.com/gitkraken/vscode-gitlens/main/images/docs/current-line-blame.png

https://gitlab.com/voldemortensen/rainbow-tags/-/raw/main/example_color.png

https://miro.medium.com/v2/resize:fit:720/format:webp/1*P7lknJxmmKQc6b_VkCATtQ.jpeg

 

Leave a comment

*