VS Code

My must have extensions.

General Coding

• Auto Close Tag
• Bookmarks
• CFML (KamasamaK)
• Docker
• ES Lint
• indent-rainbow
• indicator
• Live Server
• Paste JSON as Code
• Prettier
• TSLint
• Vim

AWS Devops

• AWS Toolkit
• CloudFormation
• CloudFormation Linter
• YAML

Windows (only)

• Shell Launcher
• Remote WSL

VS Code Terminal Colors

The color of the terminal embedded into visual studio code can be edited within the setting files.

Open settings an search in the search bar for: Workbench: Color Customisation -> Then click Edit in settings json

settings.json

{
  "terminal.background": "#141414",
  "terminal.foreground": "#bdbdbd",
  "terminalCursor.background": "#e0e0e0",
  "terminalCursor.foreground": "#E0E0E0",
  "terminal.ansiBlack": "#000000",
  "terminal.ansiBlue": "#0370ca",
  "terminal.ansiBrightBlack": "#a3a3a3",
  "terminal.ansiBrightBlue": "#2993f7",
  "terminal.ansiBrightCyan": "#1d91be",
  "terminal.ansiBrightGreen": "#f8af4f",
  "terminal.ansiBrightMagenta": "#cf15fd",
  "terminal.ansiBrightRed": "#FB0120",
  "terminal.ansiBrightWhite": "#e7e6d0",
  "terminal.ansiBrightYellow": "#fdde31",
  "terminal.ansiCyan": "#007979",
  "terminal.ansiGreen": "#83ca27",
  "terminal.ansiMagenta": "#804373",
  "terminal.ansiRed": "#ca192e",
  "terminal.ansiWhite": "#E0E0E0",
  "terminal.ansiYellow": "#ecaf05"
}

Add the following settings for some nice shortcuts for copy and pasting and general niceties when using the inbuilt terminal application.

Note; These properties are not nested like the colors, also the settings GUI allows setting these properties.

{
  "terminal.integrated.copyOnSelection": true,
  "terminal.integrated.cursorStyle": "line",
  "terminal.integrated.cwd": "",
  "terminal.integrated.rightClickBehavior": "paste"
}

VIM in visual studio code.

This links is an excellent resource for working with the VIM extension for Visual Studio Code.

Boost your coding fun with VIM and Visual Studio Code, check out this site!

Barbarian Meets Coding

VIM key bindings for VSCode.

1. Select "Keyboard Shortcuts" under File => Preferences
2. Right-click the "open keyboard shortcuts file.json" icon. (top right)

keybindings.json

// Place your key bindings in this file to override the defaults
[
  // Navigate around vs-code windows using VIM direction keys when holding ctrl
  {
    key: "ctrl+h",
    command: "workbench.action.navigateLeft",
  },
  {
    key: "ctrl+l",
    command: "workbench.action.navigateRight",
  },
  {
    key: "ctrl+k",
    command: "workbench.action.navigateUp",
  },
  {
    key: "ctrl+j",
    command: "workbench.action.navigateDown",
  },
];

VSCode as a GIT Diff Tool

Prerequisite

First, confirm vs code can be started from the terminal with the following command:

code ./myfile.txt

On MAC-OS you can install the code command directly from vscode by pressing Shift + Command + P and searching for "install code".

Setup vim

Open your global git config file and add the following lines.

git config --global -e

[diff]
  tool = vscode
[difftool "vscode"]
  cmd = code --wait --diff $LOCAL $REMOTE
[merge]
  tool = vscode
[mergetool "vscode"]
  cmd = code --wait $MERGED

Note: You can configure multiple diff and merge tools in the config and then set the one to use with the tool=sometool directive. For example, you could add a new section [difftool sometool] then add the required settings, you would then set tool=sometool.