VSCode

Prerequisites

Fonts should be installed as described in Essentials section.

Install

brew install --cask --appdir=~/Applications visual-studio-code

Plugins

Useful extensions:

• Code Spell Checker

• Git

  • GitLens

  • GitHub Pull Requests and Issues

  • GitHub Theme - Choose either Light & Dark themes

• Highlight Matching Tag

• EditorConfig for VS Code

• Material Icon Theme

• Code formatter

  • Prettier

• Markdown All in One

• GitHub Copilot

  • Getting Started with GitHub Copilot in Visual Studio Code

• Drawing

• excalidraw Editor

• Draw.io Integration

• Internationalization and localization (i18n)

  • inlang – i18n

• Monorepo

  • Monorepo Workspace helps to pick Workspaces To Focus On

• ESLint

List VS Code extension:

code --list-extensions | xargs -L 1 echo code --install-extension

installing plugins via command line

code --install-extension GraphQL.vscode-graphql

Customizations

VSCode Settings. Use settings from .vscode for new project.

Fonts

Assume you installed MesloLGM Nerd Font Mon font[font-meslo-lg-nerd-font] from essentials guide. In your project's .vscode/settings.json file, set fontFamily for editor and terminal as shown below.

////////// Editor //////////
"editor.fontFamily": " SourceCodePro-Regular, FiraCode-Retina, Menlo",
"editor.fontLigatures": true,
////////// Terminal //////////
"terminal.integrated.fontFamily": "MesloLGM Nerd Font Mono",

Tips

General key bindings

Key	Command
option + shift + F	Format

Markdown key bindings

Key	Command
Ctrl/Cmd + B	Toggle bold
Ctrl/Cmd + I	Toggle italic
Ctrl/Cmd + Shift + ]	Toggle heading (uplevel)
Ctrl/Cmd + Shift + [	Toggle heading (downlevel)
Opt + C	Check/Uncheck task list item
Ctrl/Cmd + Shift + V	Toggle preview

References

• VS code setup for Svelte