Home
Hello Mate! Are you familiar with Microsoft Visual Studio? Then today we are going to discuss about Best vscode extensions that we can use for our daily usage.
Visual Studio Code has now become the go-to IDEA for most computer languages. Microsoft has made it available for use on Windows, Linux, and even Mac computers.
We list the extensions that are most important to web developers, and you can search for Ctrl + Shift + X or View> Extensions to install them. Or, when you open the link provided, click the Install button on the web page and open VSCode through the browser.
vscode-icons | vscode extension
Instead of having to worry about reading the various file extensions in the project, you can use vscode-icons extension to take care of those files. It supports a large number of frequently used File Formats and specializes in adding icons to content folders.
It supports a wide range of files including Access, Angular, Illustrator, Photoshop, ZIP, Vim, Composer, CSS, Docker YAML, JS, Node, Laravel Blade. Folders This brings in many folder icons including Root, Windows folders, Android, PHP, Redis and more. Some icons may change depending on the UI mode you are using, Dark or Light.
Once this is installed, Restart the IDE and ask to activate the icons, otherwise it can be activated manually via Preferences> File Icon Theme> VSCode Icons.
Download – vscode-icons
For Beautify HTML, CSS, JS, PHP codes | vscode extension
Code beautification is an essential function to keep the code readable and organized. It is much easier to do an extension than to do it manually. You can use this vscode extensions Code beautification. VSCode does not have this feature by default, and file extensions suggest it to the extensions.
For web development, you can use Prettier – Code formatter and, if necessary, ESLint, an extension for ECMAScript / JavaScript.
Prettier offers many features such as Tab indent placement, Automatic Semicolon additions, IF IF internal conditions, and multiple rows. It also supports TypeScript, SCSS, Vue, Angular, YAML, Markdown.
PHP Intelephense can be used for PHP. If it doesn’t work after the installation, go to Settings and search in PHP using the Ctrl +, (comma) shortcut. Under Edit Validate: Executable Path, click Edit. Now, enter the PHP Path as follows.
“php.validate.executablePath”: “C:/xampp/php/php.exe”
In this example we have the PHP path in XAMPP and this should be customized depending on the location of your computer. Don’t forget to use Syntax as it is a JSON file.
Save Beautify To make it easier to save, Beautify can be customized to beautify. To do so, go to Settings via the Ctrl +, (comma) shortcut, go to Text Editor> Formatting on the left, and then click on Format on Save. It can be pasteurized and typed on the On Paste and On Type respectively, but it can be a bother for some people.
Download –Prettier / ESLint / PHP Intelephense
Live Server| vscode extension
Live Server Is a one of another best vscode extension. It helps to see the real time editing in your browser.
If using XAMPP or another server, you will have to refresh the browser with an edit. ALT + TAB and CTRL + R may be used to do that, but Live Server Extension can save you seconds.
This will open the current Workspace in the Status Bar via the Go Live button in the browser. Then, after editing and saving, the browser automatically refreshes. It can be used in HTML as well as PHP. If you have File> Auto Save enabled, you will save even time to save.
Features such as detecting altered files, SVG, CORS, and HTTPS support are supported on any browser.
Download – Live Server
Code Snippets for TypeScript | vscode extension
ES6 Extension called “JavaScript (ES6) code snippets” enables you to get a full method in 3-4 characters.
It supports not only JSX, TSX but also Vue, which is used in HTML, JS, TS as well as React.
This is done by typing as imp and pressing the Tab key and then completing as Import. Other examples are rqr for Require, fre for ForEach, sti for SetInterval, clg for console.log and so on. A full list of extensions can be found on the Extension page.
Download – JavaScript (ES6) code snippets
Bracket Pair Colorizer 2 | vscode extension
Bracket Pair Colorizer 2 Is another best vscode extension Which we can use for Color the brackets in visual studio.
Usually you have to click on them to see links in methods, IF, Array boundaries, brackets, or pairs of brackets. Also, Bracket Pair Colorizer 2 gives you the beginning and end of changing colors. The Bracket Pair Colorizer 2 has been developed to work with more speed, enhancing the previous Bracket Pair Colorizer.
This will make it easier to read the code and avoid mistakes if the next parentheses, such as () () () or ((())), are mixed in ({{})).
Usually it comes in colors like Yellow, Pink, Light Blue, and even adjust the colors through the settings if needed.
Download – Bracket Pair Colorizer 2
If there are any extensions you use, leave a comment for others to know.
Useful Links
