title
Visual Studio Code Tutorial for Beginners - Introduction
description
Are you looking for a free, cross-platform and highly customizable code editor? Learn VS Code!
🖥️ Official Website & Courses
https://academind.com/courses/
👨💻 Use VS Code with React.js
https://acad.link/reactjs
📝 Full Article
https://academind.com/tutorials/visual-studio-code-introduction#selected-shortcuts-and-where-to-configure-them
👋 Social Media
https://twitter.com/maxedapps
https://twitter.com/academind_real
https://www.instagram.com/academind_real/
https://www.facebook.com/academindchannel/
💬 Academind Community on Discord
https://discord.gg/gxvEWGU
----------
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!
detail
{'title': 'Visual Studio Code Tutorial for Beginners - Introduction', 'heatmap': [{'end': 165.598, 'start': 76.159, 'weight': 0.918}, {'end': 229.728, 'start': 182.085, 'weight': 0.71}, {'end': 1278.594, 'start': 1258.675, 'weight': 0.77}], 'summary': 'The tutorial provides an introduction to visual studio code, highlighting its features such as code editing, ide functionalities, multi-file support, split editor feature, activity bar navigation, search, source control, debugging, and extensions. it also covers customization options, integrated support for html, css, javascript, and typescript, extensions for frameworks like angular and react, integrated terminal, shortcuts, and workspace settings.', 'chapters': [{'end': 54.718, 'segs': [{'end': 54.718, 'src': 'embed', 'start': 2.682, 'weight': 0, 'content': [{'end': 8.189, 'text': 'Welcome to this video where we will have a look at Visual Studio Code, not Visual Studio.', 'start': 2.682, 'duration': 5.507}, {'end': 15.378, 'text': 'Visual Studio Code is a code editor and we use it for quite a while now and we like it actually.', 'start': 8.99, 'duration': 6.388}, {'end': 18.822, 'text': "So we thought why don't we have a look at it together now.", 'start': 15.998, 'duration': 2.824}, {'end': 34.638, 'text': "Now, as I said, Visual Studio Code is a code editor and it's positioned kind of in between text editors like Atom and real IDEs like Visual Studio.", 'start': 22.887, 'duration': 11.751}, {'end': 40.003, 'text': 'This means it has all these text editor functions that you would expect when writing code,', 'start': 34.938, 'duration': 5.065}, {'end': 44.627, 'text': 'but it also comes with some selected IDE features for debugging, for example.', 'start': 40.003, 'duration': 4.624}, {'end': 47.351, 'text': "So it's kind of a nice hybrid as I would say.", 'start': 45.029, 'duration': 2.322}, {'end': 54.718, 'text': "The cool thing is that Visual Studio Code is for free and that it's available for all platforms, so Windows, Mac OS or Linux.", 'start': 48.012, 'duration': 6.706}], 'summary': 'Visual studio code is a free code editor with text editor functions and some selected ide features, available for all platforms.', 'duration': 52.036, 'max_score': 2.682, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqCgcpAypFQ/pics/VqCgcpAypFQ2682.jpg'}], 'start': 2.682, 'title': 'Visual studio code overview', 'summary': 'Provides an introduction to visual studio code, a free code editor with text editor functions and selected ide features, available for all platforms.', 'chapters': [{'end': 54.718, 'start': 2.682, 'title': 'Visual studio code overview', 'summary': 'Introduces visual studio code as a free code editor with text editor functions and selected ide features, available for all platforms.', 'duration': 52.036, 'highlights': ['Visual Studio Code is a code editor positioned between text editors like Atom and real IDEs like Visual Studio. It offers text editor functions and selected IDE features, making it a hybrid tool suitable for coding tasks.', 'Visual Studio Code is available for free on all platforms, including Windows, Mac OS, and Linux. The accessibility of Visual Studio Code on multiple platforms makes it a convenient choice for a wide range of users.']}], 'duration': 52.036, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqCgcpAypFQ/pics/VqCgcpAypFQ2682.jpg', 'highlights': ['Visual Studio Code is available for free on all platforms, including Windows, Mac OS, and Linux.', 'Visual Studio Code is a code editor positioned between text editors like Atom and real IDEs like Visual Studio. It offers text editor functions and selected IDE features, making it a hybrid tool suitable for coding tasks.']}, {'end': 418.307, 'segs': [{'end': 181.984, 'src': 'heatmap', 'start': 76.159, 'weight': 0, 'content': [{'end': 84.908, 'text': 'and for that you can either select open folder right here in this start area or you simply go to file and right here open like that.', 'start': 76.159, 'duration': 8.749}, {'end': 88.947, 'text': 'If you do that, you can navigate to a folder of your choice.', 'start': 86.425, 'duration': 2.522}, {'end': 96.774, 'text': 'so either an existing project like this one in my case, or we can simply create a new folder and by that a new project in the end,', 'start': 88.947, 'duration': 7.827}, {'end': 104.881, 'text': 'by adding or by pressing new folder and maybe name it project2, because we have really creative naming conventions like that.', 'start': 96.774, 'duration': 8.107}, {'end': 113.169, 'text': 'So here now selected project2 press open and here it is here we have our project opened in Visual Studio Code.', 'start': 105.442, 'duration': 7.727}, {'end': 115.57, 'text': "Let's close this welcome screen now.", 'start': 113.829, 'duration': 1.741}, {'end': 117.952, 'text': 'This is something we can change in the settings by the way.', 'start': 115.75, 'duration': 2.202}, {'end': 119.853, 'text': "We'll also have a look at that throughout this video.", 'start': 118.112, 'duration': 1.741}, {'end': 124.456, 'text': 'And we can also right click right here to hide the open editors.', 'start': 120.533, 'duration': 3.923}, {'end': 126.978, 'text': 'Also something we can change in the settings.', 'start': 124.996, 'duration': 1.982}, {'end': 131.981, 'text': 'So as you can imagine already, Visual Studio Code is quite customizable apparently.', 'start': 127.458, 'duration': 4.523}, {'end': 141.347, 'text': "Right now I'm here in this sidebar and if I click right here onto this symbol, I can create a new file and let's maybe name it index.html.", 'start': 132.721, 'duration': 8.626}, {'end': 143.408, 'text': 'This might be a good starting point.', 'start': 141.727, 'duration': 1.681}, {'end': 151.212, 'text': 'After pressing enter, we can see that the file was opened in that tab right here and here I can now enter something like HTML,', 'start': 143.888, 'duration': 7.324}, {'end': 161.317, 'text': 'and you can already see that Visual Studio Code comes with integrated tools for autocompletion and for making writing our code a bit more convenient.', 'start': 151.212, 'duration': 10.105}, {'end': 165.598, 'text': "Now, I won't dive into the technical details behind these tools.", 'start': 161.937, 'duration': 3.661}, {'end': 171.3, 'text': 'The important thing is that we have AMET integrated right here, which helps us to autocomplete our code,', 'start': 166.058, 'duration': 5.242}, {'end': 172.861, 'text': 'as we will see it right here in a few seconds.', 'start': 171.3, 'duration': 1.561}, {'end': 181.984, 'text': 'And we also have IntelliSense, not intelligence, IntelliSense, which also helps us to autocomplete our code especially for JavaScript and TypeScript.', 'start': 173.481, 'duration': 8.503}], 'summary': 'Using visual studio code, open a folder, create a new project, customize settings, and create a new file with integrated tools for autocompletion and convenience.', 'duration': 61.451, 'max_score': 76.159, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqCgcpAypFQ/pics/VqCgcpAypFQ76159.jpg'}, {'end': 229.728, 'src': 'heatmap', 'start': 182.085, 'weight': 0.71, 'content': [{'end': 186.968, 'text': 'This is where it comes implemented already or built in already when you download Visual Studio Code.', 'start': 182.085, 'duration': 4.883}, {'end': 194.133, 'text': 'And this IntelliSense helps you to kind of get suggestions how your code could continue from a logical perspective.', 'start': 187.448, 'duration': 6.685}, {'end': 196.274, 'text': "Also something we'll see throughout this video.", 'start': 194.633, 'duration': 1.641}, {'end': 202.018, 'text': "But for the moment, let's simply select HTML5 right here and press tab and voila.", 'start': 196.715, 'duration': 5.303}, {'end': 206.942, 'text': 'As you can see, we immediately created our HTML skeleton right here.', 'start': 202.479, 'duration': 4.463}, {'end': 208.023, 'text': 'Whoops, like that.', 'start': 207.082, 'duration': 0.941}, {'end': 209.223, 'text': 'now right here.', 'start': 208.783, 'duration': 0.44}, {'end': 215.845, 'text': 'we could, for example, add a div like that and as you can see you again get these emmet abbreviations.', 'start': 209.223, 'duration': 6.622}, {'end': 221.666, 'text': 'and if we press enter and enter age, you can see you get a lot more suggestions right here.', 'start': 215.845, 'duration': 5.821}, {'end': 229.728, 'text': 'and if i now select the h1 tag and write hello, well then we created our first html file in a few seconds.', 'start': 221.666, 'duration': 8.062}], 'summary': "Visual studio code's intellisense aids in quickly creating html files with suggested code continuations and abbreviations, enabling the creation of an html file in seconds.", 'duration': 47.643, 'max_score': 182.085, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqCgcpAypFQ/pics/VqCgcpAypFQ182085.jpg'}, {'end': 299.215, 'src': 'embed', 'start': 270.25, 'weight': 4, 'content': [{'end': 274.173, 'text': 'talking about opening the files simultaneously.', 'start': 270.25, 'duration': 3.923}, {'end': 284.062, 'text': 'if you go right here, to this view menu right there, and now go down right here to split editor, well, if you click onto that,', 'start': 274.173, 'duration': 9.889}, {'end': 293.67, 'text': 'then you can see that you can open two editors at the same time and we can, for example, select this one and double click the style css file.', 'start': 284.062, 'duration': 9.608}, {'end': 299.215, 'text': 'and if we now close this file, the index.html file and the style.css file right here,', 'start': 293.67, 'duration': 5.545}], 'summary': 'Instructions on opening two files simultaneously in editor.', 'duration': 28.965, 'max_score': 270.25, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqCgcpAypFQ/pics/VqCgcpAypFQ270250.jpg'}, {'end': 361.645, 'src': 'embed', 'start': 337.577, 'weight': 5, 'content': [{'end': 344.86, 'text': 'But you can see that we have this explorer, search, SCM, debug and extension menus and some corresponding shortcuts.', 'start': 337.577, 'duration': 7.283}, {'end': 350.576, 'text': 'now this is actually our activity bar, the bar right here, this one.', 'start': 345.447, 'duration': 5.129}, {'end': 352.56, 'text': 'at the moment we are in the explorer.', 'start': 350.576, 'duration': 1.984}, {'end': 356.928, 'text': 'this is our main working folder, where we have our files, our project and our code.', 'start': 352.56, 'duration': 4.368}, {'end': 361.645, 'text': 'Below that, we have a search option where we can see Hello is selected automatically.', 'start': 357.742, 'duration': 3.903}], 'summary': 'The activity bar has explorer, search, scm, debug, and extension menus with corresponding shortcuts. it serves as the main working folder for files, projects, and code.', 'duration': 24.068, 'max_score': 337.577, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqCgcpAypFQ/pics/VqCgcpAypFQ337577.jpg'}], 'start': 55.379, 'title': 'Visual studio code features', 'summary': 'Introduces various features of visual studio code, including the ability to work on multiple files simultaneously, use the split editor feature, navigate through the activity bar, and utilize functions such as search, source control, debugging, and extensions.', 'chapters': [{'end': 221.666, 'start': 55.379, 'title': 'Visual studio code interface overview', 'summary': 'Introduces visual studio code, highlighting its customizable interface, integrated tools for autocompletion, and built-in features like amet and intellisense, which aid in code autocompletion and logical suggestions.', 'duration': 166.287, 'highlights': ['Visual Studio Code comes with integrated tools for autocompletion and making writing code more convenient. The integrated tools in Visual Studio Code aid in autocompletion and making code writing more convenient.', 'IntelliSense in Visual Studio Code helps in autocompleting code, especially for JavaScript and TypeScript. IntelliSense in Visual Studio Code assists in autocompleting code, particularly for JavaScript and TypeScript, providing logical suggestions.', 'Visual Studio Code is quite customizable, allowing users to hide open editors and change settings. Visual Studio Code offers a high level of customization, including the ability to hide open editors and modify settings.']}, {'end': 418.307, 'start': 221.666, 'title': 'Visual studio code features', 'summary': 'Introduces various features of visual studio code, including the ability to work on multiple files simultaneously, use the split editor feature, navigate through the activity bar, and utilize functions such as search, source control, debugging, and extensions.', 'duration': 196.641, 'highlights': ['Visual Studio Code allows working on multiple files simultaneously, enabling quicker navigation through the files. The ability to open and work on multiple files simultaneously in Visual Studio Code allows for efficient navigation and multitasking, enhancing productivity.', 'The split editor feature allows opening and working on two editors at the same time. The split editor feature in Visual Studio Code enables users to open and work on two editors simultaneously, enhancing the flexibility and efficiency of editing and managing multiple files.', 'The activity bar in Visual Studio Code provides access to various functions such as explorer, search, source control, debugging, and extensions. The activity bar in Visual Studio Code offers access to essential functions, including explorer, search, source control, debugging, and extensions, providing a comprehensive set of tools for efficient project management and development.']}], 'duration': 362.928, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqCgcpAypFQ/pics/VqCgcpAypFQ55379.jpg', 'highlights': ['Visual Studio Code offers integrated tools for autocompletion and code convenience.', 'IntelliSense in Visual Studio Code assists in autocompleting code, especially for JavaScript and TypeScript.', 'Visual Studio Code is highly customizable, allowing users to modify settings and hide open editors.', 'Visual Studio Code enables working on multiple files simultaneously, enhancing productivity.', 'The split editor feature in Visual Studio Code allows working on two editors simultaneously, improving efficiency.', 'The activity bar in Visual Studio Code provides access to essential functions like explorer, search, source control, debugging, and extensions.']}, {'end': 995.349, 'segs': [{'end': 452.672, 'src': 'embed', 'start': 418.727, 'weight': 0, 'content': [{'end': 423.33, 'text': 'Visual Studio Code comes with a lot of integrated built-in functions.', 'start': 418.727, 'duration': 4.603}, {'end': 426.873, 'text': 'I talked about Emmet and this IntelliSense in the beginning.', 'start': 423.53, 'duration': 3.343}, {'end': 433.978, 'text': 'But the main support, the main default support is for HTML, CSS, JavaScript and TypeScript.', 'start': 427.533, 'duration': 6.445}, {'end': 441.804, 'text': 'But you can of course also work with frameworks like Angular or React or with languages like Python in Visual Studio Code.', 'start': 434.758, 'duration': 7.046}, {'end': 452.672, 'text': 'And for that you can install different extensions and with that also get all these convenience features like auto-completion and a lot more just by installing these extensions.', 'start': 442.104, 'duration': 10.568}], 'summary': 'Visual studio code offers integrated support for html, css, javascript, typescript, angular, react, and python through extensions, providing auto-completion and other convenience features.', 'duration': 33.945, 'max_score': 418.727, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqCgcpAypFQ/pics/VqCgcpAypFQ418727.jpg'}, {'end': 512.943, 'src': 'embed', 'start': 489.316, 'weight': 1, 'content': [{'end': 497.059, 'text': 'This means if you open the terminal right here inside the code editor, it already automatically navigated into your project folder,', 'start': 489.316, 'duration': 7.743}, {'end': 498.819, 'text': 'which is quite cool and quite convenient.', 'start': 497.059, 'duration': 1.76}, {'end': 504.981, 'text': 'Additionally, if you want to run a development server, for example, and need more than one terminal.', 'start': 499.54, 'duration': 5.441}, {'end': 512.943, 'text': 'therefore, you can also add additional terminals by clicking right here, and then you can switch between the terminals right here in this menu.', 'start': 504.981, 'duration': 7.962}], 'summary': 'Visual studio code allows automatic navigation to project folder and easy addition of multiple terminals for development tasks.', 'duration': 23.627, 'max_score': 489.316, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqCgcpAypFQ/pics/VqCgcpAypFQ489316.jpg'}, {'end': 555.764, 'src': 'embed', 'start': 527.988, 'weight': 2, 'content': [{'end': 533.509, 'text': 'you can also customize the way the interface is displayed right here in visual studio code.', 'start': 527.988, 'duration': 5.521}, {'end': 539.911, 'text': 'you can, for example, hide this status bar down here, and, as you can see this bar at the bottom of the page now disappeared,', 'start': 533.509, 'duration': 6.402}, {'end': 542.752, 'text': 'you can bring it back immediately, of course, by clicking right.', 'start': 539.911, 'duration': 2.841}, {'end': 548.718, 'text': 'Feel free to play around right here to customize your Visual Studio Code experience in the end.', 'start': 543.032, 'duration': 5.686}, {'end': 555.764, 'text': 'Now as we talk about customization we can of course also change the look of Visual Studio Code in general.', 'start': 549.358, 'duration': 6.406}], 'summary': 'Customize interface and appearance in visual studio code for a tailored experience.', 'duration': 27.776, 'max_score': 527.988, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqCgcpAypFQ/pics/VqCgcpAypFQ527988.jpg'}, {'end': 669.965, 'src': 'embed', 'start': 642.156, 'weight': 3, 'content': [{'end': 644.778, 'text': 'And as you can see, this is still the theme we use so far.', 'start': 642.156, 'duration': 2.622}, {'end': 647.82, 'text': 'We are not limited to the theme in general, though.', 'start': 645.618, 'duration': 2.202}, {'end': 650.902, 'text': 'We can also customize our icons, for example.', 'start': 648.24, 'duration': 2.662}, {'end': 653.664, 'text': 'So these icons right here next to our files.', 'start': 651.022, 'duration': 2.642}, {'end': 660.718, 'text': "Let's again open the command palette by pressing shift command and P and now enter simply icon.", 'start': 654.693, 'duration': 6.025}, {'end': 664.361, 'text': 'And we can see right here preferences, file icon theme.', 'start': 661.639, 'duration': 2.722}, {'end': 665.862, 'text': 'This seems to be interesting.', 'start': 664.761, 'duration': 1.101}, {'end': 668.964, 'text': 'And here we have four different options.', 'start': 666.482, 'duration': 2.482}, {'end': 669.965, 'text': 'We have none.', 'start': 669.305, 'duration': 0.66}], 'summary': "Customization options include four different icon themes, with 'none' as an option.", 'duration': 27.809, 'max_score': 642.156, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqCgcpAypFQ/pics/VqCgcpAypFQ642156.jpg'}], 'start': 418.727, 'title': 'Visual studio code features and customization', 'summary': "Introduces visual studio code's integrated support for html, css, javascript, and typescript, extensibility for frameworks like angular and react, integrated terminal, customization of the interface, command palette, and convenience features including integrated emmet tool, intellisense for javascript and typescript, event listener information, and navigation tools like go to definition and peak definition.", 'chapters': [{'end': 751.649, 'start': 418.727, 'title': 'Visual studio code features and customization', 'summary': "Introduces visual studio code's integrated support for html, css, javascript, and typescript, as well as its extensibility for frameworks like angular and react. it also highlights the convenience of the integrated terminal, customization of the interface, and the command palette for executing commands and customizing color themes and file icons.", 'duration': 332.922, 'highlights': ["Visual Studio Code's integrated support for HTML, CSS, JavaScript, and TypeScript, as well as its extensibility for frameworks like Angular and React. The main default support is for HTML, CSS, JavaScript, and TypeScript, but it also enables working with frameworks like Angular or React.", 'The convenience of the integrated terminal, which automatically navigates into the project folder and allows adding and switching between multiple terminals. The integrated terminal in Visual Studio Code automatically navigates into the project folder and allows adding and switching between multiple terminals for tasks like running a development server.', 'Customization of the interface, including hiding the status bar and customizing the look of Visual Studio Code. Visual Studio Code allows customization of the interface, such as hiding the status bar and changing the color theme and file icons.', 'Introduction of the command palette for executing commands and customizing color themes and file icons. The command palette provides a convenient way to execute commands, navigate, and customize color themes and file icons in Visual Studio Code.']}, {'end': 995.349, 'start': 752.27, 'title': 'Visual studio code features', 'summary': 'Demonstrates the convenience features of visual studio code, including integrated emmet tool for html, intellisense for javascript and typescript, event listener information, and navigation tools like go to definition and peak definition.', 'duration': 243.079, 'highlights': ['Visual Studio Code provides an integrated Emmet tool for creating HTML elements conveniently, such as adding h2 element and CSS selectors like display and flexbox. The integrated Emmet tool in Visual Studio Code allows for convenient creation of HTML elements and CSS selectors, such as adding h2 element and using CSS properties like display and flexbox.', 'The convenience features of Visual Studio Code extend to JavaScript, with IntelliSense providing suggestions for properties and methods, making the workflow easier. IntelliSense feature in Visual Studio Code provides suggestions for JavaScript properties and methods, enhancing the workflow and making coding more efficient.', 'Visual Studio Code also offers event listener information and navigation tools like go to definition and peak definition, providing insight into function definitions and enabling easy navigation within the codebase. Visual Studio Code provides event listener information and navigation tools like go to definition and peak definition, offering insight into function definitions and facilitating easy navigation within the codebase.']}], 'duration': 576.622, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqCgcpAypFQ/pics/VqCgcpAypFQ418727.jpg', 'highlights': ["Visual Studio Code's integrated support for HTML, CSS, JavaScript, and TypeScript, as well as its extensibility for frameworks like Angular and React.", 'The convenience of the integrated terminal, which automatically navigates into the project folder and allows adding and switching between multiple terminals.', 'Customization of the interface, including hiding the status bar and customizing the look of Visual Studio Code.', 'Introduction of the command palette for executing commands and customizing color themes and file icons.', 'Visual Studio Code provides an integrated Emmet tool for creating HTML elements conveniently, such as adding h2 element and CSS selectors like display and flexbox.', 'The convenience features of Visual Studio Code extend to JavaScript, with IntelliSense providing suggestions for properties and methods, making the workflow easier.', 'Visual Studio Code also offers event listener information and navigation tools like go to definition and peak definition, providing insight into function definitions and enabling easy navigation within the codebase.']}, {'end': 1377.653, 'segs': [{'end': 1042.547, 'src': 'embed', 'start': 995.83, 'weight': 0, 'content': [{'end': 997.472, 'text': "Don't forget to save the progress by the way.", 'start': 995.83, 'duration': 1.642}, {'end': 1006.848, 'text': 'So this is just a little bit of a preview how this integrated code completion, but also intelligent IntelliSense actually features.', 'start': 998.686, 'duration': 8.162}, {'end': 1010.988, 'text': 'help you to write the code in a more convenient way in Visual Studio Code.', 'start': 1006.848, 'duration': 4.14}, {'end': 1020.41, 'text': 'The problem is that these features are by default only implemented for HTML, partially CSS, JavaScript and TypeScript,', 'start': 1011.829, 'duration': 8.581}, {'end': 1024.33, 'text': 'but you might want to use Visual Studio Code with other frameworks and languages.', 'start': 1020.41, 'duration': 3.92}, {'end': 1028.253, 'text': 'but the extensions we had a look at already help you there.', 'start': 1025.131, 'duration': 3.122}, {'end': 1037.443, 'text': 'if you go to the extensions down here, then you can either click right there and show the most popular extensions, for example, this one for python,', 'start': 1028.253, 'duration': 9.19}, {'end': 1042.547, 'text': 'by the way, also an extension that we are using for python or again, you can search right here.', 'start': 1037.443, 'duration': 5.104}], 'summary': 'Preview of integrated code completion and intellisense features in visual studio code, with extensions available for various languages and frameworks.', 'duration': 46.717, 'max_score': 995.83, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqCgcpAypFQ/pics/VqCgcpAypFQ995830.jpg'}, {'end': 1118.183, 'src': 'embed', 'start': 1086.582, 'weight': 5, 'content': [{'end': 1091.205, 'text': 'this slide right here shows you all the extensions and also the themes we talked about.', 'start': 1086.582, 'duration': 4.623}, {'end': 1099.692, 'text': "as you can see, we don't use a lot of extensions actually, just because it makes it more difficult for us to show you what we do in the videos,", 'start': 1091.205, 'duration': 8.487}, {'end': 1104.075, 'text': "because then you might not be able to follow along because you don't have a certain extension installed.", 'start': 1099.692, 'duration': 4.383}, {'end': 1106.476, 'text': 'So we keep it to a minimum normally.', 'start': 1104.715, 'duration': 1.761}, {'end': 1110.058, 'text': 'but this is actually everything you need to follow along our Academy videos.', 'start': 1106.476, 'duration': 3.582}, {'end': 1118.183, 'text': "And with these extensions, you're actually prepared to work in Angular, Vue, React, and Python, and of course, JavaScript and TypeScript.", 'start': 1110.398, 'duration': 7.785}], 'summary': 'Minimal extensions used for easy video follow-along, covering angular, vue, react, python, javascript, and typescript.', 'duration': 31.601, 'max_score': 1086.582, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqCgcpAypFQ/pics/VqCgcpAypFQ1086582.jpg'}, {'end': 1194.301, 'src': 'embed', 'start': 1126.407, 'weight': 3, 'content': [{'end': 1130.769, 'text': 'go to the material icon theme you can simply press uninstall and the extension is gone.', 'start': 1126.407, 'duration': 4.362}, {'end': 1133.37, 'text': 'So everything quite easy and quite fast.', 'start': 1131.009, 'duration': 2.361}, {'end': 1135.611, 'text': "That's the cool thing about Visual Studio Code.", 'start': 1133.63, 'duration': 1.981}, {'end': 1142.414, 'text': "Now let's go back to our explorer right here and talk about another important feature.", 'start': 1136.512, 'duration': 5.902}, {'end': 1149.778, 'text': 'Shortcuts Because we already used the shift command and P shortcut to open our command palette right here.', 'start': 1143.235, 'duration': 6.543}, {'end': 1160.769, 'text': 'Now, if you go right here to shortcut right there, you can open the preferences right here to open the keyboard shortcuts, because well,', 'start': 1150.598, 'duration': 10.171}, {'end': 1164.773, 'text': 'as you can imagine, Visual Studio Code comes with a lot of shortcuts right here.', 'start': 1160.769, 'duration': 4.004}, {'end': 1171.98, 'text': 'And now we could talk about a lot of different shortcuts and which one you should use or you could use and so on.', 'start': 1165.814, 'duration': 6.166}, {'end': 1176.544, 'text': 'The problem is I think this is boring and not really helpful.', 'start': 1172.961, 'duration': 3.583}, {'end': 1179.267, 'text': 'Therefore I prepared an article.', 'start': 1177.185, 'duration': 2.082}, {'end': 1187.154, 'text': 'link can be found below the video where you can find an overview of all the shortcuts we are using, and that might also be helpful for you.', 'start': 1179.267, 'duration': 7.887}, {'end': 1194.301, 'text': "Nevertheless, I would like to quickly show you how you can work with these key bindings right here because it's really helpful to be honest.", 'start': 1187.935, 'duration': 6.366}], 'summary': 'Visual studio code offers easy uninstallation of extensions and convenient shortcuts for efficient coding.', 'duration': 67.894, 'max_score': 1126.407, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqCgcpAypFQ/pics/VqCgcpAypFQ1126407.jpg'}, {'end': 1285.238, 'src': 'heatmap', 'start': 1258.675, 'weight': 0.77, 'content': [{'end': 1263.821, 'text': "Then you can click right here, let's say you want to add something at the beginning of this class name,", 'start': 1258.675, 'duration': 5.146}, {'end': 1273.152, 'text': 'and then you can simply press and hold alt and with that you select all these different well positions in your code file at the same time.', 'start': 1263.821, 'duration': 9.331}, {'end': 1278.594, 'text': 'and you can now simply add awesome button, whatever you prefer like this.', 'start': 1273.672, 'duration': 4.922}, {'end': 1280.896, 'text': "So that's a nice convenience feature.", 'start': 1279.275, 'duration': 1.621}, {'end': 1285.238, 'text': 'Another nice convenience feature is if you select the span right here,', 'start': 1281.336, 'duration': 3.902}], 'summary': 'Conveniently add and edit code by selecting multiple positions and using shortcuts.', 'duration': 26.563, 'max_score': 1258.675, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqCgcpAypFQ/pics/VqCgcpAypFQ1258675.jpg'}, {'end': 1312.04, 'src': 'embed', 'start': 1281.336, 'weight': 2, 'content': [{'end': 1285.238, 'text': 'Another nice convenience feature is if you select the span right here,', 'start': 1281.336, 'duration': 3.902}, {'end': 1291.081, 'text': 'you can see that Visual Studio Code automatically selects all the spans it identifies on this page of the code.', 'start': 1285.238, 'duration': 5.843}, {'end': 1298.267, 'text': 'If you now press command and D, then you can simply select the second, the third, the fourth,', 'start': 1291.901, 'duration': 6.366}, {'end': 1307.175, 'text': 'the fifth and the sixth span that you have right here on this page, and, as you can imagine, if you now type div, for example, or a span,', 'start': 1298.267, 'duration': 8.908}, {'end': 1312.04, 'text': 'it will be changed simultaneously once again for all these tags that you selected.', 'start': 1307.175, 'duration': 4.865}], 'summary': 'Visual studio code can select and change multiple spans at once using command + d shortcut.', 'duration': 30.704, 'max_score': 1281.336, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqCgcpAypFQ/pics/VqCgcpAypFQ1281336.jpg'}, {'end': 1360.274, 'src': 'embed', 'start': 1337.412, 'weight': 7, 'content': [{'end': 1347.521, 'text': 'i just want to show you some of these, Because if you say that the span is kind of not indented correctly, you can simply search for format like that.', 'start': 1337.412, 'duration': 10.109}, {'end': 1352.066, 'text': 'And you see format document is shift, alt and F.', 'start': 1348.162, 'duration': 3.904}, {'end': 1360.274, 'text': 'So if we go back and simply press shift, alt and F like this, Voila! The entire HTML document is formatted.', 'start': 1352.066, 'duration': 8.208}], 'summary': 'Using shift, alt and f formats the entire html document.', 'duration': 22.862, 'max_score': 1337.412, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqCgcpAypFQ/pics/VqCgcpAypFQ1337412.jpg'}], 'start': 995.83, 'title': 'Visual studio code extensions and shortcuts', 'summary': 'Discusses the benefits of using visual studio code extensions for improved code completion and intellisense for languages such as python, angular, vue, react, and javascript, and the convenience of shortcuts including selecting and editing multiple instances simultaneously, formatting the code, and finding keyboard shortcut commands.', 'chapters': [{'end': 1126.407, 'start': 995.83, 'title': 'Visual studio code extensions', 'summary': 'Discusses the benefits of using visual studio code extensions, including improved code completion and intellisense for various languages such as python, angular, vue, react, and javascript, and the importance of selecting and managing the right extensions to enhance productivity.', 'duration': 130.577, 'highlights': ['Visual Studio Code provides integrated code completion and intelligent IntelliSense for HTML, CSS, JavaScript, and TypeScript, enhancing code writing convenience. HTML, CSS, JavaScript, and TypeScript supported', 'Extensions in Visual Studio Code expand support to other frameworks and languages such as Python, Angular, Vue, React, and more, offering additional features and functionalities. Support for Python, Angular, Vue, React, and other frameworks', 'Emphasizes the importance of selecting and managing the right extensions to avoid complexity and ensure viewers can follow along in the videos. Recommendation to keep the number of extensions to a minimum for ease of following along']}, {'end': 1236.677, 'start': 1126.407, 'title': 'Visual studio code shortcuts', 'summary': 'Discusses the ease of uninstalling extensions in visual studio code, the importance of shortcuts, and provides a link to an article containing an overview of all the shortcuts used, emphasizing the value of key bindings and demonstrating the process of changing key combinations and toggling the integrated terminal.', 'duration': 110.27, 'highlights': ["The process of uninstalling extensions in Visual Studio Code is easy and fast, as simply pressing 'uninstall' in the material icon theme removes the extension.", 'The chapter emphasizes the importance of shortcuts in Visual Studio Code and provides a link to an article containing an overview of all the shortcuts used.', 'Demonstrating the process of changing key combinations and toggling the integrated terminal, the chapter highlights the value of key bindings and the convenience of shortcuts in Visual Studio Code.']}, {'end': 1377.653, 'start': 1236.677, 'title': 'Visual studio code shortcuts', 'summary': 'Highlights convenient shortcuts in visual studio code, including selecting and editing multiple instances simultaneously, formatting the code, and finding keyboard shortcut commands.', 'duration': 140.976, 'highlights': ['Visual Studio Code automatically selects all the spans it identifies on this page of the code, and pressing command and D allows to select multiple instances for simultaneous editing, providing convenience and efficiency.', 'Formatting the HTML document is achieved by pressing shift, alt and F, demonstrating a convenient shortcut that enhances code readability and presentation.', 'The chapter emphasizes the usefulness of keyboard shortcuts in Visual Studio Code for enhancing efficiency and convenience, providing a valuable insight into improving workflow and productivity.']}], 'duration': 381.823, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqCgcpAypFQ/pics/VqCgcpAypFQ995830.jpg', 'highlights': ['Visual Studio Code provides integrated code completion and intelligent IntelliSense for HTML, CSS, JavaScript, and TypeScript, enhancing code writing convenience. HTML, CSS, JavaScript, and TypeScript supported', 'Extensions in Visual Studio Code expand support to other frameworks and languages such as Python, Angular, Vue, React, and more, offering additional features and functionalities. Support for Python, Angular, Vue, React, and other frameworks', 'Visual Studio Code automatically selects all the spans it identifies on this page of the code, and pressing command and D allows to select multiple instances for simultaneous editing, providing convenience and efficiency.', 'The chapter emphasizes the usefulness of keyboard shortcuts in Visual Studio Code for enhancing efficiency and convenience, providing a valuable insight into improving workflow and productivity.', "The process of uninstalling extensions in Visual Studio Code is easy and fast, as simply pressing 'uninstall' in the material icon theme removes the extension.", 'Emphasizes the importance of selecting and managing the right extensions to avoid complexity and ensure viewers can follow along in the videos. Recommendation to keep the number of extensions to a minimum for ease of following along', 'The chapter emphasizes the importance of shortcuts in Visual Studio Code and provides a link to an article containing an overview of all the shortcuts used.', 'Formatting the HTML document is achieved by pressing shift, alt and F, demonstrating a convenient shortcut that enhances code readability and presentation.', 'Demonstrating the process of changing key combinations and toggling the integrated terminal, the chapter highlights the value of key bindings and the convenience of shortcuts in Visual Studio Code.']}, {'end': 2024.508, 'segs': [{'end': 1418.884, 'src': 'embed', 'start': 1378.394, 'weight': 1, 'content': [{'end': 1383.957, 'text': 'But there are two more things that I would like to show you, because I think these are really important and make your lives a lot easier.', 'start': 1378.394, 'duration': 5.563}, {'end': 1388.619, 'text': 'The first shortcut is switching between the different files we have right here.', 'start': 1384.697, 'duration': 3.922}, {'end': 1390.64, 'text': 'Of course we can do it like this and like that.', 'start': 1388.919, 'duration': 1.721}, {'end': 1391.741, 'text': "That's one way.", 'start': 1391.041, 'duration': 0.7}, {'end': 1396.263, 'text': 'But another really convenient way is to simply press command P.', 'start': 1392.301, 'duration': 3.962}, {'end': 1396.624, 'text': 'Like that.', 'start': 1396.263, 'duration': 0.361}, {'end': 1404.271, 'text': 'If you keep the command key pressed and press P to navigate through different files, you want to select and then release the command key,', 'start': 1397.384, 'duration': 6.887}, {'end': 1405.492, 'text': "you're in another file.", 'start': 1404.271, 'duration': 1.221}, {'end': 1410.396, 'text': 'And as you can see, this allows you to navigate quickly through the files of your project.', 'start': 1405.792, 'duration': 4.604}, {'end': 1418.884, 'text': 'Now, in case you want to switch to a project or recent project you created, you can simply press control, not command, control R.', 'start': 1411.417, 'duration': 7.467}], 'summary': 'Learn to navigate through files using shortcuts like command p and control r.', 'duration': 40.49, 'max_score': 1378.394, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqCgcpAypFQ/pics/VqCgcpAypFQ1378394.jpg'}, {'end': 1513.939, 'src': 'embed', 'start': 1463.686, 'weight': 0, 'content': [{'end': 1470.489, 'text': 'To open the settings, you can, well, again, use the command palette and enter settings right here.', 'start': 1463.686, 'duration': 6.803}, {'end': 1473.694, 'text': 'And if we go down, we can open the settings.', 'start': 1471.36, 'duration': 2.334}, {'end': 1479.67, 'text': 'Now we can quickly hide the sidebar by clicking right here.', 'start': 1474.807, 'duration': 4.863}, {'end': 1482.832, 'text': 'And now we see something really interesting.', 'start': 1480.71, 'duration': 2.122}, {'end': 1486.514, 'text': 'The first thing is we can search in the settings.', 'start': 1483.552, 'duration': 2.962}, {'end': 1489.536, 'text': 'As I said in the beginning, we have this welcome screen.', 'start': 1487.294, 'duration': 2.242}, {'end': 1491.217, 'text': 'You remember this one right here.', 'start': 1489.616, 'duration': 1.601}, {'end': 1493.378, 'text': 'So if we enter welcome.', 'start': 1491.777, 'duration': 1.601}, {'end': 1502.123, 'text': 'right there we can define what page should be displayed when we start Visual Studio Code or a new project in Visual Studio Code.', 'start': 1493.378, 'duration': 8.745}, {'end': 1509.633, 'text': "If you click onto this pencil, then you can say that you don't want to display anything, so basically an empty project as we had it.", 'start': 1502.803, 'duration': 6.83}, {'end': 1513.939, 'text': 'You want to have this welcome page or you want to have a new untitled file.', 'start': 1510.234, 'duration': 3.705}], 'summary': 'Visual studio code settings allow customizing welcome screen and default project page.', 'duration': 50.253, 'max_score': 1463.686, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqCgcpAypFQ/pics/VqCgcpAypFQ1463686.jpg'}, {'end': 1629.005, 'src': 'embed', 'start': 1603.307, 'weight': 6, 'content': [{'end': 1610.817, 'text': 'We have this user settings and these workspace settings and as you can see, the workspace settings are empty.', 'start': 1603.307, 'duration': 7.51}, {'end': 1614.802, 'text': 'in my case, user settings have some of the options integrated.', 'start': 1610.817, 'duration': 3.985}, {'end': 1619.235, 'text': 'This is an important core concept of Visual Studio Code now.', 'start': 1616.172, 'duration': 3.063}, {'end': 1625.522, 'text': 'The user settings apply to each Visual Studio Code instance on your machine.', 'start': 1619.996, 'duration': 5.526}, {'end': 1629.005, 'text': 'So if you open Visual Studio Code, these settings will be applied.', 'start': 1625.802, 'duration': 3.203}], 'summary': 'Visual studio code has user settings applied to each instance on the machine, while workspace settings are empty.', 'duration': 25.698, 'max_score': 1603.307, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqCgcpAypFQ/pics/VqCgcpAypFQ1603307.jpg'}, {'end': 1857.857, 'src': 'embed', 'start': 1825.52, 'weight': 4, 'content': [{'end': 1832.305, 'text': "And the cool thing is that if I now go to project two right here, you can see that the zoom level doesn't change,", 'start': 1825.52, 'duration': 6.785}, {'end': 1840.532, 'text': 'because right now we created a workspace setting and the workspace is no longer a single file, as it was in the beginning,', 'start': 1832.305, 'duration': 8.227}, {'end': 1848.678, 'text': 'but now the workspace contains these two or even more projects, and all these workspace settings apply to these projects.', 'start': 1840.532, 'duration': 8.146}, {'end': 1857.857, 'text': 'so if we open the settings once again right here, we can see that the user settings are still with a zoom level of six,', 'start': 1848.678, 'duration': 9.179}], 'summary': 'Workspace setting allows for consistent zoom level across multiple projects.', 'duration': 32.337, 'max_score': 1825.52, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqCgcpAypFQ/pics/VqCgcpAypFQ1825520.jpg'}, {'end': 1966.504, 'src': 'embed', 'start': 1941.574, 'weight': 5, 'content': [{'end': 1949.878, 'text': "You can see that the private projects folder is now also part of this workspace with all these settings, but that's important,", 'start': 1941.574, 'duration': 8.304}, {'end': 1952.099, 'text': 'not connected to all the other projects.', 'start': 1949.878, 'duration': 2.221}, {'end': 1955.26, 'text': "that's a feature you can use for different projects.", 'start': 1952.899, 'duration': 2.361}, {'end': 1959.321, 'text': 'you can use this for the front end and the back end code of your project.', 'start': 1955.26, 'duration': 4.061}, {'end': 1966.504, 'text': "that might be in different locations on your drive, anything like that, but i think it's a really cool feature.", 'start': 1959.321, 'duration': 7.183}], 'summary': 'Private projects folder is now part of this workspace with different settings, allowing usage for front end and back end code of a project.', 'duration': 24.93, 'max_score': 1941.574, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqCgcpAypFQ/pics/VqCgcpAypFQ1941574.jpg'}], 'start': 1378.394, 'title': 'Visual studio code shortcuts, settings, and workspace', 'summary': 'Covers convenient shortcuts for file navigation and project switching in visual studio code, emphasizing command p and control r, and introduces settings for customizing the welcome screen display. it also explains how to customize settings, covering open editors, autosave, user settings, and workspace settings with examples of changing window zoom levels and creating workspace settings for multiple projects.', 'chapters': [{'end': 1536.036, 'start': 1378.394, 'title': 'Visual studio code shortcuts and settings', 'summary': 'Highlights the convenient shortcuts for quickly navigating through files and switching between projects in visual studio code, emphasizing the use of command p for file navigation and control r for project switching, and also introduces the settings feature for customizing the welcome screen display.', 'duration': 157.642, 'highlights': ['The first shortcut is using command P for quickly navigating through different files, providing a convenient and efficient way to switch between files of a project.', 'The use of control R for switching between projects in Visual Studio Code, offering a convenient method to switch between different projects, improving productivity and workflow.', 'Introducing the settings feature for customizing the welcome screen display, enabling users to define what page should be displayed when starting Visual Studio Code or a new project, providing flexibility and personalization in the workspace environment.', 'Utilizing the command palette to open the settings and quickly hide the sidebar, offering a streamlined approach to accessing and customizing settings within Visual Studio Code.']}, {'end': 2024.508, 'start': 1536.637, 'title': 'Visual studio code settings and workspace', 'summary': 'Explains how to customize settings in visual studio code, covering options like open editors, autosave, user settings, and workspace settings, with examples of changing window zoom levels and creating workspace settings for multiple projects.', 'duration': 487.871, 'highlights': ['The user settings and workspace settings apply to each Visual Studio Code instance on your machine, with workspace settings overriding user settings for specific projects. User settings and workspace settings impact Visual Studio Code instances, with workspace settings taking precedence over user settings for specific projects.', 'Creating workspace settings allows for customizing settings for specific projects, such as changing window zoom levels, and these settings apply to the included projects. Workspace settings enable customizing settings for specific projects, affecting properties like window zoom levels for the included projects.', 'The feature of adding folders to a workspace enables managing different projects with specific settings, allowing for separate management of front end and back end code in different locations. The ability to add folders to a workspace facilitates managing projects with specific settings, suitable for separately managing front end and back end code in different locations.']}], 'duration': 646.114, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/VqCgcpAypFQ/pics/VqCgcpAypFQ1378394.jpg', 'highlights': ['Introducing the settings feature for customizing the welcome screen display, enabling users to define what page should be displayed when starting Visual Studio Code or a new project, providing flexibility and personalization in the workspace environment.', 'The use of control R for switching between projects in Visual Studio Code, offering a convenient method to switch between different projects, improving productivity and workflow.', 'The first shortcut is using command P for quickly navigating through different files, providing a convenient and efficient way to switch between files of a project.', 'Utilizing the command palette to open the settings and quickly hide the sidebar, offering a streamlined approach to accessing and customizing settings within Visual Studio Code.', 'Creating workspace settings allows for customizing settings for specific projects, such as changing window zoom levels, and these settings apply to the included projects. Workspace settings enable customizing settings for specific projects, affecting properties like window zoom levels for the included projects.', 'The feature of adding folders to a workspace enables managing different projects with specific settings, allowing for separate management of front end and back end code in different locations. The ability to add folders to a workspace facilitates managing projects with specific settings, suitable for separately managing front end and back end code in different locations.', 'The user settings and workspace settings apply to each Visual Studio Code instance on your machine, with workspace settings overriding user settings for specific projects. User settings and workspace settings impact Visual Studio Code instances, with workspace settings taking precedence over user settings for specific projects.']}], 'highlights': ['Visual Studio Code is available for free on all platforms, including Windows, Mac OS, and Linux.', 'Visual Studio Code offers integrated tools for autocompletion and code convenience.', 'IntelliSense in Visual Studio Code assists in autocompleting code, especially for JavaScript and TypeScript.', "Visual Studio Code's integrated support for HTML, CSS, JavaScript, and TypeScript, as well as its extensibility for frameworks like Angular and React.", 'Visual Studio Code provides integrated code completion and intelligent IntelliSense for HTML, CSS, JavaScript, and TypeScript, enhancing code writing convenience.', 'Extensions in Visual Studio Code expand support to other frameworks and languages such as Python, Angular, Vue, React, and more, offering additional features and functionalities.', 'The convenience of the integrated terminal, which automatically navigates into the project folder and allows adding and switching between multiple terminals.', 'Customization of the interface, including hiding the status bar and customizing the look of Visual Studio Code.', "The process of uninstalling extensions in Visual Studio Code is easy and fast, as simply pressing 'uninstall' in the material icon theme removes the extension.", 'Introducing the settings feature for customizing the welcome screen display, enabling users to define what page should be displayed when starting Visual Studio Code or a new project, providing flexibility and personalization in the workspace environment.']}