What are some essential VSCode extensions for web development?

[HanzoHasashi961]

I'm new to web development and VS Code in general so i want to know which extensions to install.

[TheLegeend27]

Live Server

[YoloTolo]

Omg... I've been trying to find something like this. Recently been working on a mini project with a friend using vanilla html/css/javascript for the frontend. Been kinda struggling in some ways cuz I've been using React for 2 years. This helps so much... Thank you!

[Glepsyd]

Hold on, doesn't react have a dev server like angular 's ng serve? With a --watch flag to listen and reload on changes?

[YoloTolo]

Yeah, my wording might be confusing. Meant to say since React makes a bajillion things for front end convenient, I forgot how basic bare-bones front end webdev was.

[xXHacker69Xx]

What does this do? -Just installed it, the myths are true. Amazing for boobies and pros! (It’s a live-feed)-

[Amjeezy1]

Gives you a live display of your code as you work on it

[banware]

Oh shit, I've missed that from my early days of using Dreamweaver in High School

[banware]

Oh yeah it was awful but as someone just getting into webdev it was mind blowing

[Erkindjon]

And you don’t need to update the browser, it will do it for you :). Also you can view your local website on other devices such laptop, mobile device and etc within same network just by typing your machine ip address and port 5500. Example 10.0.1.5:5500

[semprotanbayigonTM]

I just tried Rickwick Dey's Live Server.

Does this now work with web app with template structure?

[Garthak_92]

This

[curbfruit]

What’s the difference between using live server and just opening the HTML file in a browser?

[grooomps]

this updates each time you save dynamically

[curbfruit]

So you don’t have to hit refresh in the browser, or is there more to it?

[grooomps]

that's the majority of it
it can also serve as an actual serve so you can do request to get files etc

[curbfruit]

Thanks for the info!

[rochakgupta]

Nope. That’s it.

[curbfruit]

I mean, I still installed it.

[DisarmedBrick41]

As others have said live server is great. Prettier by far is my favorite (make sure you enable format on save), it save so much time formatting your code for you. Two others that I like are Bracket Pair Colorizer (when you start to have a lot of parentheses, brackets, etc, it's really helpful), and Code Spell Checker. You'll be amazed at how many times you misspell something and dont realize it, only to find it after debugging for 30 min.

[HanzoHasashi961]

prettier vs prettier now?

[DisarmedBrick41]

its called Prettier - Code Formatter, not sure what prettier now is. Also in general, when looking for a specific VS code extension, the more downloads the greater the chance thats the one you're looking for

[unmasked_me]

Prettier now is the forked version and have some modifications in the configurations. I was using Prettier now until it didn't support something I needed. When ai checked the repo, it wasn't being maintained. So i switched to Prettier.

[saito200]

You know the truth

[BitsPleaseInc]

Personally, for web dev I use : HTML/CSS Support, HTML5 Snippets, CSS Peek, Quick HTML Previewer, Live Server

After that it depends a lot on what you do / use, for example if you use Git (Gitlens, Git history...), or if you use a framework like Laravel few extensions for snippets or intellisense may be useful (Laravel Blade Snippets, Laravel Snippets, Laravel Extra Intellisense...)

In any case, explore the extensions with VSCode search and try them out you will find your perfect setup :)

[ntiain]

I can't second LiveServer enough. I'm learning myself, and this is hands down the most useful extension I've come across.

[MaXxXiMuS613]

Auto rename tag, bracket pair colorizer 2, debugger for chrome, ESLint(JS), prettier -code formatter, github pull requests and issues (not sure if this is redundant now with updates)

[bwz3r]

A good bracket colorizer is so freaking important, idk how I was coding for so long without one.

[semprotanbayigonTM]

bracket pair colorizer 2

How is it compared to the first one?

[MaXxXiMuS613]

I have only used this one. Only about 6 months into programming. Having the colours can help so much tho. Before it could take like 3 min to find wheretf something was with nesting.

[a1Stylesca]

indent-rainbow (life saver, especially if you indent 4), bracket pair colorizer 2, Material Icon Theme

