My VS Code Setup

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

  • PHP Intelephense - The only good PHP IntelliSense package for Code out there
  • Better PHPUnit - An easy way to run your tests from the editor - written by your’s truly ;)
  • PHP DocBlocker - Does exactly what it’s supposed to do
  • PHP Debug - Unlock the power of step debugging from your editor - if you came from a Sublime workflow, this is a huge level-up. Check out this post by my bud Jose to get up and running: Debugging: Configure VS Code + XDebug + PHPUnit | Tighten
  • Vetur - Basically, this is all I’ve needed to make VS Code work well with VueJs (syntax highlighting for .vue files and probably other stuff I don’t notice but use all the time)
  • Auto Close Tag - It’s kinda crazy that Code doesn’t do this for HTML tags by default, but this does a nice job
  • Cobalt2 Theme Official - Wes Bos’s boss theme based on the classic Cobalt theme but with more modern colors
  • Custom CSS and JS Loader - For those pesky situations where Code doesn’t offer a config option. Be warned, this is hacky
  • Duplicate action - Why you can’t duplicate a file in the file explorer I don’t know… but this does it
  • ESLint - I don’t ES Lint often… but when I do…
  • htmltagwrap - Allows you to highlight a chunk of code and wrap it in an HTML tag. Super duper useful
  • Settings Sync - A really nice plugin that saves all your Code settings, plugins, and keybindings to your GitHub account (via GitHub Gist) and allows you to easily load them on a new machine
  • Sublime Text Keymap - If you’re coming from Sublime, this is a MUST
  • vscode-icons - A nice little icon set to make your file explorer fancier
  • Disable Ligatures - Allows you to disable ligatures under your cursor and enable/disable specific ligatures (I’m looking at you Elvis operator)
  • Simple PHP CS Fixer - A little extension I wrote because all the other PHP CS Fixer extensions didn’t work right for me. Apparently, mine doesn’t work right for other people so ¯_(ツ)_/¯
  • Vim - Useful for when I decide to use VIM mode only to switch back 4 hours later. (this is a surprisingly frequent occurrence)

Must-have settings

Can’t live without these bad boys:


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



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"



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:


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

VS Code settings

"vscode_custom_css.imports": [



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



My look

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


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


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"




"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,



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!