Notes for Visual Studio Code By Scott Granneman & Jans Carton Find the presentation at http://www.granneman.com/presentations/ ## Slide 2 https://granneman.com/downloads/web-dev/HTML-Overview-Condensed.pdf https://granneman.com/downloads/web-dev/HTML-Overview-Condensed.txt ## Slide 3 https://www.granneman.com/presentations/all-presentations ## Slide 5 Rakozy, Greg [@grakozy]. “silhouette photography of person photo – Free Sky Image on Unsplash”. Unsplash, 12 Oct 2015, https://unsplash.com/photos/oMpAz-DN-9I. Accessed 1 Nov 2015. Licensed from Unsplash: https://unsplash.com/license. ## Slide 11 FIX ME - put numbers on image ## Slide 12 Sensa. “Face with symbols on mouth”. Sensa, 4 Mar 2021, https://sensa.co/emoji/. Accessed 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. Accessed 11 Nov 2022. ## Slide 18 “2024 Stack Overflow Developer Survey”. Stack Overflow, 1 Jan. 2025, https://survey.stackoverflow.co/2024/technology#most-popular-technologies-new-collab-tools. Accessed 11 Apr. 2025. ## Slide 21 https://code.visualstudio.com ## Slide 22 Wikipedia contributors. “Microsoft Visual Studio”. Wikipedia, The Free Encyclopedia, 17 July 2022, https://en.wikipedia.org/wiki/Microsoft_Visual_Studio. Accessed 20 July 2022. Microsoft. “Visual Studio: IDE and Code Editor for Software Developers and Teams”. Visual Studio. Microsoft, 2022, https://visualstudio.microsoft.com. Accessed 20 July 2022. ## Slide 23 https://code.visualstudio.com ## Slide 32 Icon by Dave Gandy: https://www.flaticon.com/authors/dave-gandy ## Slide 33 https://code.visualstudio.com/docs/setup/linux ## Slide 34 https://code.visualstudio.com/docs/setup/linux ## 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 “Visual Studio Code 1.63 Release Notes.” Visual Studio Code, Microsoft, Nov. 2021, https://code.visualstudio.com/updates/v1_63. Accessed 10 Feb. 2026. ## Slide 49 Wikipedia contributors. “Dash”. Wikipedia, The Free Encyclopedia, 5 Feb. 2026, https://en.wikipedia.org/wiki/Dash. Accessed 10 Feb. 2026. Wikipedia contributors. “Thin space”. Wikipedia, The Free Encyclopedia, 5 Jan. 2026, https://en.wikipedia.org/wiki/Thin_space. Accessed 10 Feb. 2026. Wikipedia contributors. “Zero-width space”. Wikipedia, The Free Encyclopedia, 4 Jan. 2026, https://en.wikipedia.org/wiki/Zero-width_space. Accessed 10 Feb. 2026. Wikipedia contributors. “Word joiner”. Wikipedia, The Free Encyclopedia, 15 Nov. 2025, https://en.wikipedia.org/wiki/Word_joiner. Accessed 10 Feb. 2026. Wikipedia contributors. “Multiplication sign”. Wikipedia, The Free Encyclopedia, 18 Dec. 2025, https://en.wikipedia.org/wiki/Multiplication_sign. Accessed 10 Feb. 2026. Wikipedia contributors. “Plus and minus signs”. Wikipedia, The Free Encyclopedia, 21 Jan. 2026, https://en.wikipedia.org/wiki/Plus_and_minus_signs. Accessed 10 Feb. 2026. Wikipedia contributors. “Slash (punctuation)”. Wikipedia, The Free Encyclopedia, 9 Jan. 2026, https://en.wikipedia.org/wiki/Slash_%28punctuation%29. Accessed 10 Feb. 2026. Wikipedia contributors. “Halfwidth and Fullwidth Forms (Unicode block)”. Wikipedia, The Free Encyclopedia, 16 Nov. 2025, https://en.wikipedia.org/wiki/Halfwidth_and_Fullwidth_Forms_%28Unicode_block%29. Accessed 10 Feb. 2026. Wikipedia contributors. “Cyrillic script”. Wikipedia, The Free Encyclopedia, 5 Feb. 2026, https://en.wikipedia.org/wiki/Cyrillic_script. Accessed 10 Feb. 2026. Wikipedia contributors. “Greek alphabet”. Wikipedia, The Free Encyclopedia, 7 Feb. 2026, https://en.wikipedia.org/wiki/Greek_alphabet. Accessed 10 Feb. 2026. ## 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 57 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 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 86 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 87 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 88 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 89 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 90 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 91 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 92 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 93 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 94 Visual Studio Code 1.86.0; 6 Feb. 2024 ## Slide 109 Granneman, R. Scott. “VSCode settings for the extensions installed via GrannePack HTML (updated 2024-02-01). GitHub Gist, 1 Feb. 2024, https://gist.github.com/rsgranne/98c3040953a83d8d3cec41b8c058a0ae. Accessed 15 Apr 2024. ## Slide 110 Granneman, R. Scott. “VSCode settings for the extensions installed via GrannePack HTML (updated 2024-02-01). GitHub Gist, 1 Feb. 2024, https://gist.github.com/rsgranne/98c3040953a83d8d3cec41b8c058a0ae. Accessed 15 Apr 2024. ## Slide 111 Granneman, R. Scott. “[Raw code for VSCode settings for the extensions installed via GrannePack HTML (updated 2024-02-01)]”. GitHub Gist, 1 Feb. 2024, https://gist.githubusercontent.com/rsgranne/98c3040953a83d8d3cec41b8c058a0ae/raw/371cf6e7226aaa91803be78b5cd779332dde2312/grannepack-html-vscode-settings.json. Accessed 15 Apr 2024. ## Slide 112 Granneman, R. Scott. “[Raw code for VSCode settings for the extensions installed via GrannePack HTML (updated 2024-02-01)]”. GitHub Gist, 1 Feb. 2024, https://gist.githubusercontent.com/rsgranne/98c3040953a83d8d3cec41b8c058a0ae/raw/371cf6e7226aaa91803be78b5cd779332dde2312/grannepack-html-vscode-settings.json. Accessed 15 Apr 2024. ## Slide 136 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. Accessed 6 Apr 2022. ## Slide 137 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p ## Slide 146 https://emmet.io ## Slide 163 “Abbreviations Syntax”. Emmet Documentation, https://docs.emmet.io/abbreviations/syntax/. Accessed 5 Apr 2022. ## Slide 185 Granneman, R. Scott. “GrannePack Web Dev Snippets”. Visual Studio Marketplace, 20 Jan 2023, https://marketplace.visualstudio.com/items?itemName=granneman.grannepack-html. Accessed 20 Jan 2023. ## Slide 215 Somu X. “Inception fog horn sound effect (HD)”. YouTube, 4 Apr. 2022, https://www.youtube.com/watch?v=ij5W4ZBTcXo. Accessed 4 Apr. 2024. Fair use. Modified by converting to MP3. ## Slide 216 Think Media. “Popular Meme Sound Effects (For Video Editing)”. YouTube, 12 Jan. 2022, https://www.youtube.com/watch?v=a9P_j1gMXBo. Accessed 4 Apr. 2024. Fair use. Modified by excerpting only “Heavenly Music” & converting to MP3. ## Slide 220 “Search results - grannepack | Visual Studio Code”. Visual Studio Marketplace, https://marketplace.visualstudio.com/search?term=grannepack&target=VSCode&category=All%20categories&sortBy=Relevance. Accessed 15 Apr 2024. ## Slide 221 Granneman, R. Scott. “GrannePack HTML”. Visual Studio Marketplace, , https://marketplace.visualstudio.com/items?itemName=granneman.grannepack-html. ## Slide 230 https://chnsa.ws/1b1 ## Slide 231 Granneman, R. Scott. “HTML5 template for Web dev courses”. GitHub, 30 Oct 2018, https://gist.github.com/rsgranne/e5a9c5706679bfc5eb545537d09576ce. Accessed 8 Oct 2022. ## Slide 232 Granneman, R. Scott. “HTML5 template for Web dev courses”. GitHub, 30 Oct 2018, https://gist.github.com/rsgranne/e5a9c5706679bfc5eb545537d09576ce. Accessed 8 Oct 2022. ## Slide 233 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. Accessed 8 Oct 2022. ## Slide 234 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. Accessed 8 Oct 2022. ## Slide 246 https://chnsa.ws/1yn ## Slide 247 Granneman, R. Scott. “Bootstrap 5 CDN template for Web dev courses”. GitHub, 08 Oct 2022, https://gist.github.com/rsgranne/c98ddd1cdf30eea5c68fd59640663f11. Accessed 08 Oct 2022. ## Slide 248 Granneman, R. Scott. “Bootstrap 5 CDN template for Web dev courses”. GitHub, 08 Oct 2022, https://gist.github.com/rsgranne/c98ddd1cdf30eea5c68fd59640663f11. Accessed 08 Oct 2022. ## Slide 249 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. Accessed 8 Oct 2022. ## Slide 250 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. Accessed 8 Oct 2022. ## Slide 260 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 283 Wikipedia contributors. “Context menu”. Wikipedia, The Free Encyclopedia, 10 May 2022, https://en.wikipedia.org/wiki/Context_menu. Accessed 8 Oct. 2022. ## Slide 307 Granneman, Scott. “Visual Studio Code - Installation - Running in GitHub”. Vimeo, 11 Oct 2022, https://vimeo.com/758916351. Accessed 11 Nov 2022. ## Slide 322 FIXME: add video ## Slide 332 FIXME Do this section! ## Slide 374 https://marketplace.visualstudio.com/items?itemName=AdamCaviness.theme-monokai-dark-soda ## Slide 384 https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme ## Slide 385 https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme ## Slide 390 https://marketplace.visualstudio.com/items?itemName=granneman.grannepack-css ## Slide 439 No, you can’t fold everything in just a particular section of code ## Slide 451 https://en.wikipedia.org/wiki/Git; basic definition modified by me ## Slide 458 https://granneman.com/downloads/web-dev/HTML-Overview-Condensed.pdf https://granneman.com/downloads/web-dev/HTML-Overview-Condensed.txt ## Slide 459 https://www.granneman.com/presentations/all-presentations ## Slide 482 https://code.visualstudio.com ## Slide 488 Icon by Dave Gandy: https://www.flaticon.com/authors/dave-gandy ## Slide 489 https://code.visualstudio.com/#alt-downloads ## Slide 496 For a video of this process, see “Visual Studio Code - Installation - Running in GitHub” at https://vimeo.com/769775274. ## Slide 497 For a video of this process, see “Visual Studio Code - Installation - Running in GitHub” at https://vimeo.com/769775274. ## Slide 500 Dias, Chris. “vscode.dev(!)”. Visual Studio Code, 20 Oct 2021, https://code.visualstudio.com/blogs/2021/10/20/vscode-dev. Accessed 09 Nov 2022. ## Slide 501 Microsoft. “Get Started — Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Accessed 09 Nov 2022. ## Slide 502 Microsoft. “Get Started — Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Accessed 09 Nov 2022. ## Slide 503 Microsoft. “Get Started — Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Accessed 09 Nov 2022. ## Slide 504 Microsoft. “Get Started — Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Accessed 09 Nov 2022. ## Slide 505 Microsoft. “Get Started — Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Accessed 09 Nov 2022. ## Slide 506 Microsoft. “Get Started — Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Accessed 09 Nov 2022. ## Slide 507 Microsoft. “Get Started — Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Accessed 09 Nov 2022. ## Slide 508 Microsoft. “Get Started — Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Accessed 09 Nov 2022. ## Slide 509 Microsoft. “Get Started — Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Accessed 09 Nov 2022. ## Slide 510 Microsoft. “settings.json — Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Accessed 09 Nov 2022. ## Slide 511 Microsoft. “Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Accessed 09 Nov 2022. ## Slide 512 Microsoft. “Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Accessed 09 Nov 2022. ## Slide 513 Microsoft. “Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Accessed 09 Nov 2022. ## Slide 514 Microsoft. “Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Accessed 09 Nov 2022. ## Slide 515 Microsoft. “Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Accessed 09 Nov 2022. ## Slide 516 Microsoft. “Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Accessed 09 Nov 2022. ## Slide 517 Microsoft. “Visual Studio Code Server”. Visual Studio Code, 2 Nov 2022, https://code.visualstudio.com/docs/remote/vscode-server. Accessed 09 Nov 2022. ## Slide 518 Microsoft. “Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Accessed 09 Nov 2022. ## Slide 519 Microsoft. “Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Accessed 09 Nov 2022. ## Slide 520 Microsoft. “Workspace — Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Accessed 09 Nov 2022. ## Slide 521 Microsoft. “index.html — herbert-west [GitHub] - Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Accessed 09 Nov 2022. ## Slide 522 Microsoft. “index.html — herbert-west [GitHub] - Visual Studio Code”. Visual Studio Code, https://vscode.dev/. Accessed 09 Nov 2022. ## Slide 525 https://github.com/features/codespaces ## Slide 526 https://github.com/features/codespaces ## Slide 527 https://github.com/features/codespaces ## Slide 528 https://github.com/features/codespaces ## Slide 529 https://github.com/features/codespaces ## Slide 552 Granneman, R. Scott. “GrannePack Web Dev Snippets”. Visual Studio Marketplace, 20 Jan 2023, https://marketplace.visualstudio.com/items?itemName=granneman.grannepack-html. Accessed 20 Jan 2023.