15 VS Code Extensions For Front-End Developers in 2019
Вставка
- Опубліковано 14 жов 2024
- In this video I will go over and 15 of my favorite Visual Studio Code extensions for front end development in 2019. I will show you how each one works, settings and more
Sponsor: DevMountain Bootcamp
goo.gl/6q0dEa
💖 Become a Patron: Show support & get perks!
/ traversymedia
Website & Udemy Courses
www.traversymed...
Follow Traversy Media:
/ traversymedia
/ traversymedia
/ traversymedia
It's 28 mins long because I can not bring myself to just make a video telling you what the extensions are. I have to show you how they work and give examples. Here are the timestamps :)
Live Server - 0:58
Live Sass Compiler - 2:40
HTML CSS Support - 5:58
Auto Rename Tag - 7:36
Prettier - 8:08
JS(ES6) Snippets - 11:12
Turbo Console Log - 13:16
Indent Rainbow - 15:20
Bracket Pair Colorizer - 16:08
Code Spell Checker - 17:06
REST Client - 18:14
GitLens - 21:28
Auto Markdown Preview - 24:49
ES7 React/Redux Snippets - 26:05
Vetur - 27:30
A lot better this way, Brad. Thanks!
Thanks for another great video Brad. Can you please do a video with some tips on how to write good documentation? It will be very beneficial for people like me who have been learning code for a while but still have no experience in writing documentation.
What do you use something to export or sync vs settings and import them into another vs client?. Thnx for the video
Yes, "Settings Sync" which I almost put on the list
Yes much better this way. @@darkbluebossa
0:59 Live Server - Autoreload open page when save.
2:41 Live Sass Compiler
5:57 HTML CSS Support - class and id atribute completion
7:37 Auto rename tag - renames paired tags to match
8:08 Prettier - Code formatter
11:12 JavaScript (ES6) Code Snippets - refactors shortcuts and expressions
13:17 Turbo Console Log - console.log() utilities for debugging
15:15 Indent Rainbow - Make indents more readable by adding colors
16:08 Bracket Pair Colorizer
17:09 Code Spell Checker - underlines possibly misspelled words
18:18 REST Client - makes http requests, postman-like
21:19 GitLens - improves vscode git integration
24:48 Auto-Open Markdown Preview
26:10 ES7 React/Redux/GraphQL/React-native Snippets - helps you generate snippets
27:32 Vetur - Vue tools
thanks
thx
every one of such videos has one awesome timestamp guy like you. all of you guys are godsend. thanks a lot maaaan !!
Still waiting for a Traversy Media extension that integrates your videos in my VsCode lol
Hell yeah 😍😍
We can work all toguether to create something like that 🤔
it is called 'a second monitor'
you would be distracted for life xdd
@@lamstechgaming1899 so, did you already make a github repo for that?
Most of "top * vscode extension" videos are boring and have extensions that everyone has, but yours, like all your vids, is interesting and unique. THANK YOU
I'm always delighted to look for specific topics, to find Brad already having a well made video on the topic. Totally thankful you do what you do, Brad. Thanks!
Thanks for always providing premium content. you are the best Brad!!
This is awesome. Didn't even think to look for a live reaload extension but the amount of time I know it'd save...
This video is produced by someone who really knows what he is doing vs. three others that popped to the top of Google search. The others were done by people who weren't really too familiar with VS Code and/or web development. Put it on 1.5 speed if you think it is too long.
Hi Brad,I love the way you teach. Thank you for doing what you're doing. This video has really helped me out!
The "Auto Rename Tag" functionality appears to be built into VS Code now with the proper setting. Go to your settings file, click on the JSON link in the top right, and add the following to the file - "editor.linkedEditing": true
Excellent video, nice summary of quality extensions, thank you.
na, It doesn't work when we delete all name of tag. I tried
eg if we delete some letter form it works but if we delete all it doesn't work
Brad, i always follow your courses and learn a lot from them. I do really enjoy your courses. You make things super easy to understand. You are awesome. Thanks million for sharing your knowledge with us.
Try turning on the Screencast mode, it shows what keys you press on the screen, super useful for videos!
I just discovered this feature and used it in my most recent video! It's awesome 🤩👍🏽
Thought I had some decent extensions, but these are great :) adding them now. Thanks man
what are some of your favorite vs code extensions?
curious to see a little insight as i know how much time it takes to try them all to see what fits you most..
hey Brad,
you are just amazing.I like your content.I started my coding journey few month ago and just found your channel..and just what an amazing tutor you are..
I just wanted to tell you that pls keep making tutorial..they help us alot..keep coding..
I really just want to say thank you very very much for these videos and other stuff on your channel, they are very useful and very perfect tutorials, etc... . and the way you talk is really clear and I can hear your words very easily. so much thanks for your videos. wish you the best
I love the way you do things like present your videos/content. as well as how you share the knowledge that you have!
Keep up the great work and also on Udemy! (Bought your JavaScript course and I have learned so much from it!)
Another awesome video, Brad! I installed several of the extensions as you went through them.
A * long workaround * for Linux users developing PHP, to get the 'Live Reload' to work. If you use 'Live Server' in VSCodeyou can not submit a form or call a script from your current page, as the page is not running off of you web server address but rather the localhost address (especially true if you are using a virtual setup like Vagrant). You can install the live reload extension for your browser but VSCode does not seem to have that extension and does not seem to want to cooperate. In Chrome you get the message to 'install "guard live reload". The workaround is to install the "Live Reload" extension in Brackets and open the same project in both Brackets and VSCode. Now you can enable Live Reload in your browser. Navigate to the proper URL and now when you save the file the browser would automatically reload (with a few millisecond delay). With this you can even submit your HTML form, call another script and everything goes thru the web server properly. I usually keep different files of the project open in multiple tabs, since this won't switch tabs automatically for you like Brackets does.
Also, there is good news. The Brackets project is alive again, with an update expected soon, from Bangalore. Hope they make it a bit faster and fix the lagging that happens sometimes. For the pure CSS coders there is nothing like seeing the changes being updated as you type the keystrokes. Great for studying CSS.
greatest gift from Microsoft to developers
1) VSC
2) made GitHub free (unlimited private repository)
3) Typescript
This was a great video. One extension I don't see that many overlook is the simple Todo Tree (more for teams) extension. Thanks
awesome video as always! Brad are there any plans as of now for another udemy course?
In addition to most of these extensions, I'm also using TabNine auto-completer which works really good.
It's always the little ones like 'auto rename tag' that make the difference for me. And no one ever covers them in videos like this. They just list all of the major ones that everyone has already made 50 lists about! So thanks for diving deep into some of the smaller plugins that you use.
Random VS Code fun fact:
If you press Ctrl + Enter it creates a new line under your cursor without breaking the line you're on!
Ctrl+ Shift + Enter does a similar thing, but creates a new line on line just *before* your cursor
Great work! I am grateful for you Brad, You've helped me a lot.
one thing is I want to have an office space for my freelance work(full-stack developer) so I'd suggest you doing a video to tell as about what you did while you freelancing, thank you
reported this channel for being too good. no one man should have this much power.
In future updates VS Code should implement a built-in feature where we could request ideas for NEW extensions... its like you code and instantly come up with some concept that would make coding more productive (best ideas always arise while coding), and then you can post it to the public feed, which is available for curating for other VS Code users... Top voted extension ideas each week or so gets on top and might be an awesome source of inspiration for aspiring developers looking to contribute... This way the already awesome VS Code would become even more community driven
Amazing Thank you !! I am about to start at GA and I am getting my environment ready!
Goodluck with that, a friend of mine just graduated from general assembly like a couple weeks ago here in Seattle. What city are you in?
@@hassanabdinur5603 I am in Dallas. :D
You are the best Brad...please keep doing the great work!!!!
Thanks man, found a lot of these to be useful. Can't believe I never thought to look for something like turbo console logger.
Thank you for these. I am trying to learn more about web development stuff and going through some tutorials now. Some of these, like the one that auto completes classes will be super useful.
Do you think it's worth learning a css preprocessor like sass or stylus even if I'm only planning on doing personal projects?
Even your simplest tutorials are awesome!
Thanks for sharing, man :D
Awesome video, easily see how natural the code comes to you i hope one day I am the same. Thanks for the advice lots of useful pointers in here
Hey Brad your videos are always inspiring. If you want to know then the 'e' in Vetur is pronounced like in seven and Vetur means Winter in Icelandic :D
Great extensions for VS Code. Excellent content and explanation as always, thanks for sharing!
Console log turbo will be a blessing!!
I loved it. They were just so useful. And most importantly these extensions can be used on daily basis.
Do you have an extension or way for sorting imports in react separated by node-modules, absolute, relative imports?
I would also add Quokka on this list. It's awesome, Brad.
CANT WAIT FOR UPDATED MERN COURSE !!!!!
Rest Client right in VS !? You sir are the real MVP. Gracias.
GitLens and Brackets pair colorized are awesome, thanks a lot!!
these are very useful, most of them is in the phpStorm, I need to check if the REST is there. :)
THankyou so much man! It was really awesome!
*HI Brad, great video....but is there a way of installing all or many of these extensions in one attempt ? This is useful when automating Virtual machines images for multiple machines that need VSCODE up and ready to use.*
Super_Cool_Guy ! You could create a list of recommended extensions and VSCode would then prompt you, asking if you’d like to install them
@@askanymark how exactly ?
@@Super_Cool_Guy code.visualstudio.com/docs/editor/extension-gallery#_workspace-recommended-extensions
You're looking for Sync-Settings - marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
It takes a few minutes to ensure that you're pointing to the correct gist. And make sure you have every instance auto-downloading and auto-updating!
I watched and loved the Rust crash course. Could you do a simple web server using Rust? Maybe use Actix-Web or Rocket focusing more on the Rust specific features like ownership and lifetimes further building on the basics you covered in the crash course?
Which screen recorder do you use Brad??
Thanks, Brad! Very helpful!
Hi, Brad!
Thanks a lot for this video!
Can you please suggest some extension for PHP development?
*THIS WAS NEEDED THANK YOU*
Thank you for this list, very helpful
Thanks alot for for sharing. As allways, it's worth to enjoy your content.
I would love to see a complete Java/Flex with VSCode crash course!
I'm fighting to use it... The biggest problems are the autocomplete (not as good as in Eclipse/FlashBuilder), debug (breaks easily) and to run servers like JBOSS.
very cool, "prettier now" gives more control setting
Thanks again Brad. As always very helpful information.
Thank you a lot for this, absolute legend
thanks for teaching and putting focus on this
shades of purple theme is looking good
Thanks for sharing... Are there any chance you could teach about Git - Branch, Merging, Revert, Reset and etc?
These really improve workflow! Thank you!
Question, does prettier not format you HTML in really weird ways? Having an id, class, onclick, type etc.. on all at the same time will format the html it weird ways and it puts the brackets on their own lines. Havent found a way around it
Awesome as always, REST Client is a golden nugget :)
Thanks a lot man that's very useful
Version lens and Import cost are also cool plugins.
Wow, its quit explanatory, I love this. Thanks man
Simply great... Thanx Brad...
Thank you. These are truly useful extensions)
These extensions are flipping sweet!
Oh and nice video Brad! xD
Thanks for the list of extensions @Traversy Media.
As always - Most Useful
Please make this updated video for 2023.
Thank you sir.
@28:00 "If you're an Angular developer, I would suggest ... "
*ahem* ... Switching to React or Vue
@@ilya-zhidkov Yeah, I disagree. I mean, many years ago we were all writing web-apps with just jQuery. if someone told you today that they were still writing web-apps that way, you'd tell them to pick a framework like Angular, React or Vue. But they still know javascript. I have written apps in all three frameworks - and Angular is just a pain.
Thanks from Rhode Island homie!
IF PRETTIER DOESN'T WORK DO THIS: go to settings and search default formatted there none by default then choose prettier code formatted to work for it, THAT'S IT man, LETSGO
Thank you so much Brad for the extension!
thank you so much, it was really a needed extensions!
Thanks Brad
Thanks mate, helping a lot, blessings from noob web dev.
thanks
Do you just install all of the extensions you use for everything and then disabled what you don't need for a particular work space, i.e. if you are one day working on front end and then the next day doing laravel php work is there a way to group extensions so that you can disable all and then enable extensions from a particular group for a particular type of work you are doing ? Sorry for the lengthy question.
Great video! Thanks a lot.
Great video. Thanks.
Really appreciate this. Thank you v much :)
Banger every time
I was curious if anyone had suggestions for the prettier plugin because I can't get it to work consistently. I loaded it and finally got it to work but when I opened another workspace it quit. By the way Brad, I am loving your UA-cam channel and just downloaded my first course from udemy. Thanks for your contribution to programming :-)
HERO!! thank you so much Brad!!
Hey Brad , thanks for the video, always appreciate the efforts you put into your content, I just have a question, when ever I use prettier and use format on save in HTML files, I end-up with the horrible format where if my single line of code is more it divides my code as below:
I have same challenge. Don't know if I should just delete and move on.
What's your opinion on Telemetry ? and 100% remote work compared to in person programming in large team ?
I have used Dreamweaver for the past 15 years. I would like to switch to VS Code but what I haven’t figure out is how to use a template. For instance I have a 20 page website and I want the banner, menu and footer to be the same on every page so I would make a template. In Dreamweaver you can apply that template to whatever page you want then when you make a change to that template it changes it on every page i.e. adding a new menu item. How do I do this in VS Code? I also think that would make a great lesson for everyone. I do know some coding my Dreamweaver spoiled me by doing everything for me.
You have to code it in a partial file and include it in every file that will need it, better use a framework for this medium.com/@AmyScript/how-to-reduce-reuse-and-recycle-your-code-389e6742e4ac
Thanks Brad..great video, as always :))
Thanks a lot Brad
Hi, Brad this is Narendra Maurya with a tutorial request based on Vue.js with Vuex authentication application with Express and passport somewhat like MEAN Authentication series or Devconnector application....
its really helpful
FYI there is a new version of Bracket Pair Colorizer called "Bracket pair colorizer 2"
That was a great pun, Brad. I'll be using git in it, (chuckles) 'git init'
My best mentor
Any chance you could make a video on Jekyll? That would be money. Good vids, though.
Am I the only one that thinks that SETTING UP and keeping the ORGANIZED project environment (not the coding itself) is the hardest part?
thanks Mr. Brad
Thank you Brad!
Thank you.