Skip to content

Instantly share code, notes, and snippets.

@stefanpl

stefanpl/vscode-essentials.md

Created April 14, 2021 08:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save stefanpl/21ef5bfea60f55ea0a57ef09755a174a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save stefanpl/21ef5bfea60f55ea0a57ef09755a174a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. stefanpl renamed this gist Apr 14, 2021. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → vscode-essentials.md
    View file
    File renamed without changes.
  2. stefanpl created this gist Apr 14, 2021.
    148 changes: 148 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,148 @@
    # Visual Studio Code Essentials

    ## An opinionated introduction

    <img style="max-width:30%; margin: 3rem auto; display: block;" src="https://upload.wikimedia.org/wikipedia/commons/2/2d/Visual_Studio_Code_1.18_icon.svg" alt="vscode logo" />

    ### 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

    <img style="max-width:30%; margin: 3rem auto; display: block;" src="https://memegenerator.net/img/instances/74662147.jpg" alt="deal with it" />

    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!**

    <h2 style="margin-top: 500px">To follow this workshop</h2>

    - I hope you have vscode installed. If not, [please do so now](https://code.visualstudio.com/download)
    - I recommend disabling 'Workbench › Editor: Enable Preview' upfront

    <h2 style="margin-top: 500px">😴 history, technological background</h2>

    > 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](https://en.wikipedia.org/wiki/Visual_Studio_Code), emphasis mine)

    ### Various facts

    - first announced 2015
    - [very popular](https://insights.stackoverflow.com/survey/2018/#development-environments-and-tools) and widespread (lots of community support 💪)
    - [available on github with 114k ⭐ (microsoft/vscode)](https://github.com/microsoft/vscode)
    - [excellent docs](https://code.visualstudio.com/docs)
    - built on [electron](https://www.electronjs.org/)
    - different from [Microsoft Visual Studio](https://en.wikipedia.org/wiki/Microsoft_Visual_Studio), an IDE developed by Microsoft.
    ([the differences, for those who care](https://stackoverflow.com/questions/30527522/what-are-the-differences-between-visual-studio-code-and-visual-studio))
    - [highly extensible](https://code.visualstudio.com/api/language-extensions/language-server-extension-guide)

    ### 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

    <img style="margin: 3rem auto; display: block;" src="https://code.visualstudio.com/assets/docs/getstarted/userinterface/hero.png" alt="VSCode interface" />

    <h2 style="margin-top: 500px">🏋️‍♀️ Commands</h2>

    ### Finally, something useful in this workshop

    <img style="max-width:600px; margin: 3rem auto; display: block;" src="https://staticfiles.nvon.com/what-if-i-told-you.jpg" alt="What if I told you everything is a command" />

    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](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.LearntheShortcut) – 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!**

    <img style="max-width:600px; margin: 10rem auto; display: block;" src="https://staticfiles.nvon.com/give-teh-command.jpg" alt="I don't even have a cmd key, y'know. Give teh command." />

    ### 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

    <img style="max-width:600px; margin: 3rem auto; display: block;" src="https://staticfiles.nvon.com/one-does-not-simply.jpg" alt="one does not simply search and replace symbols" />

    - 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