VSCode Essentials

vscode-essentials.md

Visual Studio Code Essentials

An opinionated introduction

Why is this "opinionated"?

• I might state things without giving sources.

• I haven't read the full vscods docs, let alone the source code. My knowledge is limited.

• Even if I had all the knowledge, 1 hour is pretty limited as well.

• I'll only talk about what I actually use and find handy. YMMV.

  • TypeScript, mostly
  • snippets, excessively
  • no git
  • no terminal
  • no split views
  

The aim of this little workshop is to spark your own curiosity about VSCode by showing you a very particular set of its features. You will have to take it from there!

To follow this workshop

• I hope you have vscode installed. If not, please do so now
• I recommend disabling 'Workbench › Editor: Enable Preview' upfront

😴 history, technological background

Visual Studio Code is a freeware source-code editor made by Microsoft for Windows, Linux and macOS. Features include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git. Users can change the theme, keyboard shortcuts, preferences, and install extensions that add additional functionality. (wikipedia, emphasis mine)

Various facts

• first announced 2015
• very popular and widespread (lots of community support 💪)
• available on github with 114k ⭐ (microsoft/vscode)
• excellent docs
• built on electron
• different from Microsoft Visual Studio, an IDE developed by Microsoft. (the differences, for those who care)
• highly extensible

Language support 🇦🇩 🇦🇫 🇦🇮

• OOTB:
  • very basic support for (almost) every langauge 🤔
  • IntelliSense for JavaScript, TypeScript, JSON, CSS, and HTML 💪
  • node.js debugger 🔎
• The rest of the functionality is provided via community plugins of varying quality 🔌

Some terminology

🏋️‍♀️ Commands

Finally, something useful in this workshop

Let's see which commands there are …

• open the keyboard shortcuts (the gear icon in the activity bar should get you there).
• search show all commands command. Press the associated keys.
• much command 😻

Both the show all commands command and the Keyboard Setting show an exhaustive list of available commands.

Assigning shortcuts for commands

(Please pardon my subpar shortcut game at the momment. It's the mac, I swear.)

• using the graphical interface is okay, I guess
• use the JSON file if you need more control, e.g. setting args
• there are extensions assisting with shortcuts (this one looks nice – tbh, haven't tried it)
• the record keys button in the Keyboard Settings is really helpful for knowing what you're actually doing
• Shortcuts are a very personal thing. Yelling at somebody to "press cmd+shift+f7" is seldom of much use. Talk in commands!

A very (very) incomplete list of handy commands

• File: open

• File: open recent

• Show all commands

• Open next/previous editor

• New editor

• Find

• Replace

• Search: Find in files

• Search: replace in files

• New window

• Close (all/saved) editor(s)

• Reopen closed editor

• Show all editors by most recently used

• Go to

  • file
  • symbol in editor/workspace
  • next/previous problem (in files)
  • line/column

• copy line down

• delete line

• move line up/down

• insert line above/below

• cursor undo/redo

• Open next/previous recently used editor

• install 'code' command in PATH

• rename symbol

  

• Save all editors

• toggle panel

• reveal active file in sidebar

• copy path of active file

• show hover

• trigger suggest

• trigger parameter hints

• quick fix …

• format document

• peek definition

• go to definition

• peek type definition

• go to type definition

• go to references

• add cursor below/above

snippets

🛠 settings

• managing settings (graphically & in json)
• syncing settings
• settings in workspaces

the .vscode folder

• the .code-workspace file (and how we use it within our projects)

• the launch.json (maybe even taking a bold look into the debugging panel)

• the extensions.json

• what are snippets

• some random snippets I like very much