Visual Studio Code Tutorial for Beginners – Introduction

Are you looking for a free, cross-platform and highly customizable code editor? Then Visual Studio Code might be what you are looking for so let’s explore it in this video!

———-

10 helpful shortcuts we use (below the video): https://academind.com/learn/web-dev/visual-studio-code-introduction

Want to learn something totally different? Check out all other courses: https://academind.com/learn/our-courses

———-

• You can follow Max on Twitter (@maxedapps).
• And you should of course also follow @academind_real.
• You can also find us on Facebook.(https://www.facebook.com/academindchannel/)
• Or visit our Website (https://www.academind.com) and subscribe to our newsletter!

See you in the videos!

———-

Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

Comments

me you says:

please do a video on https://nativescript-vue.org/ … if its any good

samran salyiohh says:

I have tested vs code to edit my file hosted on server vía ftp , it was realy a nightmare every X minutes its deconnecting

Ismaeel Shuaib says:

VS code makes my work so fun! Thanks for the tips @Max

Vince H says:

great

anne p says:

hi, happy friday! one question: how can i do this in visual studio code: ‘You can let Emmet do this for you: simply add “trim“ (|t, pipe-t) filter to abbreviation to automatically remove list markers from wrapped content’ (Removing list markers Whenever you copy text from, let’s say, Microsoft Word) like seen here https://docs.emmet.io/actions/wrap-with-abbreviation/

Barjosa31 Blogspot says:

Manu, I applaud You!

I P says:

Thank you! Really useful intro for me (a begiiner, of course)

Juan2003gtr says:

If you are reading this, please buy some of their udemy courses to support their great work. Those courses are excellent, you won’t regret it….Invest in your education

Ronak Dumaniya says:

One basic things you didn’t mention how to run project in vs code which is problem for beginners.

Academind says:

As the video is a bit longer, here are some timestamps for the core topics, I hope this helps:

Download and Creating a Project => https://www.youtube.com/watch?v=VqCgcpAypFQ&t=0m55s

Writing our First Code => https://www.youtube.com/watch?v=VqCgcpAypFQ&t=2m30s

Splitting the Code Editor => https://www.youtube.com/watch?v=VqCgcpAypFQ&t=4m30s

Exploring the Activity Bar => https://www.youtube.com/watch?v=VqCgcpAypFQ&t=5m37s

Status Bar & Panel => https://www.youtube.com/watch?v=VqCgcpAypFQ&t=7m43s

Customizing VS Code => https://www.youtube.com/watch?v=VqCgcpAypFQ&t=9m09s

Emmet & Intellisense in Action => https://www.youtube.com/watch?v=VqCgcpAypFQ&t=12m31s

Go to Definition & Peek Definition => https://www.youtube.com/watch?v=VqCgcpAypFQ&t=15m24s

Extensions => https://www.youtube.com/watch?v=VqCgcpAypFQ&t=17m10s

Extensions we are using => https://www.youtube.com/watch?v=VqCgcpAypFQ&t=18m06s

Introducing Shortcuts => https://www.youtube.com/watch?v=VqCgcpAypFQ&t=19m03s

Diving into the Settings => https://www.youtube.com/watch?v=VqCgcpAypFQ&t=24m15s

Understanding Workspace Settings => https://www.youtube.com/watch?v=VqCgcpAypFQ&t=26m40s

Multi Root Workspaces =>
https://www.youtube.com/watch?v=VqCgcpAypFQ&t=31m02s

Muhammad Shuvo says:

This is an off-topic question!
I’m facing a problem with External style sheets (CSS). Whenever I write code in external,
the live preview of my style sheets is flashing in the browser which is very annoying.
Can anyone help me with that? How can I get rid of it?

Adolf Ezeribe says:

Wow, Enjoyed this intro. VS Code seems like the future. Can you do another, on how to use it for PHP development, integrating liveserver, linting, etc., please

Roger Price says:

Super explanation – thanks. PS am enjoying your flutter course on Udemy!

Tanveer Singh says:

Fourth comment 🙂

Michael Hofer says:

Hey @academind! Really good videos on your channel!
What editor/IDE do you use for PHP programming? Do you also use vscode or do you use an IDE like PHPStorm?

ESPIRA MARVIN says:

hey can you make a tutorial of a dynamic slide that gets photos from the database ..please

Young Ayo says:

Thanks for the thorough tutorial!

Juan2003gtr says:

great video my friend, I’ve been using it for a while but I learnt new things from here, specially the peek definition tip…thanks!

Eric Djimtoloum says:

Thanks.

新一工藤 says:

“code” menu is not in the window toolbar, on windows.

Johny Mielony says:

Amazing video! Thank you very much, now I know VSC is really better than Brackets which i used before.

Belal Saleh says:

well done. I didn’t know that with the custom settings for workspaces and folders. You can just define a color theme and every project will have its own color theme. nice.

Chaima Ben Slimane says:

thank u… but i wanna learn c# design pattern can u help

JrMajor says:

All teachers on Utube tell us that already everybody knows =”Hello World ” or how to change themes)) Please doing video how to install detail VSCode for work with database(XAMPP example) or~ and how to do settings allowing to debug JS files outside work areas(in console). Thanks in advance!!!

Ummer Ameen عمر امين says:

thanks academind !

Tobias Thiele says:

@Academind what exactly is the reason you switched from PHP-/WebStorm to VS Code? Im using it right now and I think about to switch to VS Code but I don’t know why I should at the moment. Thanks 🙂

bhangachora says:

Why 33 minutes, man?

Je'l Awesh Medrano says:

Hey @Academind! Do you think in these days is still worth using Atom Text Editor?

新一工藤 says:

nice video, if you could do more about VS code, sowing more advanced useful features, shortcuts, extensions, etc… that would be great.

Foyah Freeman says:

Thank you Manuel. This was an excellent introduction.

MrChrisMoo says:

When opening a terminal is there a way to go to the same dir you are in?

suvedha ganapathy says:

The craze for first comment… and hearty thanks Max!!!!

Amit Biswas says:

For this reason i love Vs code more than Atom

boss Bhai says:

Thanks- you guys rock.

destructhit says:

The best in visual studio code for me is the terminal

uRAGE cz says:

Hi ! Great video ! One question.. have u already thought about react-apollo/graphql tutorial ?

Aramis Martínez says:

Hello. How do set the exact same thing that you have on the explorer tab?( the open file, folder etc..)

 Write a comment

*

Do you like our videos?
Do you want to see more like that?

Please click below to support us on Facebook!