Visual Studio Code

Table of Contents

Installation

  1. https://wiki.archlinux.org/title/Visual_Studio_Code
  2. https://github.com/VSCodium/vscodium
  3. https://aur.archlinux.org/packages/vscodium-bin 
    paru -S vscodium-bin

Basic editing tips

  1. https://code.visualstudio.com/docs/editor/codebasics

Multiple cursors

  1. Alt + Click
  2. https://code.visualstudio.com/docs/editor/codebasics#_multiple-selections-multicursor

To compare a file with any branch

There seems to be a built-in option in version 1.94.2:

  1. open Source Control left-hand sidebar;
  2. select Source Control section;
  3. right-click the file in Changes panel;
  4. pick Open Changes with > Open Changes with Branch or Tag.

Themes

  1. Darkula IntelliJ Theme
    1. https://marketplace.visualstudio.com/items?itemName=trinm1709.dracula-theme-from-intellij
  2. JetBrains Dark Theme
    1. https://github.com/mobalti/jetbrains-dark-theme
  3. GitHub Theme (nice theme that applies to file menu on the left)
  4. light theme (I like to use it in daylight)
    1. https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme
    2. https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onelight
    3. https://github.com/tonsky/vscode-theme-alabaster
    4. https://github.com/mrworkman/papercolor-vscode-redux
    5. https://marketplace.visualstudio.com/items?itemName=miguelsolorio.min-theme
    6. https://marketplace.visualstudio.com/items?itemName=thenikso.github-plus-theme
    7. https://marketplace.visualstudio.com/items?itemName=dericcain.feather
    8. https://marketplace.visualstudio.com/items?itemName=uloco.theme-bluloco-light
    9. https://marketplace.visualstudio.com/items?itemName=lkytal.FlatUI
    10. https://marketplace.visualstudio.com/itemdetails?itemName=sdras.night-owl

Plugins:

  1. Java
    1. Mavan for java
    2. Project Manager for Java
    3. Debugger for Java
    4. Test Runner for Java
    5. Language Support for Java by Red Hat
  2. Go
  3. JavaScript and Web Development: IDE extensions for Web Development
  4. rust-analyzer
  5. haskell-linter
  6. Haskell Syatax Highlighting
  7. Open in Vim (if working with Vim is not possible)
  8. Vim emulation for Visual Studio Code
  9. Markdown preview (Eclipse markdown editor and ghostwriter are alternatives)
  10. GitLens - In addition to other functionality, GitLens enables the local repo to be compared with other branches in the remote repo. E.g. the local feature branch can be compared with the remote main.
    1. Update settings:
    2. To eliminate verbose (and copious) messages, turn off “Current Line Blame” “Git Code Lens” and “Hovers”
    3. To add GitLens icon to the left hand navigation panel, select “GITLENS LAYOUT”
    4. To compare local repo with any branch, select GitLens icon → SEARCH & COMPARE → Compare
    5. To compare a file with any branch, right click in file and select Open Changes / Open Changes with Branch or Tag…
  11. Jest Runner - Allows a single jest test to be run from editor

Customizations

Different theme per window

Setting a theme per workbench

https://stackoverflow.com/questions/52514491/different-theme-per-window-in-visual-studio-code

Is it possible to open 2 Visual Studio Code sessions with different themes? Maybe like this:

  1. Window 1: light theme → backend application
  2. Window 2: dark theme → frontend application

You can have a different theme per workspace/folder by adjusting the workbench.colorTheme in the workspace settings.

  1. Open a new VSCode window.
  2. Open the project folder where you would like to have a different color theme.
  3. Navigate to File > Preferences > Settings.
  4. Select the “Workspace Settings” tab at the top of the settings screen. Anything you edit in here will now be specific to this workspace.
  5. Search for “colorTheme” and select the color theme you would like for this specific workspace.

Using extensions

  1. Peacock
    1. It doesn’t change the color of the entire workspace but it shows a different color for the navigation bar on the left to identify different workspaces based on color. I haven’t used it extensively.
    2. https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock
    3. https://github.com/johnpapa/vscode-peacock

To remove the sideview bar (called the minimap)

Set "editor.minimap.enabled": false in your user or workspace settings.

Use the settings.json file

Copy the contents of the settings file from here and paste it in your settings file: https://github.com/explorer436/Dotfiles2/tree/main/.config/Code%20-%20OSS/User Depending on your platform, the user settings file is located here:

  1. Windows %APPDATA%\Code\User\settings.json
  2. macOS $HOME/Library/Application\ Support/Code/User/settings.json
  3. Linux $HOME/.config/Code/User/settings.json

How can you see the Visual Studio Code extension list?

Look here:

Windows %USERPROFILE%\.vscode\extensions
Mac ~/.vscode/extensions
Linux ~/.vscode/extensions

How to install OSS code (the open source version of Visual Studio Code) in Fedora?

RHEL, Fedora, and CentOS based distributions#

We currently ship the stable 64-bit VS Code in a yum repository, the following script will install the key and repository:

sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc
sudo sh -c 'echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/vscode.repo'

Then update the package cache and install the package using dnf (Fedora 22 and above):

sudo dnf check-update
sudo dnf install code

Links to this note