Caleb Porzio

My VS Code Setup

Dec 2017

Important Note:

This post is an out-dated representation of my setup. I’ve since gone DEEP into the world of customizing VS Code and honing my workflow. You can find it all here

I’m using VS Code as my primary editor these days and am really digging it. My setup is by no means perfect, but I've made lots of little tweaks along the way that you may benefit from.

I've set up these nifty categories, so feel free to jump around and try stuff out as you go, or come back later and use it as a reference.

Table of Contents

My extensions

Must-have settings

Can’t live without these bad boys:

IntelliSense

The only IntelliSense plugin I’ve gotten to work well is PHP Intelephense. One thing that’s whacky out of the box: it puts a leading backslash after auto-complete. Disable this stat.

"intelephense.completionProvider.backslashPrefix": false

"php.suggest.basic": false

array_map duplicate

Trim stuff on save

"files.trimTrailingWhitespace": true,
"files.trimFinalNewlines": true

HTML autocomplete in .blade and .vue files

Note: it appears VS Code does this out of the box now, but I'm keeping it here for other files you might run into.

"emmet.includeLanguages": {
"blade.php": "html",
"vue": "html"
}

Syntax highlighting in non-php files

"files.associations": {
    ".php_cs": "php",
    ".php_cs.dist": "php",
    "*.php": "php" // this is super important, otherwise intelephense will not auto-index your project.
}

Sensible multi-cursor trigger

By default, Code ships with alt as the multi-cursor modifier. This is not ok, turn it back to Cmd before someone sees you.

"editor.multiCursorModifier": "ctrlCmd"

Exclude from search

Note: search.exclude also instructs PHP Intelephense on what to index, so if your indexing takes too long this is the place to slim down what get’s indexed.

Note: Code’s implementation of glob patterns doesn’t offer a negative match, so if you want to exclude everything in a folder except a specific file/folder, you have to do this ridiculousness shown below.

"search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,

    // Hide everything in /public, except "index.php"
    "**/public/[abcdefghjklmnopqrstuvwxyz]*": true,
    "**/public/i[abcdefghijklmopqrstuvwxyz]*": true,

    // Hide everything in /vendor, except "laravel" folder.
    "**/vendor/[abcdefghijkmnopqrstuvwxyz]*": true,
    "**/vendor/l[bcdefghijklmnopqrstuvwxyz]*": true,

    "storage/framework/views": true
}

The Zen life

For the minimalist developer:

Better terminal toggling

Code’s built-in terminal is so useful, but it takes up valuable space in your editor. By default, you can focus and hide it with this shortcut key: cmd+[backtick]. That key hurts my wrist, so I use cmd+t instead.

Note: Code’s default implementation of toggling the terminal is silly. If the editor has focus, you will have to first hide, then show the terminal to get it to focus. Below is a keybinding hack you can use to make it sensible again:

{
    "key": "cmd+t",
    "command": "workbench.action.terminal.toggleTerminal"
},
{
    "key": "cmd+t",
    "command": "workbench.action.terminal.focus",
    "when": "!terminalFocus"
}

Better Zen mode

I really like Zen mode (easy way to hide everything on the screen except your code). It’s like my panic button for in-editor clutter. Unfortunately, by default, it makes the editor full-screen (the bulky, workspace way on a mac).

"zenMode.fullScreen": false

Hide all the panels and junk

"workbench.editor.showTabs": false,
"editor.minimap.enabled": false,
"editor.codeLens": false,
"workbench.activityBar.visible": false

Before

After

Clean up the code editor

VS Code comes stock with all sorts of visual noise surrounding the code editing experience. Coming from sublime, this was way too cluttered for my taste.

"workbench.startupEditor": "none",
"editor.renderControlCharacters": false,
"editor.renderIndentGuides": false,
"editor.renderLineHighlight": "none",
"editor.matchBrackets": false,
"editor.lineNumbers": "off"

Before

After

Hiding the title bar

This is the one part of VS Code’s interface you can’t hide. Therefore, I had to resort to a “Custom CSS & JS” plugin that would allow me to inject CSS that hides this bar on load.

You can find and install the plugin here.

I created a css file ~/.vscode/hide-top-bar.css and pointed to it in my settings:

hide-title-bar.css

.editor .content .container .title {
    display: none !important;
}

VS Code settings

"vscode_custom_css.imports": [
    "file:///Users/calebporzio/.vscode/hide-title-bar.css"
]

Before

After

Note: When you hide this bar you lose visibility into whether the file is dirty or not (that little white dot when a file is unsaved). You also lose the full path to the current file, which I like. Fortunately, VS Code provides settings to manually set what shows up in the top bar of the window.

