• About
  • Disclaimer
  • Privacy Policy
  • Terms & Conditions
  • Contact Us
  • Author
  • Login
  • Register
  • Home
  • Featured
  • Reviews
  • Security
    • Mobile Security
    • PC Security
  • Tech News
    • Android
    • Apple
    • Google
    • Other
    • Windows
  • Tips & Tricks
  • About Us
                                   
No Result
View All Result
  • Home
  • Featured
  • Reviews
  • Security
    • Mobile Security
    • PC Security
  • Tech News
    • Android
    • Apple
    • Google
    • Other
    • Windows
  • Tips & Tricks
  • About Us
No Result
View All Result
No Result
View All Result

Best vscode extensions for web developers

Imesh Devinda by Imesh Devinda
April 27, 2020
Reading Time: 5min read
0
Best vscode extensions for web developers

Best vscode extensions for web developers

1.9k
SHARES
4.2k
VIEWS
Share on FacebookShare on TwitterShare on WhatsApp

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.

microsoft visual studio
Microsoft Visual Studio

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

Files and folders can be viewed easily by icons
Files and folders can be viewed easily by icons

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

How to beautify when saving in Pretty and and VSCode settings
How to beautify when saving in Pretty and and VSCode settings

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 vscode extension | best vscode extensions
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

JavaScript (ES6) code snippets vscode extension.jpg
JavaScript (ES6) code snippets 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 best vscode extensions
Bracket Pair Colorizer 2 | vscode extensions

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

Quantum internet | Quantum opens the door to the Internet

Best House planning website & Top 5 planning websites

Like this:

Like Loading...
ShareTweetSend
Previous Post

NFC vs RFID & how to use the phone as NFC a tag

Next Post

Top 6 fun websites to visit when you are boring moment

Imesh Devinda

Imesh Devinda

Professional Web Developer, Publisher, Online Marketer, and Graphic designer, by profession who has worked for few big organizations specialize in industries that are related to Online Marketing, eCommerce, and Innovation Technology.

Related Posts

Samsung Has Just Released The Latest Beta Version Of One UI 3.0 Based On Android 11
Android

Samsung Has Just Released The Latest Beta Version Of One UI 3.0 Based On Android 11

by Imesh Devinda
December 3, 2020
A few web tools to create free infographics 2020 | Techdevv
Featured

A few web tools to create free infographics 2020 | Techdevv

by Imesh Devinda
December 2, 2020
Next Post
Top 6 fun websites to visit when you are boring moment techdevv

Top 6 fun websites to visit when you are boring moment

Connect with:
Subscribe
Connect with
Login
I allow to create an account
When you login first time using a Social Login button, we collect your account public profile information shared by Social Login provider, based on your privacy settings. We also get your email address to automatically create an account for you in our website. Once your account is created, you'll be logged-in to this account.
DisagreeAgree
Notify of
guest
Connect with
I allow to create an account
When you login first time using a Social Login button, we collect your account public profile information shared by Social Login provider, based on your privacy settings. We also get your email address to automatically create an account for you in our website. Once your account is created, you'll be logged-in to this account.
DisagreeAgree
guest
0 Comments
Inline Feedbacks
View all comments

Recommended

All about for tools panels of photoshop

All you need to know about the tools panel of photoshop

May 2, 2020
Huawei Foldable Mate X

Huawei Foldable Mate X which sells 100,000 a month

January 23, 2020
DNS poisoning techdevv

How hackers poison DNS cache & steal your data

May 2, 2020
WPA3 is coming All about wireless security types of wifi

WPA3 is coming & All about of security types of wifi

December 2, 2020

Connecting People & Knowladge

Techdevv Media

Your one stop distination for Tech news, unboxing, Tech Tips & Tricks, Reviews, Tech informations, Updates & More. Stay Tuned with Us.

Recent News

download vidmate apk

Download Best Free Video Downloader | Vidmate apk For Android is Here

December 9, 2020
Samsung Has Just Released The Latest Beta Version Of One UI 3.0 Based On Android 11

Samsung Has Just Released The Latest Beta Version Of One UI 3.0 Based On Android 11

December 3, 2020

App Available

     

Follow Us

Categories

  • Android
  • Apple
  • Downloads
  • Featured
  • Google
  • Mobile Security
  • Other
  • PC Security
  • Reviews
  • Security
  • Tech News
  • Tips & Tricks
  • Windows
  • Home
  • Privacy Policy
  • Disclaimer
  • Terms & Conditions
  • Contact Us
  • About Us

Copyright © 2020 | Techdevv Media
www.techdevv.com | [email protected]

No Result
View All Result
  • Home
  • Featured
  • Reviews
  • Security
    • Mobile Security
    • PC Security
  • Tech News
    • Android
    • Apple
    • Google
    • Other
    • Windows
  • Tips & Tricks
  • About Us
  • Login
  • Sign Up

Copyright © 2020 | Techdevv Media
www.techdevv.com | [email protected]

Welcome Back!

Sign In with Facebook
Sign In with Google
OR

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Sign Up with Facebook
Sign Up with Google
OR

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In

Newsletter Subscribe?

We'd like to send you emails on the latest posts & reviews. We won't spam.

[email protected]
wpDiscuz
0
0
Would love your thoughts, please comment.x
()
x
| Reply
%d bloggers like this: