Notes on installing Visual Studio Code

I love using Visual Studio Code on Windows as it is very flexible and runs almost anywhere. It is usually the first editor I install on a new machine. Let's script those plugin installs, so we can roll them out to new machines.

To import the settings, you'll need PowerShell 7.

Installation

Let's install Visual Studio Code and JQ using Chocolatey. JQ will be used to edit settings after the installation.

choco install vscode jq

Listing installation instructions

Let's create a list with installation instructions for extensions from a machine that has Visual Studio Code installed:

code --list-extensions `
| ForEach-Object { echo "code --install-extension $_" }

My arbitrary list of installed extensions

I use my blog as notes to my future self. When I get a new machine, I usually install the following extension into my Visual Studio Code:

& {
  # Prettier helps with formatting HTML, CSS, JS and TS
  code --install-extension esbenp.prettier-vscode

  # GitHub Copilot helps with coding
  code --install-extension github.copilot
  code --install-extension github.copilot-chat

  # Support for .NET / C#
  code --install-extension ms-dotnettools.csdevkit
  code --install-extension ms-dotnettools.csharp
  code --install-extension ms-dotnettools.vscode-dotnet-runtime

  # Support for Python and Jupyter notebooks
  code --install-extension ms-python.debugpy
  code --install-extension ms-python.python
  code --install-extension ms-python.vscode-pylance
  code --install-extension ms-toolsai.jupyter
  code --install-extension ms-toolsai.jupyter-keymap
  code --install-extension ms-toolsai.jupyter-renderers
  code --install-extension ms-toolsai.vscode-jupyter-cell-tags
  code --install-extension ms-toolsai.vscode-jupyter-slideshow

  # Support for Docker, WSL and dev containers.
  code --install-extension ms-azuretools.vscode-docker
  code --install-extension ms-vscode-remote.remote-containers
  code --install-extension ms-vscode-remote.remote-wsl
  code --install-extension ms-vscode.powershell

  ## Better node.js
  code --install-extension herrmannplatz.npm-dependency-links
  code --install-extension nsoult.typescript-imports-sort
  code --install-extension mrkou47.npmignore
  code --install-extension orta.vscode-jest

  # Live share - code together
  code --install-extension ms-vsliveshare.vsliveshare

  # Tools that help to improve the interface
  ## Git: who did what!?
  code --install-extension waderyan.gitblame 
  ## Better icons == better overview of what's going on
  code --install-extension vscode-icons-team.vscode-icons
  ## Spell checking
  code --install-extension streetsidesoftware.code-spell-checker
  ## Highlighting of TODO's
  code --install-extension jgclark.vscode-todo-highlight

  # File formats
  ## CSV - make those fields stand out!
  code --install-extension mechatroner.rainbow-csv
  ## .env support
  code --install-extension mikestead.dotenv
  ## cady file support
  code --install-extension matthewpi.caddyfile-support
  ## Proper XML viewing
  code --install-extension redhat.vscode-xml
  ## Terraform
  code --install-extension bmewburn.vscode-intelephense-client
  ## .editorconfig:
  code --install-extension editorconfig.editorconfig
  ## shell development
  code --install-extension foxundermoon.shell-format
  code --install-extension timonwong.shellcheck
  ## Powershell
  ms-vscode.powershell
  ## YML/YAML support
  code --install-extension redhat.vscode-yaml
  ## NGINX
  code --install-extension william-voyek.vscode-ngin
  ## Mermaid support in Markdown
  code --install-extension bierner.markdown-mermaid
}

Let's set some settings

Having all those extensions is one thing, but we need some configuration to make them work. This section will use jq to edit the user settings.

&{
    # Check for PowerShell version 7 or higher
    if ($PSVersionTable.PSVersion.Major -lt 7) {
        Write-Host "This script requires PowerShell 7 or higher. Exiting..."
        return
    }

    $settingsPath = "$env:APPDATA\Code\User\settings.json"
    $backupPath = "$settingsPath.bak"

    # Check if settings file exists, if not, create an empty JSON file
    if (-not (Test-Path -Path $settingsPath)) {
        Set-Content -Path $settingsPath -Value '{}' -Encoding UTF8
        Write-Host "Created empty settings file at $settingsPath"
    } elseif (-not (Test-Path -Path $backupPath)) {
        # Create a backup if it doesn't already exist
        Copy-Item -Path $settingsPath -Destination $backupPath
        Write-Host "Backup created at $backupPath"
    } else {
        Write-Host "Backup already exists at $backupPath"
    }

    # List of jq commands for updating settings with correct JSON syntax
    $jqCommands = @(
        '.["diffEditor.ignoreTrimWhitespace"] = false',
        '.["diffEditor.renderSideBySide"] = true',
        '.["dotnetAcquisitionExtension.enableTelemetry"] = false',
        '.["editor.formatOnType"] = true',
        '.["editor.renderWhitespace"] = "all"',
        '.["files.dialog.defaultPath"] = "c:\\projects\\"',
        '.["git.autofetch"] = true',
        '.["git.enableCommitSigning"] = true',
        '.["git.openRepositoryInParentFolders"] = "never"',
        '.["javascript.updateImportsOnFileMove.enabled"] = "always"',
        '.["telemetry.telemetryLevel"] = "off"',
        '.["typescript.updateImportsOnFileMove.enabled"] = "always"',
        '.["vsicons.dontShowNewVersionMessage"] = "true"',
        '.["workbench.iconTheme"] = "vscode-icons"',
        '.["[typescript]"] += {"editor.defaultFormatter": "esbenp.prettier-vscode"}',
        '.["[javascript]"] += {"editor.defaultFormatter": "esbenp.prettier-vscode"}',
        '.["[json]"] += {"editor.defaultFormatter": "esbenp.prettier-vscode"}',
        '.["[html]"] += {"editor.defaultFormatter": "esbenp.prettier-vscode"}',
        '.["[css]"] += {"editor.defaultFormatter": "esbenp.prettier-vscode"}',
        '.["[scss]"] += {"editor.defaultFormatter": "esbenp.prettier-vscode"}'
    )

    # Apply each jq command to progressively edit the settings file
    foreach ($command in $jqCommands) {
        (Get-Content -Raw -Path $settingsPath | jq $command) | Set-Content -Path $settingsPath
    }

    # Finally sort the settings file by keys
    (Get-Content -Raw -Path $settingsPath | jq --sort-keys '.') | Set-Content -Path $settingsPath

    Write-Host "Finished updating settings."
}

Enjoy!

Changelog

• 2024-11-13 Added settings for typescript.updateImportsOnFileMove.enabled, editor.formatOnType, diffEditor.ignoreTrimWhitespace and diffEditor.renderSideBySide.
• 2024-11-08 Added settings for files.dialog.defaultPath, git.autofetch and vsicons.dontShowNewVersionMessage.
• 2024-10-30 Added check of version of PowerShell. The script has problems on PowerShell 5 and runs on PowerShell 7.
• 2024-10-06 Initial article.