My Visual Studio Code Setup for Web Development
Рет қаралды 1,068,679
Жыл бұрынThanks to Mailgun for sponsoring this video! Head to mailgun.com/forrestknight to try Mailgun today.
Learn to Code with Coursera Plus (7-Day Free Trial): imp.i384100.net/Ke61De
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.
------------------------
🐱🚀 GitHub: github.com/forrestknight
🎥 Twitch: / forrestknight
🐦 Twitter: / forrestpknight
📸 Instagram: / forrestpknight
📓 Learning Resources:
My Favorite Machine Learning Course: imp.i384100.net/YgYEBJ
Open Source Computer Science Degree: bit.ly/open-source-forrest
Python Open Source Computer Science Degree: bit.ly/python-open-source
Udacity to Learn Any Coding Skill: bit.ly/udacity-forrest
👨💻 My Coding Gear:
My NAS Server: amzn.to/3brqO7b
My Hard Drives: amzn.to/3aKetMi
My Main Monitor: amzn.to/3siQfPa
My Second Monitor: amzn.to/3keHT84
My Standing Desk: amzn.to/3boAcbC
My PC Build: bit.ly/my-coding-gear
My AI GPU: amzn.to/3uvmUmz
🔧Coding Tools:
The Best Linux Server Hosting: bit.ly/linode-forrest
@fknight Жыл бұрын
Calling all devs! We've just launched our brand new newsletter, Dev Notes! Delivered weekly, Dev Notes is your specialized briefing into the world of technology, computer science research, and software engineering, tailored specifically for those who are building it: the developers. Go to www.devnotesdaily.com/ to learn more and sign up! We've also just announced Studious, a Notion template built specifically for students to keep track of everything in your student life. For a very limited time, you can receive the early bird discount by going to notionstudent.com and entering your email before the projected launch date of July 31, 2023. Upon the official launch, you will be notified via an email containing your discount code so you can organize your studies with Studious in time for your Fall semester. _Posted July 20, 2023 by Forrest Knight_ *Original Comment:* So, what are _your_ favorite VS Code settings & extensions? And what theme are you running?
@132_priyankrai5 Жыл бұрын
Instead use vscodium
@RianY2K Жыл бұрын
You can try Mayukai Theme if you like. And use material icon theme for icons.
@xezuthegamer8544 Жыл бұрын
Vscode has an auto rename tag feature but it is not enabled by default. Navigate to settings and enable editor.linkedEditing
@pegexo Жыл бұрын
@@xezuthegamer8544 it does not works with reactJs
@Nozxoki Жыл бұрын
The way this dude pronounces andromeda should be a crime
@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 😅
@izkuipers Жыл бұрын
Error lens and Git Lens are two amazing extensions. Being able to see what errors have occured inlined into your code is amazing
@LilYet Жыл бұрын
I don’t like atom dark to vibrant my favourite is firefly pro midnight
@MarkEdwardTan Жыл бұрын
Error Lens clutters the editor but I will get used to it.
@justd1zzy383 Жыл бұрын
Hi @Fantom, thanks for sharing! I just started coding last month and this would help a lot. Would like to add "Prettier" as well which makes the codes easier to read not sure if any of those 4 has this feature. :)
@martinelsasser9729 Жыл бұрын
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.
@logato7128 Жыл бұрын
I believe Andromeda would be offended by that pronunciation.
@DavidCSaint Жыл бұрын
ANdro-MEDa
@DavidCSaint Жыл бұрын
Always good to look up words you don’t know 🎉just to be safe 🎉
@stressedout1354 Жыл бұрын
Funny thing, that is the correct pronunciation in Greek
@graceoverall 10 ай бұрын
@@DavidCSaint an-DRO-me-da 😋
@AndRooooooo 9 ай бұрын
That's as far as I got in the video before jumping into the comments to make sure someone else caught that 😅
@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.
@thatrandomguy2723 Жыл бұрын
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!
@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
@zenbrandon Жыл бұрын
Shoulda told him about the vim extension for vs code lol
@PamellaCardoso-pp5tr Жыл бұрын
bro just didn't knew about LSP navigation on neovim. right now i can do "gd" on any thing on my code and it simply takes me to the damn definition, even if it's something defined on the language itself, it shows me the actual implementation of said function lol. the guy you hired were just a vim noob tbh
@fincali197 Жыл бұрын
Ctrl + D and Ctrl + U(prefferably with zz) be like frfr
@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.
@Nerkzor Жыл бұрын
THANK! I've been looking for a well rounded theme and Rainier does exactly that! I have been using Fira Code for a long time now with ligatures, I prefer with than without now.
@kimuyu Жыл бұрын
It's beautiful. Will be my vs code theme for a long time
@abdulrahmanmohamed8298 Жыл бұрын
thanks a lot for the Rainier theme recommendation, bro! tried it earlier this morning, it's PERFECT
@santiagomontoyas2020 Жыл бұрын
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
@JeffLowkey Жыл бұрын
That's the one!🔥
@phucnguyen0110 Жыл бұрын
That Andromeda theme is stunning! I've been using Dainty - Panda Theme for my own VS Code setup too!
@badral-balushi5911 Жыл бұрын
well, finally I got the extension for the icons *_* thanks a lot and my fav/current theme is Monokai Pro (Filter Octagon)
@shaynejay 6 ай бұрын
my favorite theme is "beautiful dracula darker" its absolutely gorgeous
@romanherrera2060 Жыл бұрын
God I love your channel dude, thank you for being you!
@praveendilruck1169 Жыл бұрын
Thank you bro Very important video❤️
@felixc.programs8209 Жыл бұрын
Great advices here! You motivated me to switch career, start my Tech KZfaq channel, and start passive income. Thanks!
@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!
@TheCodeholic Жыл бұрын
I really loved your setup. In fact I am using WSL2 with Ubuntu as well. However I would add few more extensions. 1. Code Spell Checker 2. Auto Close Tag 3. DotENV 4. EditorConfig for VS Code 5. RapidAPI Client 6. TODO Highlight 7. WSL 8. Docker And I use Community Material Theme (Palenight High Contrast) with Material Icon theme. Great Video 👍
@a4yster Жыл бұрын
i love your php vids!
@tmthy.mp4 Жыл бұрын
I've been using electron theme for a bit, definitely has colors that pop while still being easy on the eyes
@Tendhix Жыл бұрын
Also used that one for a while and rly liked it, until I stumbled over Electronic Moonlight. It's based off Electron and absolutely perfect for me. Such a chill theme. If you like Electron, maybe it'd be something for you too. I personally like it even better than Electron.
@codelanguages Жыл бұрын
Very helpful video. Visual Studio Code is my go-to code software.
@thomasdaskalakis442 Жыл бұрын
Wow, found this channel by YT recommendations, am impressed!
@aguynamedandre350 Жыл бұрын
Strange... I didn't realize I wasn't subscribed. Thanks for a great video my guy!
@alexguillen2493 Жыл бұрын
I like the arch linny idea senor! Would enjoy that vid!
@Cyapow Жыл бұрын
Nice theme. I use phpstorm myself and use Materials oceanic theme with high contrast. Might try and make the switch to vs code once my license ends
@texugobr Жыл бұрын
Great video, I use Moonlight as theme and its pretty good
@joseamayadev Жыл бұрын
Awesome video! Thanks for sharing!
@elddr2 Жыл бұрын
the terminal website is fantastic!
@Simiaaaa Жыл бұрын
My favorite theme is Ayu ! I LOVE this one
@Dalipkumar-wh5tz Ай бұрын
awesome video forest i really enjoyed the complete also gain some insight from you. thanks
@_wise_one Жыл бұрын
I created cpu optimised ec2 instance and installed code-server(by coder), it allows me to use vscode in the browser, it's really fast, responsive and I love it. 100X better than coding on my laptop.
@gffftxxx Жыл бұрын
Do you have the ability to forward ports?
@_wise_one Жыл бұрын
@@gffftxxx not sure
@gffftxxx Жыл бұрын
@@_wise_one in such case it will not be a full development(
@_wise_one Жыл бұрын
@@gffftxxx I don't need port forwarding but if you do, you can use vscode and ssh into ec2, you will have the option to forward port.
@gffftxxx Жыл бұрын
@@_wise_one yes you are right. If I use remote machine with installed ssh server, but If i can not install ssh server on my remote machine but I can install cli utill (code server) ((
@bagwaa9948 Жыл бұрын
rescued the video at 30 seconds when you said neovim was good, I was just about to sharpen my pitchfork :D
@icaroonofre6055 Жыл бұрын
I've been using emacs for my workflow, it works like a charm, it really is funny how people are being bound to an editor/IDE, but in a real world you have to get things done, if spending a lot of time configuring an editor is actually making you more productive, then go for it.
@brhh Жыл бұрын
the live server extension is fairly good for beginners but for more professional use of vanilla js html css coding, it's better now to just npm init vite and start a vanilla project through vite
@abubow Жыл бұрын
Your linux setup looks so cool, could you tell what you're using as tilling manager/ window manager
@utilyre Жыл бұрын
Lol
@fknight Жыл бұрын
AwesomeWM
@paulina5247 Жыл бұрын
Great video! Very useful😊
@TrollingMyLawn Жыл бұрын
Great video! FYI, "Andromeda" is pronounced an·draa·muh·duh. "An-dro-me-duh" gave me a good laugh. Appreciate the tips!
@thaddnarrative 10 ай бұрын
Thanks for this mannn
@satyamskillz Жыл бұрын
This video is gold mine
@suryaaytha7376 Жыл бұрын
I actually tried the theme "oceanic blue", I felt that great and suggest everyone try once
@izkuipers Жыл бұрын
One thing you didn't cover is your font, because that's one thing I did customize in VSCode. My font is Source Code Pro and my theme is One Dark Pro Flat. Oh, and btw, F2 can also change tag names in React, Svelte, etc. Just put your cursor on a tag and hit F2, specify the new name and it'll update it.
@JoelJosephReji Жыл бұрын
I really like the OG VS Code theme and I use it even in my neovim config xD! Also, Gitlens is the extension that I use that you didn't mention (definitely a widely used extension)
@b1zzler Жыл бұрын
with you 100%, I've spent hours trying all kinds of themes just to come back to the default theme as my favorite 😅
@quixote5986 Жыл бұрын
@@b1zzler lmao
@dmitriyobidin6049 Жыл бұрын
3:45 But Fira Code doesn't force you to use ligatures, you can turn them off. Tbh, difference between editors really matters when you thinking is much faster than your typing. For me it is true maybe 10% to 20% of the time. And i tried very hard to force myself to learn vim, but in reality it's just not my cup of tea. I'm not fast enough to fully utilize vim but i'm not ready to give up that idea :)
@d-e-v-esh Жыл бұрын
Vim or neovim even with all the plugins is pretty meh at best and there is no upside of using it these days. Almost every system has a UI. The best way to use it is to just use a vim extension for whatever code editor you use.
@aarontech8048 Жыл бұрын
Thanks, Learning resources !
@mr.mo0nrock272 Жыл бұрын
My favorite theme so far is Doki Theme: Re:Zero: Ram.. the first one.. easy on the eyes and very nice contrast
@rsdnt_of_kyiv 10 ай бұрын
Nice content! Thanks!
@vuongqtvn Жыл бұрын
nice setup 🚀
@taiebxr Жыл бұрын
Anyways just too excited to see you back
@harryporter3116 Жыл бұрын
My favourite themes by far are the dark variants of Gruvbox Material and Everforest, both by the same guy as far as I know. They have softer contrast though, so probably not a super helpful recommendation, hey. For those who like less pop, though, I'd highly recommend either, especially the first. I actually don't mind ligatures either; I generally use JetBrains Mono day to day.
@krazymeanie Жыл бұрын
Jetbrains Mono? You, my friend, are a real one.
@Hinrikao 10 ай бұрын
I was looking for this exactly, but I didn't find your config.json I loved much more than others This one became my favorite Help me, I'm from Brazil we love this guy so much
@eboyHvH Жыл бұрын
Atom One Dark Theme, the best for me❤
@alibinnaseer 9 ай бұрын
The default theme is the best
@gadzbi123 Жыл бұрын
I started using ArcoLinux 2 days ago and there is a lot to learn but it's very rewarding. Hope to see a vid with you leaving Windows Soon :)
@abdelrahman9186 Жыл бұрын
10:23, you don't actually need this extension, just hit ( f2 ) and rename the tag to whatever you want, it works for renaming other things like: variables, functions, classes... etc.
@yb3985 Жыл бұрын
yeah, nowadays f2 (refactor) is quite impressive. In my case, i use it a lot to rename variable, function, and class across different files, and it also automatically saved.
@paerra Жыл бұрын
Comic Code font. I love it!
@mardibenton7366 Жыл бұрын
Thank you so much @forestknight you legend! very useful!
@Whisky4Brekfest 2 ай бұрын
I’m way into the super vibrant/saturated look. I run the Monokai Charcoal main theme.
@ahmed-osama2022 Жыл бұрын
Thanks a lot for sharing, It's a very helpful content 😃, I really have a question for you: Where did you learn react and nodejs??
@theowillis6870 Жыл бұрын
theme: doki theme. allows you to have anime girl stickers in your editor and a theme surrounding it (sayori-dark for the bg and senko for the sticker is my fav and current) terminal: powershell (WSL is great. but until you have todo git commits. then you have togo through adding your git token) wakatime: this is an extension that tracks your time coding discord RPC. code runner as well. saves time so you wont have to write in the terminal to save your code. you juts press a button.
@kia4now Жыл бұрын
Great video, can you show how to have multiple monitors in vscode? Being able to undock various tabs and put them on seperate screens is so helpful and I can't seem to figure out how to do it with vscode. WIth pycharm and spyder it was easy
@andres3665 Жыл бұрын
Vs code with the vim extension is all I need.
@b1zzler Жыл бұрын
I love ligatures, but my favorite font is Cascadia Code / Caskaydia Kove
@sem.2803 Жыл бұрын
bro changed my life with auto close tag
@naturalfps Жыл бұрын
You can always use the Vim Hotkeys in VS Code if that's your cup of tea.
@shanecorning5222 11 ай бұрын
Nah I'm gana use "YOUR" theme, here, homie, lookin' SLICK yes indeed!!!! ... .. And some nice extension recommendations that "Prettier" is a Must Have for any real coders out there. For sure. WOW , VS Code is so awesome. ~ Cheers , ~ "the" Rev
@ScepticEngineer 6 ай бұрын
Fira Code is great when working in Elixir. Pipe functions look great
@calebburgess309 Жыл бұрын
Works well!! DANKEEE
@Imbalize Жыл бұрын
I've made my own theme, or well. It's based on Shades of Purple - but I've tweaked some parts. It's called 'Colorful Explosion'. Currently working on a new version to see if I can make any improvements
@hoywd013 8 күн бұрын
It's kinda same, just some minor changes in it, but appreciate that.
@Yash15361 Жыл бұрын
Love your content :}
@iagod6660 Жыл бұрын
reason for lint instead of hint is probably because a a "Linter" checks for coding, HTML isn't coding, it's just a markup language, so he gives you a hint to make it better
@foo3268 Жыл бұрын
my fav theme is the blueberry series, I find them pleasing but banana has better contrast than the default one. I even built my site around banana blueberry.
@bamideleemmanuel2036 Жыл бұрын
can you share a link to your site?
@Chiramisudo 9 ай бұрын
I *am* subscribed Forrest, and have been for some years. You look much better with the shorter hair too BTW.
@Mr.AmeliasDad Жыл бұрын
What made you swap off of Arch? Also, I would be very interested in seeing that setup. Thanks for all you do!
@LanaCodes19 Жыл бұрын
Deepdark Material Theme is cool)
@datkumar1024 Жыл бұрын
Some useful extensions: Import cost DotENV Thunder Client (Postman alternative)
@BrockRocket Жыл бұрын
Themes I use in rotation: Night Owl (light + dark) Cobalt2 CyberWave DuoTone (package of multiple themed themes) Noctis (package, light + dark) Red Tokyo Night/Storm Tomorrow Night Vue
@ahha4264 Жыл бұрын
for someone who try to get into linux community and choosing arch I would like to see video of setup arch for work enviroment for web development the more detail it get the better I dont care how long the video are I will watch the entire video also yes I do know there a better distro for beginner friendly but still I want the ultimate customize ability so yeah
@brunofunnie Жыл бұрын
TabNine is awesome, been using it for a while. Once you use it is impossible to stop, the same goes for the terminal, when you install "fish-like autosuggestions" with bash or zsh is impossible to not use it.
@BilalAhmed-tw5cr Жыл бұрын
i have issues with it , it makes all other extensions hang , have u ever encounted this issue or
@brunofunnie Жыл бұрын
@@BilalAhmed-tw5cr no, everything work fine, maybe is one of the other extensions that is conflicting with it, maybe the machine is out of resources (ram, disk) as well
@RoflCopter101101101 Жыл бұрын
12:38 Sounds like a fun idea!
@Jonas-sg1eo Жыл бұрын
Would be nice to know how you even open or where did you find all those defaults settings.
@lillyinthefield2787 9 ай бұрын
I wish you did this video for newbies
@maits18 Жыл бұрын
I used Just black as my theme for years but recently I switched to Seti-Black
@somdobomk Жыл бұрын
Gruvbox Dark Hard on everything possible! Victor Mono font ftw!
@OMGZilka 8 ай бұрын
Vanilla theme baby!
@blagojcopizov5940 Жыл бұрын
Thank a lot !!!
@sebastianriquelme1 Жыл бұрын
Nice video!
@SegrainesAMV Жыл бұрын
I legit never knew the use of minimap till today.
@royalcaster5204 Жыл бұрын
"Code Blue" very recommended color theme
@Oswee Жыл бұрын
Unfortunately for a few years already I have no any IDE installed anymore. All i have is little cozy gruvboxed Neovim. :) I just get sick of using mouse more and more by every year. But... i have a custom keyboard with custom Colemak layout, so its more natural/ergonomic for me to live in the terminal. Before my current setup i liked VS Code pretty much. Thou, can't remember any favourite plugins for it. Ouh... and lately I felt in love with Comic Code font.
@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.
@c2k482 Жыл бұрын
i would love to learn how to make a terminal website just like u That was anwsome!
@Nounearthlyglow Жыл бұрын
Chapters would do this video wonderfully.
@PetePeteRepeat Жыл бұрын
Call me basic but Community Material Theme: Darker is my current and favourite VSCode theme by a long way ;)
@Jrizy. 10 ай бұрын
LOVING that keyboard - what is it, if you don't mind me asking?
@royz_1 Жыл бұрын
3:29 this is font ligature. this is available in lot of modern fonts and you can turn it off. even for fira code
@flalspspsl6858 Жыл бұрын
ah love that an-drow-meta theme
@rumoneanderson270 Жыл бұрын
I really want a collab between him and the primeagen
@brhh Жыл бұрын
for html tag changer users, use Pug, not a vscode extension, an html pre-processor. Really improves code readability and doesn't require you to end your html file with
@slyseb Жыл бұрын
I'm a bit late to the party, but I have been using and liking the Palenight Theme
@Sergfio_S.F Жыл бұрын
Very good 👍🏼
@danialothman Жыл бұрын
reminds me, i need to spring clean my android studio settings
@spencerwilson-softwaredeve6384 Жыл бұрын
vim mode in vscode is the best of both worlds
ForrestKnight
Рет қаралды 570 М.
LearnWebCode
Рет қаралды 137 М.