Skip to content
Paweł Cisło

VS Code

💻 My setup

Section titled “💻 My setup”

  • My public gist setup ← share it by: “Profiles (Default)” > “Export Profile…” > (deselect “UI State” not to expose private stuff) > “Local” > copy the content and save in your gist

  • 🎨 Theme

  • ⌨ Font

    "terminal.integrated.fontFamily": "JetBrainsMono Nerd Font Mono",
    "terminal.integrated.fontWeight": 350

  • 🧹 Code formatting

    • add this to settings.json
      • "editor.codeActionsOnSave": { "source.organizeImports": true },
    • disable Pylint as it will conflict with flake8
    • add black args: -l 99
    • enable pytest
    • Editor: Render Whitespace ← you can access it in Settings

  • 💡 Tips

    • type code . in terminal to open another VS Code

  • ⌨ Keyboard shortcut change

    • not to conflict with Ditto and ConEmu
      • open ConEmu with [ALT] + [`]
      • open Ditto with [CTRL] + [`]
      • open VS Code terminal with [CTRL] + [SHIFT] + [`]
        • also disable the creation of new terminal with this shortcut as it’s done by default

  • ⌨ Keyboard shortcuts ← pdf (check also my Anki Deck)

    • Interface
      • [CTRL/CMD] + [SHIFT] + [P] ← command palette
      • [CTRL/CMD] + [B] ← hide/unhide sidebar
      • [CTRL] + [SHIFT] + [`] ← open/focus on terminal
        • [CTRL] + [`] ← open/close terminal
      • [CTRL/CMD] + [SHIFT] + [F] ← find in files
      • [CTRL/CMD] + [P] ← go to file
      • [CTRL/CMD] + [,] ← open settings
      • [CTRL/CMD] + [K], [M] ← change language mode
      • [CTRL/CMD] + [SHIFT] + [-] or [+] ← reset zoom
      • [CTRL/CMD] + [SHIFT] + [0] ← toggle between light/dark theme
      • code . ← typed in a terminal opens up a VS Code instance
    • Split mode
      • [CTRL/CMD] + [\] ← split mode
      • [CTRL/CMD] + [1] ← switch to editor group 1
      • [ALT/OPT], [V] + [L] + [S] ← fold the split view into the single one
    • Code
      • [CTRL/OPT] + [SPACE/ESC] ← IntelliSense
      • [CTRL/CMD] + [LMB] ← go to the code definition
      • [CTRL/CMD] + [/] ← comment the line of code
      • [SHIFT] + [ALT/OPT] + [F] ← format code
      • [CTRL/CMD] + [SHIFT/OPT] + [ or ] ← fold/unfold line
        • [CTRL/CMD] + [K], [CTRL/CMD] + [0] ← fold all regions
        • [CTRL/CMD] + [K], [CTRL/CMD] + [J] ← unfold all regions
      • [ALT/OPT] + [Z] ← text wrap
      • [F5] ← initialise the debugger
      • [F8] ← jump between errors
      • [F9] ← set a breakpoint on the current line. Then hit [F5] to initialise the debugger
      • [CTRL/CMD] + [F5] ← run file in terminal
    • Manipulating
      • [CTRL/CMD] + [D] ← select the word your cursor is at
      • [CTRL] + [F2] (or [CMD] + [SHIFT] + [L]) ← select all instances of the word
      • [SHIFT] + [esc] ← exit multi-cursor mode
    • Navigating
      • [ALT/OPT] + [↑/↓] ← move line up/down
      • [CTRL/CMD] + [ALT/OPT] + [↑/↓] ← new cursor up/down the line
        • [ALT/OPT] + [LMB] ← place an extra cursor anywhere
      • [CTRL/CMD] + [L] ← select current line
      • [CTRL/CMD] + [SHIFT] + [L] ← select all occurrences of current selection
      • [ALT/OPT] + [SHIFT] + [I] ← put the cursor at the end of all selected lines (e.g. with [CTRL/CMD] + [A]). Afterwards, use [HOME] and [END] to move from start to end

📰 Links

Section titled “📰 Links”

🧰 Extensions/Tools

Section titled “🧰 Extensions/Tools”

Also stored on my GitHub list.

  • 🤖 Code completion
  • 📊 Data Science
    • DVC ← machine learning experiment management with tracking, plots, and data versioning
  • 🔨 Debugging
    • Code Runner ← easily run code snippets/files for multiple languages
    • Debug visualiser ← extension for visualizing data structures while debugging. Like the VS Code’s watch view, but with rich visualizations of the watched value
    • Error Lens ← improve highlighting of errors, warnings and other language diagnostics
    • Live Preview ← real browser preview inside your editor that you can debug
    • Live Server (Five Server) ← launch a development local Server with live reload feature for static & dynamic pages (better than LiveServer)
    • REST Client ← REST Client for Visual Studio Code
    • Slowbug ← debug (run) your code in slow motion to catch bugs
  • ⭐ Extra/Other
    • AWS Toolkit ← after installing, make sure to log in to the right AWS role through AWS CLI, and then select the right AWS region in VS Code
    • Code Spell Checker ← spelling checker for source code
    • Compare Folders ← compare folders by contents
    • Git Worktree Manager ← Effortless multi-workspace management and fast Git project cloning across directories. Define “Worktree Subdirectory Template” as $BASE_NAME.$REF_NAME. I can also consider creating worktrees with Git: Create Worktree… (info)
    • JWT Debugger ← JWT tokens decoder
    • Live Share ← live-edit (pair programming) a file collectively in your IDE
    • Log File Highlighter ← specify custom words to be highlighted in the log files
    • One File Export ← combine multiple files into a single text block for easy copying or exporting (e.g. for AI prompting)
    • Open Folder Context Menus for VS Code ← add two new context menus to the Explorer
    • Partial Diff ← compare (diff) text selections within a file, across files, or to the clipboard
    • Peacock ← subtly change the workspace color of your workspace. Ideal when you have multiple VS Code instances and you want to quickly identify which is which
    • Project Manager ← easily switch between projects
    • REST Client ← replacement for Postman
    • Settings Sync ← synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist. This feature is now built-in (Code/File > Preferences > Turn on Settings Sync…)
    • Sort JSON objects ← sort the keys within JSON objects
    • vscode-base64 ← base64 encode/decode the current selections
    • x509 parser ← parse OpenSSL artifacts to human readable text (e.g. select crt and use “Parse x509 certificate”)
    • YAML Sort ← sort, format and validate yaml files
  • 🐙 Git
    • Git Graph ← view a Git Graph of your repository, and perform Git actions from the graph
    • Git History ← view git log, file history, compare branches or commits
    • GitLab Workflow ← integrate GitLab into VS Code
    • GitLens ← git blame annotations and code lens
  • 🟨 JavaScript
  • 👅 Language support / Linter
  • ✍ Markdown
  • 🐍 Python
  • 👓 Readability
    • :emojisense: ← add suggestions and autocompletions to emojis
    • Bracket Pair Colorizer 2 ← don’t be lost in the forest of { } ← replaced in 1.60 with "editor.bracketPairColorization.enabled": true
    • Edit CSV ← edit csv files with a table UI
    • indent-rainbow ← make indentation easier to read
    • Markdown Preview Mermaid Support ← adds Mermaid diagram and flowchart support to VS Code’s builtin markdown preview
    • Prettier - Code formatter ← enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary
    • Rainbow CSV ← highlight CSV and TSV files in different colors, Run SQL-like queries
    • Todo Tree ← show TODO, FIXME, etc. comment tags in a tree view
    • swapdiff ← quickly swaps out documents open in diff mode
  • 🏝 Remote
    • Remote Development ← extension pack including the following 4 extensions:
      • Dev Containers (tutorial) ← work with a separate toolchain or container based application by opening any folder mounted into or inside a container
      • Remote - SSH (tutorial) ← work with source code in any location by opening folders on a remote machine/VM using SSH. Supports x86_64, ARMv7l (AArch32), and ARMv8l (AArch64) glibc-based Linux, Windows 10/Server (1803+), and macOS 10.14+ (Mojave) SSH hosts
      • Remote - Tunnels - work with source code in any location by opening folders on a remote machine/VM using a VS Code Tunnel (rather than SSH)
      • WSL (tutorial) ← get a Linux-powered development experience from the comfort of Windows by opening any folder in the Windows Subsystem for Linux
    • Remote Explorer ← view remote machines for SSH and tunnels
  • 🗄 SQL