D4mations.com

Visual Studio Code Tutorial for Beginners – Introduction



Are you looking for a free, cross-platform and highly customizable code editor? Learn VS Code!
Limited Offer! Use VS Code with React.js, Full Course at 90% off: https://acad.link/reactjs
Full article: https://academind.com/learn/web-dev/visual-studio-code-introduction/
Join our Academind Community on Discord for free: https://discord.gg/gxvEWGU

Check out all our other courses: https://academind.com/learn/our-courses

———-

• Go to https://www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts
• Follow @maxedapps and @academind_real on Twitter
• Join our Facebook community on https://www.facebook.com/academindchannel/

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!

Original source

d4mer

, , , , , , ,

25 responses to “Visual Studio Code Tutorial for Beginners – Introduction”

  1. 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

  8. How to run the codes?
    1. Go to extension. The extension is located in the activity bar ( the left side of the screen above ). The extension is the one with the square icon, yes the last icon in the left side of the screen.

    2. Search for "code runner". You will see an extension by Ng Jun Han. Install the extension. The extension has many users, what do I mean by many? You can compare it to other extensions, it has a big obvious amount of users.

    3. Now leave Vs code and enter again. You will see a triangle button at the right corner of the code screen. Click it and the codes will run automatically.

    Feel free to ask any question. I will try to answer all of them.

  17. to bad, that you didn't mention these handy shortcuts:
    1) html autocompletion:
    *) myTag –> <myTag></myTag>,

    *) myTag.myClass –> <myTag class="myClass"></myTag>,

    *) myTag#myId –> <myTag id="myId"></myTag>,

    *) myTag.myClass#myId –> <myTag class="myClass" id="myId"></myTag>
    2) html/css/js commenting/uncommenting:
    *) select piece of code and hit ctrl+/ (if it's uncommented it will become commented, and if it's commented it will become uncommented)
    3) html/css/js indenting up/indenting down:
    *) select piece of code and hit tab to indent it up or shift+tab to indent it down
    one uses these over and over again.
    also i noticed, that if you want to move the line of code up or down, you can simply have a coursor on that line hold alt and use up or down arrow keys to do so. and the best thing about it is, that it respects indentation! 😉

  19. Seems to focus a bit too much on customization instead of the basics. Changing the color scheme or the icons is not something a beginner needs to know how to do right away. Even experts may never use those features.

Leave a Reply