Visual Studio Code

The open source Visual Studio Code cross platform code editor from Microsoft has grown to become the most popular since its release in 2015. Visual Studio Code is highly customizable, has a vast extension library, Git integration, contextual theme support, a built in terminal and debugging to name a few of the many available features.

Extensions

Here is a list of some of my favorite VS Code Extensions

Here is a list of some of my favorite VS Code Color Theme Extensions

Tips

‘code’ command in PATH

OS X

Open the Command Palette, e.g., ⌘ command+Shift+p and type shell command to find the Shell Command.

If this is not a new install, select Shell Command: Uninstall ‘code’ command in PATH first.

Then select Shell Command: Install ‘code’ command in PATH.

After executing the command, restart the terminal for the new $PATH value to take effect.

When installing VS Code in OS X, make sure you drag the Visual Studio Code app into the Applications folder. Otherwise, you’ll have to go through this process again after a reboot.

Change Text Case

Select the text you want to transform.

Open the Command Palette, e.g.,

Ctrl+Shift+p

⌘ command+Shift+p

Start typing >transform and select the desired transform, press enter.

Visual Studio Code Command Palette - Transform
VS Code Command Palette - Transform Selected Text Case

It’s possible to configure keybindings for these commands using File › Preferences › Keyboard Shortcuts

Tabs or Spaces

To replace tabs with spaces and vice-versa, at the right side of the status bar on the bottom, select either Tabs or Spaces. Then choose the indentation to use or convert from the command palette.

User Settings

The VS Code terminal can be customized to use the shell of your choice. For example,

    "terminal.integrated.shell.windows": "C:\\Windows\\System32\\bash.exe",
    "terminal.integrated.shellArgs.windows": ["-c", "zsh"]

VS Code user preferences - for example, change the default, "workbench.editor.enablePreview": true - When this is set to true, a subsequent file open will close the previous file if it has not been double clicked or edited. Set it to false if you want to keep the files open.

settings.json
// Place your settings in this file to overwrite the default settings
{
    "editor.renderWhitespace": "all",
    "editor.fontFamily": "Fira Code Retina Medium",
    "editor.fontLigatures": true,
    "editor.fontSize": 13,
    "editor.lineHeight": 22,
    "editor.minimap.enabled": false,

    // Configure glob patterns for excluding files and folders.
    // "files.exclude": {
    //   "**/node_modules": true
    // },

    "files.trimTrailingWhitespace": true,

    // "git.enabled": false,

    "gitlens.advanced.messages": {
        "suppressShowKeyBindingsNotice": true
    },

    "vsicons.projectDetection.disableDetect": true,

    "window.zoomLevel": 0,

    "workbench.editor.enablePreview": false,

    "workbench.iconTheme": "vscode-icons",
    // "workbench.iconTheme": "vs-seti",

    "workbench.activityBar.visible": true,
    "workbench.sideBar.location": "left",

    //// Command Prompt
    // "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe"
    //// PowerShell
    //"terminal.integrated.shell.windows": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe"
    //// Git Bash
    // "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe"
    //// Bash on Ubuntu (on Windows)
    "terminal.integrated.shell.windows": "C:\\Windows\\System32\\bash.exe",
    "terminal.integrated.shellArgs.windows": ["-c", "zsh"]
    //// Cygwin
    // "terminal.integrated.shell.windows": "C:\\Cygwin\\bin\\bash.exe",
    //// Cygwin ZSH
    // "terminal.integrated.shell.windows": "C:\\Cygwin\\bin\\zsh.exe",
    // "terminal.integrated.shellArgs.windows": [
    //  "-lic",
    //  "cd $OLDPWD; exec bash"
    // ],
}

Workspace Settings

You can also create specific settings for a saved workspace. e.g.,

doc.code-workspace
{
    "folders": [
        {
            "path": "doc"
        }
    ],
    "settings": {
        "workbench.colorTheme": "Solarized Light"
    }
}

Docker

Developing inside a Container with the Remote-Containers extension.

PHP Debug

The vscode-php-debug extension works better than any free PHP debugging solution I have tried, such as Eclipse, Netbeans or SublimeTextXdebug. In order to use the debugger, the Xdebug PHP extension will need to be installed for your version of PHP. Here are some Xdebug installation resources:

Remote debugging with xdebug - As noted in the Remote Host Debugging section, To make VS Code map the files on the server to the local machine, add the pathMappings in the project .vscode/launch.json file. For example,

launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9000,
            "log": true,
            "pathMappings": {
                "/var/www/html": "${workspaceRoot}"
            }
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000
        }
    ]
}

Java

With these extensions, it is possible to use Visual Studio Code for Java Development instead of Eclipse or NetBeans.

Java Extension Pack

Resources

Java Web App with Maven