My Visual Studio Code Setup for Web Development

My focus lately as a developer has been building websites & web apps, and VS Code is the main tool I use to get that done. It's the most popular IDE/code editor among developers, according to the 2022 Stack Overflow Developer Survey. So, I want to show you how I use VS Code, my preferred extensions, my current theme, and my favorite VS Code settings that I’ve been using for many different types of web development.

------------------------


📓 Learning Resources:

👨‍💻 My Coding Gear:

🔧Coding Tools:

[fknight]

_Posted July 20, 2023 by Forrest Knight_
*Original Comment:* So, what are _your_ favorite VS Code settings & extensions? And what theme are you running?

[FantomDoesWork]

Here are some interesting extensions you might find useful:

Error Lens - Highlights errors and warnings inline rather than having to hover over red swiggly lines to inspect the error/warning
Git Lens - Nice way to see who wrote certain pieces of code quickly. Very useful if the project is developed by a team.
Path Intellisense - Autocompletes file names
Thunder Client - Lightweight tool to make api calls like postman or insomnia

Theme - Atom One Dark, since everyone was commenting what themes they use 😅

[logato]

I believe Andromeda would be offended by that pronunciation.

[Showmatic]

I used the Synthwave '84 theme for almost a year then recently switched to Moonlight. What can I say, I love the glowing text.

[geisenm]

We had a guy join the team about a year ago, 25+ year industry vet. Whole team uses VSCode with a recommended set of extensions but he was used to his Vim and we weren’t going to force him to make the change. It didn’t end up working out, and it was too little too late but he did eventually realize he made a mistake when he watched me CMD-click through a series of inherited classes that had been taking him literal hours to navigate before

[martinelsasser]

Nice video.
Some extensions I really like are:
REST Client: To make requests. It is script based and supports comments, thus you can use it as a temporary replacement for API docs. Find it to be really useful.
Remote - SSH: Really great if you are working with Remote Servers.
JavaScript REPL: Is really nice if you are working on some algorithm and want a fast response to what you are tweaking.
MongoDB for VS Code: Basically a database client for MongoDB within VSCode.

Theme Cobalt2 - Really pleasing to the eye.

[thatrandomguy]

Absolutely loved the video, the new era of ForrestKnight is definitely something to not miss out on !! About to start my fall semester with my first computer science class! Thanks for all the inspiration Forrest!

[voidmind]

Looking at your chosen theme and the fact that you like dimmed pastels in other contexts, the Rainier theme would probably interest you, since it's a middle ground between high saturation colors and dimmed pastels (the colors look like chalk).
BTW you can disable font ligatures (the merged characters) in the VS code setting and Fira Code (or any other programming font) would render characters without them.

[santiagomontoyas]

Nice vid! I've been using "Bearded Theme Monokai Black" for a while, I strongly recommend, their extension comes with different styles to match your taste

[phucnguyen]

That Andromeda theme is stunning!
I've been using Dainty - Panda Theme for my own VS Code setup too!

[kingwindie]

does anyone have any issues with wsl 2 connection integrating with vscode? usually when my laptop goes to sleep and I come back the connection to wsl2 will be lost and it keeps trying to reconnect(reopen the project in wsl2) but it never does, unless I restart the laptop

[badral-balushi]

well, finally I got the extension for the icons *_* thanks a lot and my fav/current theme is Monokai Pro (Filter Octagon)

[oacl]

Is it possible that the reason VS Code opens to remote (1:33) is because it remembers your last instance? I vaguely remember VS Code opening into remote even after I uninstalled WSL because I was using the WSL features last time I had VS Code open.

[crevedesign]

so for WSL2 this this like dual boot where if I restart PC I have to get back into or once I set it up no matter if I restart it is always there? And then I can just web dev in "ubuntu"?

[elatedbento]

Can I have color themes switch immediately according to the language used? I like Github theme for python, but would like to switch immediately to Dracula when the file is HTML or CSS. Is it possible? Please help. Great video!

[RepByK]

Jesus! I didn't know about an Ubuntu tab on terminal. Had to use google for copleof minutes, but the result is amazing. Thanks a lot!

[GuyLORD]

When I open settings.json it doesn't show the same information as yours. Do you know why?? Or if anyone knows why?

[cloudstrife]

How much you can do in VSCode that you can't do in VSCodium ? I am asking this to run a telemetry free all linux dev system etc outside of the remote ms official extension is there something else ?

[shaynejay]

my favorite theme is "beautiful dracula darker" its absolutely gorgeous

[robertogutierrez]

Came here looking for an answer maybe, the thing is, in VS Code, whenever i save (or auto save), on HTML, long lines break the texts adding a long whitespace (looks like 4 tabs) and a single word goes into another line, when theres enough space for not doing that.
Any ideas? THANKS!