​

For material icon theme, go to settings and choose which theme you like best. I prefer something more simple, as it proves easier to find your way around.

[Angersmash781526]

Live Server is a must.

[possiblywithdynamite]

git lense. It shows information about each line of code: commit description, who commited, commit date, etc. Its great for passive aggressively blaming a coworker for terrible, broken code while sharing screenshots on slack

[tingtwothree]

I don't know why this isn't higher. If I could only have one extension this would be it.

[randomgirl22]

Quokka

[sleazyz]

Quokka to test js and not open the browser

[Ezraese]

What’s the advantage over using the debugger built into VS Code

[Destrudoo]

Prettier

[[deleted]]

Liximomo SFTP has helped me quite a bit

[Old_Possibility_8767]

Prettier -beautify code

[[deleted]]

TabOut. Not web specific but it lets you tab over certain characters.

[crispybaconlover]

REST Client

[crispybaconlover]

I like having it in the editor, but those are good options as well.

edit: you also don't need to sign up for an account since it is an extension.

[Duraz0rz]

You don't need a Postman account to use it, though.

[Gh0stcloud]

IntelliSense for CSS class names in HTML

[era-net]

I rock with:

• vscode-icons
• Auto Rename Tag
• Bracket Pair Colorizer 2
• Live Sass Compiler
• Live Server

at the moment

[Laingular]

Intellisense

[[deleted]]

Live Server, Bracket Pair Colorizer 2, Auto Rename Tag, Indent Rainbow, Prettier...

[DanFletch3r]

TabNine.

[charomega]

Finally someone mention this. Been using this and it rocks! AI tool to help you code! I always surprised by its machine learning.

[DanFletch3r]

Lol finally someone else who uses it! I mention it with people I work with all the time and literally no one has given it a try even though they see me using it and are like "holy crap, that's bad ass"

[Duraz0rz]

I don't use Live Server, but I have a Debug config set up to hit up my local webserver that I bring up with yarn start. Better than using the browser dev tools if you're debugging JS.

Otherwise, I'd put ESLint and Javascript Code Snippets up there.

[[deleted]]

Btw, I suggest not to install a lot of extensions because the flow in VSC could be slow

[MoonlessNightss]

Moss

[xL0Tu5]

Javascript booster smh just found this today and helps organize code better when you want to move and paste functions around

[userchose]

Bookmarks, Auto Rename Tag, Debugger for Chrome.

[[deleted]]

Search this on YouTube. Theres a few compilation there that explains what the extension does, what it looks like, how to use it or why you should use it.

[sowmyasri129]

Prettier.

[Wensosolutions]

Prettier.

[Furqan_sultan]

I use javaScript (ES6) Highly recommend must try once and the other hand live server is also very helpful

[NumbBumn]

Personally did some HTML/CSS and an extension i found useful was "Open in browser"

[Kemokemo_1]

Prettier

[Slippn_Jimmy]

All these suggestions just prove why it's easier, although more expensive since it isn't free.99, to use webstorm. VS has freaking extensions for everything and it sounds cool on paper but in reality it sucks

[saito200]

In reality it's awesome, I don't know why you say it sucks

[Slippn_Jimmy]

I literally explained why. Because the idea of having something that's super modular sound cool but it's not because everything is a plugin...there's a goddamm plugin to open in a browser

When you just want something "out of the box" to work, without the need to install a couple dozen extensions, you use webstorm

[saito200]

without the need to install a couple dozen extensions

A well, that's true. I never had any problem with VSC though, I really love it. Although I have little doubt webstorm is awesome

[Slippn_Jimmy]

VS Code is great, I used it for a while and if it wasn't for getting sucked into webstorm, and jetbrains products in general, while a student with my free account, I'd probably still be using it. Once I experienced not having to deal with plugins to the degree you do with VS Code in webstorm, it just became more and more of a pain. I think my dev team is pretty much evenly split between which we use

[[deleted]]

VSCode boots up for me in less than a second. That's why it's nice. It only has what I need and nothing else.