Some good extensions for VSCode

Tram Ho

1. Introduction


For each developer, the software editor or IDE is an indispensable tool in our daily work because this is where we write our code. However, along with these editor or IDE , there are countless other extension or plugin to support us a lot more. In today’s article, I would like to share with you 3 extensions that I often use with VSCode , let’s start.

2. VSCode Extension


a. GitLens – Git supercharged

Git is no longer a strange tool for each of us and it seems to be impossible not to know as a developer because it gives us a lot of different benefits. The first extension I want to introduce to you is Gitlens , a tool that helps us when working with VSCode .

This extension gives us a lot of different features that you can explore all here . As for me, some of the features I use with Gitlens are:

  • Git Blame: As the name implies, this feature will help us quickly find out who wrote this code by clicking on the code. Gitlens will show the name of the person who wrote the code and when. From there you can “blame” exactly the person if it was the cause of the bug ✌️

  • File History: This feature allows us to review the history of commits for any file. It will display information about who is involved, who changed the file, and when:

b. Code Spell Checker

As the name implies, this is a tool to help us proofread ourselves while coding. Although the spelling of your spelling doesn’t greatly affect the logic of your code, it can be hilarious if others read it or lead to the whole team to be wrong:

Suppose in my code there is a function I type the name is misspelled:

You will see that the misspelled word is underlined as in the picture above. Also if you hover over it will report your spelling and assist you in fixing the error immediately:

In case your word belongs to a proper name, you can also add that word to your personal dictionary so that it will not show an error next time:

c. Bookmarks

This Extension allows you to save and note any code so you can return to view it later. In case when the code you find this part is not good, or you need to refactor later, you can use the feature of this Extension and bookmark the code so you do not have to remember yourself:

You can highlight the code you want to bookmark then right-click and select as in the image above or you can use Ctrl + Alt + K to save. After bookmarking, you can also note the reason for bookmarking the code for later convenience and when you click on the bookmark section, it will immediately open the corresponding file and jump to your code.

d. i18n-ally

This is a pretty good extension assist you in making multiple languages ​​for your website. Here I will take an example of my React project that is available. Since this article is related to the VSCode extension , I will not mention integrating i18n into your React project so if you do not know how to do it, you can return other articles on Viblo. Suppose my project has integrated i18n with the package i18n-next and I have the project folder structure as follows:

As you can see in the picture, I have a folder named locales/ containing the files used to translate into 3 languages en , vi and ja . Next in my code, i18n-next package is used as follows:

Here I do not use the keyword "detailPage.hello": "Hello" but I always use natural language as a key to translate between languages ​​for easier. Next you need to create a folder named .vscode/ and a file named setting.json and put in this. The content of that file will be as follows:

It will contain the path to the folder containing our multilingual files. According to the document of this extension, it will support us most fully in case our multilingual file is in .json and .yml format. After configuring you, reopen your code file screen and hover on each multilingual line, a popup will appear as follows:

In all 3 of our multi-language files at this time will have no content at all, so in the above code when displaying it will always display exactly what I filled in there. To be able to use this package we will first need to hover in the default language that we choose with English and click on the pencil image to add this word to the en.json file, note here I use Always the word Hello as a keyword to translate, so I will always type that word into the frame when we choose edit:

After you finish and press enter, the keyword will immediately be added to your translate file with the same content. If you just stopped here, this extension is not really helpful, but now is the good part. After you have added the keyword to the en.json file, you should now see the Hello text that you are changing, including the color or when you hover over it.

Because in the en.json file appears the key to mapping for translate now when you hover on it will display the corresponding translate content. Now with the other 2 languages ​​we will do as clicking on the earth icon when hovering on the word Hello and will get the following result:

As you can see after clicking on it and waiting for 1-2 s, our words were immediately translated into the other two languages: Vietnamese and Japanese. At the same time, the content of your vi.json and ja.json files is also changed respectively:

So with just one creation of the original content for the English language and a few mouse clicks, we can convert it to other languages ​​instead of copying it over and over again. Let’s continue to do the same thing with the remaining 2 lines of text and the result will be as follows:

It is full of the content of our files after the above process ends:

In addition, if you only add the content for the en.json file but forgot to add the other two or more files, this extension also helps us to track how much of the content has been translated and which words have not been transited yet. . Assuming here in my en.json file I added a word Done and did not add the other 2 files, the results in the tracking section will be as follows:

3. End of lesson


These are extensions that I often use with VSCode and it can be used for almost all the platforms or languages ​​that you use, I hope it will give you when using VSCode . Finally thanks for reading and don’t forget to leave an upvote 😄 .

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo