Visual Studio Code
There are tons of useful extensions in Visual Studio Code. I will introduce 10 of most basic useful and must install extensions here for beginners.
How to install extensions – open “Visual Studio Code” -> go to “Setting” -> choose “extensions” and you start search in Market place here. Or, a shortcut way is open “Visual Studio Code” and on the bottom of the left sidebar, there is a logo for extensions which leads you to the search tab.
- **Material Icon Theme **: This is to change your plain directories with icons automatically. It makes your directories and files much more visible.
2. Peacock : This will give you different VSCode frame colours while you are opening several projects. It must boost your productivity by identifying at one sight which project you want to hands on.
Peacock
3. Auto Close Tag : This is as the name it is, but if you type the starting tag name, automatically the close name tag is implemented.
Auto Close Tag
4. Auto Rename Tag : If you change a starting tag name, the pair close tag is automatically renamed. This is a very handy tool and avoid forgetting to rename.
Auto rename Tag
5. **Bracket Pair Colorizer 2 : **This extension will colorize brackets, and quite useful to identify which are the matching tags especially when you code with JavaScript or other programming languages.
Bracket Pair Colorizer 2
6. Code Spell Checker : When you log code, it would be a hard work on finding typo, but this extension detects straight away and make it easy to fix your typos.
Code Spell Checker
7. Highlight Matching Tag : This extension highlights the matching tags, so that helps your development and makes it easy to find out trash tags.
Highlight Matching Tag
8. **HTML Snippets : **This extension helps you type less HTML codes as you see below. If you type shortcut tag name, it recognises and auto-fix your tag name.
HTML Snippets
9. **Live Server : **This extension is for front-end developer. While you develop, you can check how it looks like on web browser lively. Install the extension, and on the file you are developing, “right click” and press “Open with Live Server” and you will see the result on web browser.
Live Server
10. Path Autocomplete : This helps you code the right path. When you specify the first path, It automatically shows what the next path might be.
Path Autocomplete
#web-development #vscode #beginner #extension #coders
