Difference between revisions of "Visual Studio Code Tips"

Revision as of 18:37, 16 April 2024

Visual Studio Code is a free and open source multi-platform software application that is used by programmers of all levels.
Its name is often shortened to VS Code. (Not VSCode.)
Note that "Visual Studio Code" is an editor, while "Visual Studio" is an IDE. Both are Microsoft products.
VS Code features include debugging, syntax highlighting, intelligent code completion, snippets and code refactoring for many computer languages.
It also features an integrated terminal and embedded Git version control.
It is made with the Electron Framework (which is developed and maintained by GitHub).

At Pikes Peak Makerspace (PPM), Visual Studio Code is installed on Design Workstations 1-3, and our Ubuntu Workstation.
Some recommended extensions, for example "Code Spell Check", are installed at PPM, too.

Visual Studio Code
application icon

Tips

Links to code.visualstudio.com:

Tips and Tricks

Emmet — expand abbreviations and snippets

built right into Visual Studio Code, no extension required

VS Code Command Palette

(e.g. "Transform to" UPPERCASE, etc. is not in the menus)

Keyboard shortcut cheat sheets for all platforms

Links to other external sites:

VS Code tips — Do not disturb mode

VS Code Tips — 476 videos(!) from Code 2020

Visual Studio Code Wiki

Training — PPM Trainer(s) needed

PPM announces its Upcoming events, including classes, on Meetup

Links to code.visualstudio.com:

Introductory Videos

Extension Marketplace

Visual Studio Code Product Home Page

Hand-Curated Extensions

Links to member-recommended extensions:

USD Language — construct animated 3D scenes

Code Spell Check — spell checking as you type

SVG — coding, including preview

PlatformIO — for embedded development (Arduino)

GitHub Copilot — code suggestions from comments

Luna Paint — Raster Image Editor

Related Pages

Links to related PPM Wiki pages:

GitHub Tips

STL File Format Tips

SVG File Format Tips

USDZ File Format Tips

Arduino

Raspberry Pi

Ubuntu

Computers — Windows

Computers — Mac and Apple

Hand-Curated Links

Links to member-recommended external sites:

https://www.programmingfonts.org/

https://www.markdownguide.org/

https://alternativeto.net/software/visual-studio-code/

https://codepen.io/ — build, test, and discover front-end code

https://jupyter.org/ — for interactive computing across all programming languages

https://www.electronjs.org/ — build cross-platform desktop apps

List of free and open-source software packages — on Wikipedia

For Additional Help

Use the PPM Slack channel #computing

List of all PPM Slack channels

