Install and configure Visual Studio Code

Install Visual Studio Code

See https://code.visualstudio.com/docs/setup/mac

Configure Visual Studio Code

Start Visual Studio Code from the command line

I think this is the most important setting. If anything, this should be enabled.

  • Start Visual Studio Code
  • Open the Command Palette
    • On Mac
      • press Shift, Command, P
    • On Windows
      • press Shift, Control, P
  • Type shell command into the search box
  • Select the Shell Command: Install ‘code’ command in PATH from the list
  • Restart the terminal for the change to take effect
  • Type code in the terminal to start Visual Studio Code

Customize Visual Studio Code

The Visual Studio Code configuration settings are stored in a JSON file on your workstation. You can edit the file and after restart the settings take effect, or you can set the values in the user interface one-by-one.

To customize Visual Studio Code by editing the settings file

Open the settings.json file. The double quotes are important, as both paths contain spaces.

On Mac: “$HOME/Library/Application Support/Code/User/settings.json”

On Windows: “%APPDATA%\Code\User\settings.json”

My current configuration settings file looks like this:

{
    "editor.acceptSuggestionOnEnter": "off",
    "workbench.colorTheme": "Solarized Light",
    "files.insertFinalNewline": true,
    "workbench.startupEditor": "newUntitledFile",
    "editor.renderWhitespace": "none",
    "editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",
    "go.formatTool": "goimports",
    "go.useLanguageServer": true,
    "workbench.colorCustomizations" : {
        "activityBar.activeBackground":"#95968888"
    },
    "editor.tabSize": 2,
    "mssql.connections": [
        {
            "server": "{{put-server-name-here}}",
            "database": "{{put-database-name-here}}",
            "user": "{{put-username-here}}",
            "password": ""
        }
    ],
    "workbench.editorAssociations": {
        "*.ipynb": "jupyter-notebook"
    },
    "notebook.cellToolbarLocation": {
        "default": "right",
        "jupyter-notebook": "left"
    },
    "redhat.telemetry.enabled": false,
    "editor.minimap.enabled": false,
    "go.toolsManagement.autoUpdate": true,
    "search.exclude": {
        "**/.terraform": true
    },
    "[yml]": {
        "editor.insertSpaces": true,
        "editor.tabSize": 2,
        "editor.autoIndent": "advanced"
        },
    "[yaml]": {
        "editor.insertSpaces": true,
        "editor.tabSize": 2,
        "editor.autoIndent": "advanced"
        }
}

To customize Visual Studio Code using the UI

  • Open the settings page with Command-, (comma)

or

  • Start Visual Studio Code
  • Open Preferences -> Settings

Only tab should accept the suggestion

To force Visual Studio Code to only insert the suggested word with the Tab key, and configure the Enter key to always insert a new line

  • On the settings tab search for tab
  • Set the Editor: Accept Suggestion On Enter to off

Adds “editor.acceptSuggestionOnEnter”: “off” to the setting.json file

Add trailing newline to every file
  • On the settings tab search for insert final newline
  • Check the Insert Final Newline checkbox

Adds “files.insertFinalNewline”: true, to the settings.json file

Select text with hyphen with double click

To select the entire textwithhyphen with double click

  • On the settings tab search for editor.wordSeparators
  • Delete (hyphen) from the separator characters

Adds “editor.wordSeparators”: “`~!@#$%^&*()=+[{]}\\|;:’\”,.<>/?” to the settings.json file.

Exclude libraries from search

When we search the source code it can take along time for Visual Studio Code to search through the libraries that only support our application. Exclude the known library folders. Most of them are already included, add the .terraform folder to the list.

  • On the settings tab search for search.exclude and click the Add Pattern button
  • Enter **/.terraform into the field and click the OK button

Adds

"search.exclude": {
        "**/.terraform": true
    }

to the settings.json file.

Insert 2 spaces into the .yml and .yaml files when we press the tab key, use tabs in Makefile

  • Open the extensions page with Shift-Command-X
  • Install the EditorConfig for VS Code plugin
  • Save this .editorconfig file in the root of your project files above all projects ( for example in the ~/Git directory)
[Makefile]
indent_style = tab

[*.yml]
indent_style = space
indent_size = 2
  • Restart Visual Studio Code

Another setting for yml files, (maybe not necessary if the EditorConfig plugin is installed)

  1. Start Visual Studio Code
  2. Open the Settings page with Command-,
  3. Enter yml into the search field and press enter, and click the Edit settings for yaml link
  4. Enter into the settings.json file
    ,
    "[yml]": {
    "editor.insertSpaces": true,
    "editor.tabSize": 2,
    "editor.autoIndent": false
    },
    "[yaml]": {
    "editor.insertSpaces": true,
    "editor.tabSize": 2,
    "editor.autoIndent": false
    }

     

Upgrade Bash on macOS

To be able to debug Bash scripts in Visual Studio Code on macOS, we need to upgrade Bash to at least version 4.0. Even the most modern macOS installs, a more than 15 year old, Bash version 3.2.57 from 2007!!!

bash –version

GNU bash, version 3.2.57(1)-release (x86_64-apple-darwin18)
Copyright (C) 2007 Free Software Foundation, Inc.

To upgrade Bash to the latest version follow the instructions by Daniel Weibel at https://itnext.io/upgrading-bash-on-macos-7138bd1066ba

IMPORTANT!!!
If you use iTerm (zshell) keep /bin/zsh as the last item in the /etc/shells file to make it the default shell when you open iTerm.

...
/usr/local/bin/bash
/bin/zsh

Useful extensions

  • EditorConfig for VS Code
  • GitLens — Git supercharged
  • Go ms-vscode.go
  • Terraform mauve.terraform
  • Bash Debug rogalmic.bash-debug

Leave a comment

Your email address will not be published. Required fields are marked *