How I Setup And Customize VSCode
Вставка
- Опубліковано 15 чер 2024
- Tabnine: www.tabnine.com/now?...
Get 50% off for 6 months with this link: www.tabnine.com/pricing/check... (Only valid for the first 100 people)
VSCode is amazing, but can be a bit overwhelming with all the options and extensions available. In this video I will be showcasing my entire VSCode setup and sharing tips with you on how you can setup your own VSCode.
📚 Materials/References:
Tabnine Demo (Spotify Clone): • How To Build A Better ...
Blog Search Extension Tutorial: • How To Create And Depl...
Pizza Extension Video: • How I Ordered A Pizza ...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:20 - Live Server Extension
01:10 - Tabnine Extension
02:08 - Prettier Extension
02:49 - GitLens Extension
03:52 - Other Extensions
06:42 - Why I Don't Use Many Extensions
07:07 - My Theme/Font
08:41 - My Settings
#VSCode #WDS #WebDevelopment
Get 50% off Tabnine for 6 months with the below link.
www.tabnine.com/pricing/checkout?planInterval=month&promotionCode=WDSPRO
This link is only valid for the first 100 people.
Font Switcher is a nice way if you want to change your font easily.
Kyle you seem like a cool guy
Kyle, a suggestion for your next video: How do I setup and customize my Hair.
had me in the first half ngl
😂😂😂👍
.hair {
display: fantastic;
height: yes;
}
his new channel will be called Dev Hair Simplified
Use css
We need a hair tutorial 😳
Step 1: Gene editing
Step 2: Profit
Agreed
and skin routine
You guys havent seen the Javascript React Snapchat Web Devsimplified filter?
I love the “biscuits” extensions: they label the closing brackets, which is great when the opening bracket is off-screen above.
pls make video on what shortcut keys you use to speed up your coding.
In a world filled with repetitious VSC extension lists, this was a great quick-paced video. I learned a lot and loaded some new (for me) extensions
I accidentally found this channel and now I regularly watch all videos, best video bro
thanks for TODO Highlight, really needed something like that!
Brilliant, I was thinking I need to search for VS code set-up, and your vid popped up, thank you - you read my mind :)
Consider adding Jumpy and Bracket Pair Colorizer to your list of must-have plugins. The first lets you easily jump to different parts of your code. The second helps match up different brackets.
I don't mean to trigger anyone but when I looked up Jumpy I thought "Who needs Vim when this exists"
ESLint is arguably one of the most important extensions.
Pretty helpful. Thank you for your tips.
Thank you for your videos young Sir. Very professional and to the point. You will be or already are a rich man.
love this video thanks you so much
Thanks a lot for your efforts
webDevSimplified is my now "go to" tutorial channel 👍
Great job bro 🔥
Font Switcher is a nice way if you want to change your font easily. I've been using it for months and love it.
Cool tip: You don't need to modify VS Code's CSS to make the text bigger just for videos like this -- you can simply press [CTRL] [ + ] or [CTRL] [ - ] to Zoom the whole GUI of the program. Super useful when I'm switching from a large monitor to smaller screen too!
I actually wish more software had easy UI zooming feature like this, as High DPI support on Windows is really janky and inconsistent.
Tabnine is incredible!
Thanks for the video!
Thank you for the suggestions. I was searching about Gitlens and you just show it in priority.
Right on time!
Tabnine does work for me anymore!
I'm gonna watch this after I shower eating breakfast
Wont your kitchen get wet amd mucky if you shower there?
@@hikari1690 heeeeeeheee
I'd love to know your thoughts on tailwind CSS. As a company we are looking at this as overall most of our developers use bootstrap as a base and the applications we build in often use bootstrap, however, it seems like it has some potentially good reasons to use rather than bootstrap, especially when you generally override much of bootstraps classes.
thnQ for sharing these valuable VSCode extensions Kyle :-) ditto on 'short-cuts' video to help speed up productivity
Greetings from Uganda 👍👍
7:24 Why don't you make use of Workspaces then? You could have a custom workspace specifically to your workflow or youtube channel, and the general workspace just as you like, or even another custom workspace with all the modifications you would want to have enabled or different from the default.
Thank you for this video. I just started coding HTML and CSS and has to download VS Code and was overwhelmed. Hopefully, this helps a bit! Now to find a tutorial lol.
Cascadia Code is also a great free font with ligatures I would recommend trying out
Thank you
Thanks! GitLens is pretty cool.
wow!! first time i am so early
thanks!
Спасибо Кук, полезное видео )
For the theme I would recommend using "JellyFish Theme" as it's so beautiful and awesome to work with.
I use _rouge_ theme. It took me hell lot of time to find me a theme that I liked finally.
Hi, thanks for your valuable videos.
I can't figure out how to configure VSCode to run standalone js file and get results in the embedded console as you do in your videos.
Thanks to light my candel.
I also recommend Todo Tree, provides highlights in the comments but also let's you view a list of all of the To do you commented in all the files.
Love u bro
Hi Kyle, many thanks for this tutorial. I only wish that you had included how to get php to work on VS code. I have tried everything and when I run the php code I get the following error:
'php' is not recognized as an internal or external command,
operable program or batch file.
I have added "php.validate.executablePath": "C:/php/php.exe" to settings json but the error still is there. Others mention paths with an xampp directory which is not on my windows 10 machine. I am at a loss??
I have to say that you CSS videos are really helping my website development skills, especially your cheat sheets. Thank you....
Hi Kyle, maybe you can help me on this matter. I need to know how much time I spent in each file of a considered workspace, I mean, I just need to know the time I spent to wuite a certain file (.html, .js, .css, etc.), so, at the end, I have a notion of the total time I needed to develop an entire project. I looked on VSCode extensions, but I don't know if I'm looking it correctly. I also made a search on internet, but I found very complex extensions, but they don't make that kind of register. Thanks a lot!
I love WebStorm or PhpStorm from JetBrains :)
You absolutely need to see the extensions Thunder client and Quokka
Oooh! He covered quokka last week. Started using it because of that - and it’s been absolutely great!
yes Thunder client absolute gem
Try "Thunder Client" extension, you will stop using REST Client. Great video btw.
Hi Kyle, just curious… is there an effective drag and drop wysiwyg extension in vscode?
Hey Kayle i m getting little consfused about to use plugin of Prettier ( the one for the PHP) can you please guide on that
Hi quick question what notebook would handle visual code with all these extensions? And another quick question what computer setup would handle this ? , how heavy is this personalized visual code in the end?
Do you have a good tip for any FTP based plugin for editing on live sites? This only feature is what i am missing on VSC. I have tried many ot them. All user unfriendly.
hi, what font size do you use while coding (when you use desktop)?
can't wait to see pizza! =D
I really hope that the "tabnine cracks it up to eleven" was a reference to the Spinal Tap interview
I have a question that i cant find anywhere. How do I do a console.log shortcut (clg) ?
Hey Kyle, how are you using windows for coding? I tried but WSL was such a pain for me.
amazing video thank you kyle. How about this video: How do I setup my hair"
We want a hair tutorial 🌚
how do I change and update something in settings.json when it's read only editor? Had tried some methods and made VSCode run as an administrator as well but it didn't work
If you format on save an ejs, it adds spaces that break the code.
Will you do a Typescript tutorial?
What code do you use for the custom css and js extension? I want big files like you.
This video was in the tabs9 news letter, keep up the good work mate. Not that I like getting news letters fucking spam...
Clutch 🙏
Hey kyle i suggest to use thunderbird client for rest API just give it a try 😅
4:10 where i get the css classes of the editor to customize?
Do you recommend autocomplete for someone who is learning to code? I have avoided installing tab-nine because I am worried that it will do too much of the work for me and I won't learn as much.
Yeah true
Nord theme is beautiful
useful
Prettier is not working in the Laravel framework. Any code formatter to format controller and models,resource file in laravel ?
Pls suggest
Do you order pizza by your extension?
Error Lens is the best extension
Hey Kyle, what's your opinion about Webstorm? My colleague told me to use it instead of VS Code.
Web Strom is dedicated IDE , and vscode is code editor , try webstrom may be you like it
Can you do a video on how to organize your files for a new web project.
next react project for beginners or JS project ?
🍕🍕🍕
Could you please give a tutorial on HOW TO download html template from Themeforest, how to edit it in Visual Studio Code (which extensions are needed for that) and how to preview the website. I'm stuck and frustrated, please could you help me with this issue? Thank you in advance
Tabnine is awesome, the only minor issue with it is that it alone occupies more than 1GB of your memory.
Thanks! You can register Tabnine hub and enable Tabnine Cloud in your IDE. This way the model won't run locally
thanks, please make a video about a safe FTP module to remote edit your files. Some plugins are dangerous and do not sync correctly
great
Great
Like
2 quick questions:
1) what is ur favorite theme in vscode?
2) is there another extention like "html css support" but in reverse mode? (I mean I wanna set class or id in html file first, and then I wanna use them in css file with getting autocomplete of class names and id names from html file!)
* in Adobe Dreamweaver it is possible. What about vscode??? *
I know that the question wasn’t addressed to me, but I will try to help you out.
Monokai + Material Icon Theme + Fira Code + Font Ligatures = 😍
Checkout:
- VS HTML to CSS
- CSS Navigation
- CSS Peak
- IntelliSense for CSS class names in HTML
hope this helps you, best of luck.
@@eliasb6244 hey dear Elias,
Nice name 😉
I will try those extentions.
Thanks 💜
Wait, you use bash instead of zsh?
i cant launch vscode via git bash anymore.. it says code: command not found. please help, anyone? thanks!!
Look for a Thunder Client extension instead of Rest API, they are the same but thunder has GUI, more like a postman
Are you not using Better Components (by Aaron Bond)?
Do you know JetBrains Mono?
I have a question about VS code. I have an .ejs file where over half of the code changed from working code nice and neat, to a ton of diamonds and circles with "?" and couple other characters. The code still works but I can't edit anything... is there a way to fix this, or should I just start a new folder and clone from github?
I had to take my hard drive out of my laptop and boot from USB (internal ssd connection failed), laptop works again.
It's a Windows machine too
Does anyone else experience really slow intellisense with styled components? I really like the idea but it is so much slower that node-sass intellisense. Can’t tell whether it is the extension or a problem with my machine.
i have a problem, maybe you can help me out: i have two divs next to each other, inside another div. i want the left div to grow with its content and the right div to grow (and shrink) with the left. if you have an answer please, i have lost sleep over this
i forgot to specify its about their height not their width. to give some context: i have a texteditor and a list of items next to the editor that i can dragDrop into the editor. i want the editor to grow with the input and the list to always match the editors height
Could you please make a video about Linux, like should beginner Web Devs use it or not.
Look at Thunder Client as a Postman/Insomnia replacement
I was using TabNine and it does a great job, but it consumes 4-6GB of RAM on my Win10 laptop - so I have to disable it.
But I will give them a second chance
Checkout Evans dark theme
Im gonna eat after watching This
Pro tip: Tabnine requires you to pay for full access but the 'Kite' extension is similar to Tabnine, just free
Nice video
You didn't even watch it
@@m3mory_leak344 It says it was commented 4 days ago for me
@@m3mory_leak344 I did
I FOUND THE VIDEO IN WDS PLAYLISTS AND IT WAS NOT PUBLIC IT WAS ACCESSIBLE THROUGH LINK OR THAT PLAYLIST
Bug?
the AI autocomplete is awesome, it starts guessing real credit card credentials which translates in free money forever.
why did u stick with window at this stage ???
hate that ligature thingy. Not super apparent what exactly I'm seeing. Same happens to me with consecutive underscores in PHP.
We use eslint-prettier and leave the extension off our IDEs.
VS Code Intellisense doesn't work on windows most of the time. It's frustrating 🥺