"window.title": "${activeEditorMedium}${separator}${rootName} ${dirty}"

Cleaning up the sidebar file explorer

"explorer.openEditors.visible": 0

Before

After

My look

No, my editor didn’t wake up looking this good…

Theme

I’ve been a fan of Material Theme for a long time, but just recently got turned on to Wes Bos’s Cobalt2 Theme Official. For bonus points you can use the VS Code icon someone made for it here.

"workbench.colorTheme": "Cobalt2",

Stock Theme

Cobalt2

Right sidebar

If you're the “Zen” type, you probably toggle your sidebar all the time; pushing your code around every time. Do yourself a favor and embrace the stability of the right sidebar!

"workbench.sideBar.location": "right"

Before

After

Typography

"workbench.fontAliasing": "antialiased",
"editor.renderWhitespace": "all",
"editor.fontSize": 18,
"editor.lineHeight": 40,
"editor.letterSpacing": 0,
"editor.fontFamily": "Fira Code",
"editor.suggestFontSize": 16,
"editor.suggestLineHeight": 28,

Before

After

Terminal look

VS Code automatically uses your default shell. In my case, it recognizes Zsh and uses my Zsh theme. Most of the look is already taken care of, but here are some settings that aren’t.

"terminal.integrated.fontSize": 15,
"terminal.integrated.lineHeight": 1.5,
"terminal.integrated.cursorBlinking": false,
"terminal.integrated.cursorStyle": "line"

Font Ligatures

If you dig ligs, you're in luck! VS Code allows you to enable them in your settings:

"editor.fontLigatures": true

I’m a fan of ligatures, but not a fan of the weirdness that comes when you're trying to put your cursor inside them, especially on common ones like ->. Do yourself a favor, and install this extension: Disable Ligatures

"disableLigatures.mode": "Cursor"

The little things

// When I accidentally hit copy without selecting anything and it overrides my clipboard - ugh.
"editor.emptySelectionClipboard": false,

// I removed the hyphen "-" from this list for better multi-cursor navigation.
// @freekmurze suggested I remove "$" too for php variables - brilliant!
"editor.wordSeparators": "`~!@#%^&*()=+[{]}\\|;:'\",.<>/?",

// Give it to me as fast as you have it.
"editor.quickSuggestionsDelay": 0,

// In sublime I got used to almost exclusively using "cmd+shift+v" (format on paste) - now it will do it by default!
"editor.formatOnPaste": true,

// Show me whitespace in diffs, just in case some slips through, shows up in the GitHub PR, and I look like a dummy.
"diffEditor.ignoreTrimWhitespace": false

Useful keybindings

Switching terminal tabs

I’m used to the “switch tabs” shortcut keys (alt+cmd+[left/right]) in iTerm and Google Chrome, here’s the keybindings to bring this to VS Code’s terminal when using multiple terminals.

{
    "key": "alt+cmd+right",
    "command": "workbench.action.terminal.focusNext",
    "when": "terminalFocus"
},
{
    "key": "alt+cmd+left",
    "command": "workbench.action.terminal.focusPrevious",
    "when": "terminalFocus"
}

Zen mode

I use this keybinding all the time. When things get too cluttered I panic and hit cmd+k+k.

{
    "key": "cmd+k cmd+k",
    "command": "workbench.action.toggleZenMode"
}

Quickly access sidebar panels

Because I hide the activity bar (the sidebar with icons to open file explorer, version control, etc..), I need sensible shortcuts to open those panels. Here are the ones I use to quickly access them.

{
    "key": "cmd+k cmd+m",
    "command": "workbench.view.scm"
},
{
    "key": "cmd+k cmd+e",
    "command": "workbench.view.explorer"
},
{
    "key": "cmd+k cmd+d",
    "command": "workbench.view.debug"
},
{
    "key": "cmd+k cmd+x",
    "command": "workbench.extensions.action.showInstalledExtensions"
}

Note: cmd+b is the stock shortcut to hide the sidebar. (cmd+k+b with Sublime keybindings)

Bring focus back to the editor

If I’m in a sidebar or terminal, It’s a small annoyance to have to click the editor to get back into editing mode. This shortcut provides an easy way to focus the editor from anywhere in VS Code.

{
    "key": "cmd+e cmd+e",
    "command": "workbench.action.focusActiveEditorGroup"
}

VS Code is an awesome editor and can adapt to PHP development pretty easily. I hope you found some fun things to try out on your own setup.

Have fun coding!

My Newsletter

I send out an email every so often about cool stuff I'm working on or launching. If you dig, go ahead and sign up!