Notes for Visual Studio Code By Scott Granneman & Jans Carton Find the presentation at http://www.granneman.com/presentations/ ## Slide 2 Nord 3: background Nord 6: text ## Slide 3 https://granneman.com/downloads/web-dev/HTML-Overview-Condensed.pdf https://granneman.com/downloads/web-dev/HTML-Overview-Condensed.txt ## Slide 4 https://www.granneman.com/presentations/all-presentations ## Slide 7 Rakozy, Greg [@grakozy]. “silhouette photography of person photo – Free Sky Image on Unsplash”. Unsplash, 12 Oct 2015, https://unsplash.com/photos/oMpAz-DN-9I. Web. 1 Nov 2015. Licensed from Unsplash: https://unsplash.com/license. ## Slide 12 Sensa. “Face with symbols on mouth”. Sensa, 4 Mar 2021, https://sensa.co/emoji/. Web. 12 Oct 2022. MIT License: https://github.com/sensadesign/sensaemoji/blob/main/LICENSE Copyright (c) 2021 sensadesign ## Slide 13 Granneman, Scott. “Visual Studio Code - Initial Info - Main Project Folder”. Vimeo, 11 Oct 2022, https://vimeo.com/758991172. Web. 11 Nov 2022. ## Slide 17 “Stack Overflow Developer Survey 2023”. Stack Overflow, 20 June 2023, https://survey.stackoverflow.co/2023/#section-most-popular-technologies-integrated-development-environment. Web. 25 Jan 2024. ## Slide 20 https://code.visualstudio.com ## Slide 21 Wikipedia contributors. “Microsoft Visual Studio”. Wikipedia, The Free Encyclopedia, 17 July 2022, https://en.wikipedia.org/wiki/Microsoft_Visual_Studio. Web. 20 July 2022. Microsoft. “Visual Studio: IDE and Code Editor for Software Developers and Teams”. Visual Studio. Microsoft, 2022, https://visualstudio.microsoft.com. Web. 20 July 2022. ## Slide 22 https://code.visualstudio.com ## Slide 31 Icon by Dave Gandy: https://www.flaticon.com/authors/dave-gandy ## Slide 32 https://code.visualstudio.com/docs/setup/linux ## Slide 33 https://code.visualstudio.com/docs/setup/linux ## Slide 44 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 45 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 46 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 47 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 48 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 49 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 50 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 51 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 52 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 53 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 54 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 55 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 56 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 58 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 59 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 60 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 61 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 62 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 63 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 64 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 65 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 66 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 67 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 68 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 69 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 70 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 71 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 72 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 73 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 74 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 75 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 76 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 77 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 78 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 79 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 80 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 81 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 82 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 83 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 84 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 85 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 120 VS Code documentation calls this the “suggestion documentation fly-out”: Microsoft. “Emmet in Visual Studio Code”. Visual Studio Code, 30 Mar. 2022, https://code.visualstudio.com/docs/editor/emmet. Web. 6 Apr 2022. ## Slide 121 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p ## Slide 130 https://emmet.io ## Slide 147 “Abbreviations Syntax”. Emmet Documentation, https://docs.emmet.io/abbreviations/syntax/. Web. 5 Apr 2022. ## Slide 163 Granneman, R. Scott. “GrannePack Web Dev Snippets”. Visual Studio Marketplace, 20 Jan 2023, https://marketplace.visualstudio.com/items?itemName=granneman.grannepack-html. Web. 20 Jan 2023. ## Slide 198 https://marketplace.visualstudio.com/search?term=grannepack&target=VSCode&category=All%20categories&sortBy=Relevance ## Slide 199 Granneman, R. Scott. “GrannePack HTML”. Visual Studio Marketplace, , https://marketplace.visualstudio.com/items?itemName=granneman.grannepack-html. ## Slide 208 https://chnsa.ws/1b1 ## Slide 209 Granneman, R. Scott. “HTML5 template for Web dev courses”. GitHub, 30 Oct 2018, https://gist.github.com/rsgranne/e5a9c5706679bfc5eb545537d09576ce. Web. 8 Oct 2022. ## Slide 210 Granneman, R. Scott. “HTML5 template for Web dev courses”. GitHub, 30 Oct 2018, https://gist.github.com/rsgranne/e5a9c5706679bfc5eb545537d09576ce. Web. 8 Oct 2022. ## Slide 211 Granneman, R. Scott. “[Code for HTML5 template for Web dev courses]”. GitHub, 30 Oct 2018, https://gist.githubusercontent.com/rsgranne/e5a9c5706679bfc5eb545537d09576ce/raw/4718225d4deb0b7a4b1cee5aa01b7f050ede53be/html5.html. Web. 8 Oct 2022. ## Slide 212 Granneman, R. Scott. “[Code for HTML5 template for Web dev courses]”. GitHub, 30 Oct 2018, https://gist.githubusercontent.com/rsgranne/e5a9c5706679bfc5eb545537d09576ce/raw/4718225d4deb0b7a4b1cee5aa01b7f050ede53be/html5.html. Web. 8 Oct 2022. ## Slide 224 https://chnsa.ws/1yn ## Slide 225 Granneman, R. Scott. “Bootstrap 5 CDN template for Web dev courses”. GitHub, 08 Oct 2022, https://gist.github.com/rsgranne/c98ddd1cdf30eea5c68fd59640663f11. Web. 08 Oct 2022. ## Slide 226 Granneman, R. Scott. “Bootstrap 5 CDN template for Web dev courses”. GitHub, 08 Oct 2022, https://gist.github.com/rsgranne/c98ddd1cdf30eea5c68fd59640663f11. Web. 08 Oct 2022. ## Slide 227 Granneman, R. Scott. “[Code for Bootstrap 5 CDN template for Web dev courses]”. GitHub, 8 Oct 2022, https://gist.githubusercontent.com/rsgranne/c98ddd1cdf30eea5c68fd59640663f11/raw/1fb44ff50fe0690d8c79ebde3cc894f7984f69bd/bootstrap-5-cdn.html. Web. 8 Oct 2022. ## Slide 228 Granneman, R. Scott. “[Code for Bootstrap 5 CDN template for Web dev courses]”. GitHub, 8 Oct 2022, https://gist.githubusercontent.com/rsgranne/c98ddd1cdf30eea5c68fd59640663f11/raw/1fb44ff50fe0690d8c79ebde3cc894f7984f69bd/bootstrap-5-cdn.html. Web. 8 Oct 2022. ## Slide 238 Bootstrap 3 CDN template: https://chnsa.ws/1b2 Bootstrap 4 CDN template: https://chnsa.ws/1b3 Bootstrap 4 NPM template (https://chnsa.ws/1bz) is only needed unless I specifically tell you to, which will be unlikely ## Slide 261 Wikipedia contributors. “Context menu”. Wikipedia, The Free Encyclopedia, 10 May 2022, https://en.wikipedia.org/wiki/Context_menu. Web. 8 Oct. 2022. ## Slide 285 Granneman, Scott. “Visual Studio Code - Installation - Running in GitHub”. Vimeo, 11 Oct 2022, https://vimeo.com/758916351. Web. 11 Nov 2022. ## Slide 300 FIXME: add video ## Slide 301 FIXME Do this section! ## Slide 307 FIXME: add video ## Slide 340 https://marketplace.visualstudio.com/items?itemName=AdamCaviness.theme-monokai-dark-soda ## Slide 348 https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme ## Slide 349 https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme ## Slide 353 https://marketplace.visualstudio.com/items?itemName=granneman.grannepack-css ## Slide 402 No, you can’t fold everything in just a particular section of code ## Slide 414 https://en.wikipedia.org/wiki/Git; basic definition modified by me ## Slide 421 https://granneman.com/downloads/web-dev/HTML-Overview-Condensed.pdf https://granneman.com/downloads/web-dev/HTML-Overview-Condensed.txt ## Slide 422 https://www.granneman.com/presentations/all-presentations ## Slide 423 Nord 3: background Nord 6: text ## Slide 445 https://code.visualstudio.com ## Slide 451 Icon by Dave Gandy: https://www.flaticon.com/authors/dave-gandy ## Slide 452 https://code.visualstudio.com/#alt-downloads ## Slide 459 For a video of this process, see “Visual Studio Code - Installation - Running in GitHub” at https://vimeo.com/769775274. ## Slide 460 For a video of this process, see “Visual Studio Code - Installation - Running in GitHub” at https://vimeo.com/769775274. ## Slide 463 Dias, Chris. “vscode.dev(!)”. Visual Studio Code, 20 Oct 2021, https://code.visualstudio.com/blogs/2021/10/20/vscode-dev. Web. 09 Nov 2022. ## Slide 464 Microsoft. “Get Started — Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 465 Microsoft. “Get Started — Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 466 Microsoft. “Get Started — Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 467 Microsoft. “Get Started — Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 468 Microsoft. “Get Started — Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 469 Microsoft. “Get Started — Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 470 Microsoft. “Get Started — Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 471 Microsoft. “Get Started — Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 472 Microsoft. “Get Started — Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 473 Microsoft. “settings.json — Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 474 Microsoft. “Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 475 Microsoft. “Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 476 Microsoft. “Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 477 Microsoft. “Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 478 Microsoft. “Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 479 Microsoft. “Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 480 Microsoft. “Visual Studio Code Server”. Visual Studio Code, 2 Nov 2022, https://code.visualstudio.com/docs/remote/vscode-server. Web. 09 Nov 2022. ## Slide 481 Microsoft. “Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 482 Microsoft. “Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 483 Microsoft. “Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 484 Microsoft. “index.html — herbert-west [GitHub] - Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 485 Microsoft. “index.html — herbert-west [GitHub] - Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Web. 09 Nov 2022. ## Slide 515 Granneman, R. Scott. “GrannePack Web Dev Snippets”. Visual Studio Marketplace, 20 Jan 2023, https://marketplace.visualstudio.com/items?itemName=granneman.grannepack-html. Web. 20 Jan 2023.