Note that we have a Slack channel (#job-board) for members to post, discuss, or accept job opportunities either within PPM or from the community.

PPM Tool Color Map — Interactive

Search the PPM Wiki — include both Content pages and Multimedia

Contact Us if you cannot find your answer here on our Wiki, or you notice something is outdated.

Pikes Peak Makerspace (PPM) is dedicated to supporting our maker community in their creative processes by providing shared space, shared tools, materials, software and a knowledge base to turn their ideas into reality.

@@ Line 3: / Line 3: @@
 Its name is often shortened to VS&nbsp;Code. (Not&nbsp;VSCode.)
 <br>
-Note&nbsp;that "Visual Studio Code" is an editor, while "Visual Studio" is an IDE. Both&nbsp;are Microsoft&nbsp;products.
+Note that "Visual Studio Code" is an editor, while "Visual Studio" is an IDE. Both&nbsp;are Microsoft&nbsp;products.
 <br>
 VS Code features include debugging, syntax highlighting, intelligent code completion, snippets and code refactoring for many computer&nbsp;languages.
@@ Line 9: / Line 9: @@
 It also features an integrated terminal and embedded Git version&nbsp;control.
 <br>
-It is made with the Electron Framework (which is developed and maintained by&nbsp;GitHub)
+It is made with the Electron Framework (which is developed and maintained by GitHub).
 At Pikes Peak Makerspace (PPM), Visual Studio Code is installed on Design Workstations 1-3, and our Ubuntu&nbsp;Workstation.
 <br>
-Some recommended extensions are installed at PPM, too.
+Some recommended extensions, for example "Code Spell Check", are installed at PPM, too.
 <br>
 <br>
-<hr style="height:2.5px">
+<p style="padding:0.2em 0.4em; background:#ff6c00; color:#FFFFFF; font-size:15%;"> &nbsp; </p>
 <br>
-[[File:Vscode application icon.png|alt=Vscode application icon|120x120px|thumb|<center>'''Visual Studio Code<br>application icon'''</center>]]
+[[File:Vscode application icon.png|alt=Vscode application icon|150x150px|thumb|'''Visual Studio Code<br>application icon''']]
 ==Tips==
 Links to code.visualstudio.com:
+:[https://code.visualstudio.com/docs/getstarted/tips-and-tricks '''Tips and Tricks''']
+:[https://code.visualstudio.com/docs/editor/emmet '''Emmet'''] — expand abbreviations and&nbsp;snippets
+::built right into Visual Studio Code, no extension required
 :'''[https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette VS Code Command Palette]'''
 ::(e.g. "Transform to" UPPERCASE, etc. is not in the menus)
-::[https://code.visualstudio.com/docs/getstarted/tips-and-tricks '''Tips and Tricks''']
+:'''[https://code.visualstudio.com/docs/getstarted/keybindings#_keyboard-shortcuts-reference Keyboard shortcut cheat sheets for all&nbsp;platforms]'''
 Links to other external sites:
 :[https://www.youtube.com/watch?v=w3RSzophv00 '''VS Code tips — Do not disturb mode''']
 :'''[https://www.youtube.com/watch?v=G6JJxa0QNfE&list=PLvKOuwv1u7bGri7IBkLYhmhMRnvtAlc4N VS Code Tips] — 476 videos(!) from Code&nbsp;2020'''
 :[https://github.com/microsoft/vscode/wiki '''Visual Studio Code Wiki''']
-==Cheat Sheets==
-Links to  code.visualstudio.com:
-'''[https://code.visualstudio.com/docs/getstarted/keybindings#_keyboard-shortcuts-reference Keyboard shortcut cheat sheets for all&nbsp;platforms]'''
 ==Training — PPM Trainer(s) needed==
-PPM announces all its [https://www.meetup.com/pikespeakmakerspace/events '''Upcoming events, including classes, on Meetup''']
+PPM announces its [https://www.meetup.com/pikespeakmakerspace/events '''Upcoming events, including classes, on Meetup''']
 Links to code.visualstudio.com:
 :[https://code.visualstudio.com/docs/getstarted/introvideos '''Introductory Videos''']
+:'''[https://code.visualstudio.com/docs/editor/extension-marketplace Extension Marketplace]'''
 :'''[https://code.visualstudio.com/ Visual Studio Code Product Home Page]'''
-== Curated Extensions ==
+==Hand-Curated Extensions==
-Links to external sites:
+Links to member-recommended extensions:
+=== [https://animallogic.com/ USD Language] — construct animated 3D scenes ===
+===[https://streetsidesoftware.com/ Code Spell Check] — spell checking as you type===
 ===[https://marketplace.visualstudio.com/items?itemName=jock.svg SVG] — coding, including&nbsp;preview===
 ===[https://platformio.org/ PlatformIO] — for embedded development (Arduino)===
 ===[https://docs.github.com/en/copilot/getting-started-with-github-copilot/getting-started-with-github-copilot-in-visual-studio-code GitHub&nbsp;Copilot] — code suggestions from&nbsp;comments===
 ===[https://github.com/lunapaint/vscode-luna-paint Luna Paint] — Raster Image Editor===
-===[https://streetsidesoftware.com/ Code Spell Check] — spell checking as you type===
-===[https://code.visualstudio.com/docs/editor/emmet Emmet] — expand abbreviations and&nbsp;snippets===
-:'''built right into Visual Studio Code, no extension required'''
-==Curated Links==
-Links to external sites:
-:'''https://www.programmingfonts.org/'''
-:'''https://www.markdownguide.org/'''
-:'''https://alternativeto.net/software/visual-studio-code/'''
-:'''https://codepen.io/''' — build, test, and discover front-end code
-:'''https://jupyter.org/''' — for interactive computing across all programming&nbsp;languages
 ==Related Pages==
 Links to related PPM Wiki pages:
 :'''[[GitHub Tips]]'''
+:'''[[STL File Format Tips]]'''
 :'''[[SVG File Format Tips]]'''
+:'''[[USDZ File Format Tips]]'''
 :[[Arduino|<span style="color:#ffffff; background:#864199">&nbsp;&nbsp;'''Arduino'''&nbsp;&nbsp;</span>]]
 :[[Raspberry Pi|<span style="color:#ffffff; background:#864199">&nbsp;&nbsp;'''Raspberry Pi'''&nbsp;&nbsp;</span>]]
 :[[Ubuntu|<span style="color:#000000; background:#D0DD27">&nbsp;&nbsp;'''Ubuntu'''&nbsp;&nbsp;</span>]]
-:[[Computers|<span style="color:#000000; background:#D0DD27">&nbsp;&nbsp;'''Computers'''&nbsp;&nbsp;</span>]]
+:[[Computers|<span style="color:#000000; background:#D0DD27">&nbsp;&nbsp;'''Computers — Windows'''&nbsp;&nbsp;</span>]]
+:[[Computers -- Mac and Apple|<span style="color:#000000; background:#D0DD27">&nbsp;&nbsp;'''Computers — Mac and Apple'''&nbsp;&nbsp;</span>]]
-==Curated Links==
+==Hand-Curated Links==
 Links to member-recommended external sites:
-:'''[https://www.electronjs.org/ Electron Framework]''' — Build cross-platform desktop&nbsp;apps
+:'''https://www.programmingfonts.org/'''
+:'''https://www.markdownguide.org/'''
+:'''https://alternativeto.net/software/visual-studio-code/'''
+:'''https://codepen.io/''' — build, test, and discover front-end code
+:'''https://jupyter.org/''' — for interactive computing across all programming&nbsp;languages
+:'''https://www.electronjs.org/''' — build cross-platform desktop&nbsp;apps
 :'''[[wikipedia:List_of_free_and_open-source_software_packages|List of free and open-source software packages]]''' — on&nbsp;Wikipedia
 ==For Additional Help==
 :Use the PPM Slack channel #computing
-:[[How To Slack#Channel Names and Descriptions|'''List of all PPM Slack channels''']]
+:[[How To Slack#PPM Channel Names and Descriptions|'''List of all PPM Slack channels''']]
 :Note that we have a Slack channel (#job-board) for members to post, discuss, or accept job opportunities either within PPM or from the&nbsp;community.
 {{Template:Footer}}
-<br>
-<hr style="height:2.5px">
 {{Template:Ideas into reality}}
+<p style="padding:0.2em 0.4em; background:#ff6c00; color:#FFFFFF; font-size:15%;"> &nbsp; </p>
 [[Category:Software]]
-[[Category:Volunteers Needed]]