Table of Contents

Why This Book...........................................................................1

How This Book...........................................................................2

Keybinding Reference................................................................3

Better Defaults..........................................................................6

Hide Everything.........................................................................9

The Activity Bar....................................................................................11

The Sidebar...........................................................................................16

The Tabs Bar.........................................................................................21

The Status Bar......................................................................................25

The Mini-map........................................................................................28

The Terminal.........................................................................................30

Master The Panels....................................................................32

The File Explorer...................................................................................33

The Git Panel........................................................................................40

The Find Panel......................................................................................45

The Terminal.........................................................................................53

Editing....................................................................................57

Line Manipulation..................................................................................58

Multi-Cursor..........................................................................................63
 Split Panels...........................................................................................70

HTML.....................................................................................................74

Snippets................................................................................................81

VIM Mode..............................................................................................87

Project Switching.....................................................................90

Prettyness............................................................................... 96

Clearing Line Crap................................................................................97

Typography.........................................................................................100

Themes...............................................................................................104

Fonts...................................................................................................114

Intellisense............................................................................ 118

JavaScript............................................................................................119

PHP.....................................................................................................130

Signing O/............................................................................. 139

Why This Book

Hey there!

I’ll keep this short.

VS Code is my editor of choice because IDEs do too much, and text editors like Sub-
lime Text do too little.

VS Code perfectly occupies the space between them.

Unfortunately, there are three problems with VS Code out of the box:

1. Too many flashy, unnecessary, and distracting bits of UI

2. Not smart enough with languages other than JavaScript
3. A good amount of bad default settings and keybindings

We're going to fix those problems in this book, but we're not going to stop there.

My goal is to leave you with a complete workflow for editing code fast and efficiently
in your every day work.

Rather than just showing you all the things you CAN do in VS Code, my aim is to teach
you the things you SHOULD do in VS Code.

This is book isn't a manual for VS Code, it's a manual for a WORKFLOW in VS Code.

Thank you for coming along on this journey. You won’t be disappointed you had.

All the best,

Caleb

1
How This Book

The two most important files when customizing VS Code are the settings.json and
keybindings.json files.

I’ll be referencing these files in almost every chapter, so to avoid repeating myself,
here’s how to open them:

settings.json

1. Press Ctrl+Shift+P to open the "Command Palette"

2. Search for "Settings" and select "Preferences: Open Settings (JSON)"

keybindings.json

1. Open the command palette (Ctrl+Shift+P)

2. Search for "Keyboard" and select "Preferences: Open Keyboard Shortcuts
(JSON)"

Throughout the book, we will be adding to these two files as we see fit.

The package that included this Ebook also includes finalized versions of these files.
You can reference them as we go, or just copy and paste them straight away. It's up to
you!

2
Keybinding Reference

Below is a list of every single shortcut key we’re going to cover.

These keyboard shortcuts form the basis of our workflow.

Don't skimp on learning these shortcuts. We'll cover them one by one throughout the
book.

These are the only shortcuts (besides obvious things like Ctrl+V for paste) you will
need to memorize. We will cover the logic behind every single one as we go, but feel
free to use this page as an on-going reference throughout the book (and beyond! ).

Essentials

- Ctrl+P Find File

- Ctrl+; Find Project
- Ctrl+Shift+P Command Palette

Window

- Ctrl+W Close File

- Ctrl+K+W Close All Files
- Ctrl+Shift+W Close Window
- Ctrl+Alt+Left Focus Previous Tab
- Ctrl+Alt+Right Focus Next Tab

Panels

- Ctrl+F Find
- Ctrl+Shift+F Global Find
- Ctrl+T Focus/Hide Terminal
- Ctrl+E Editor
- Ctrl+K+E File Explorer

3
 - Ctrl+K+G Git
- Ctrl+K+D Debugger
- Ctrl+K+X Extensions
- Ctrl+K+B Hide Sidebar

Editor Splitting (Editor & Terminal)

- Alt+N Split Panel Vertically

- Alt+W Close Split Panel
- Alt+H Focus Left
- Alt+L Focus Right
- Alt+= Grow
- Alt+- Shrink

Explorer Panel

- Ctrl+N New File

- Ctrl+Shift+N New Folder
- Ctrl+D Duplicate
- Delete Delete
- Ctrl+Enter Open File

Comment

- Ctrl+/ Insert Comment

Indent/Fold

- Ctrl+[ Increase Indent

- Ctrl+] Decrease Indent
- Ctrl+Shift+[ Fold
- Ctrl+Shift+] Expand

Multi-Cursor

- Ctrl+D Select Word

- Ctrl+D Next Occurrence
- Ctrl+K+D Skip Occurrence
4
 - Ctrl+Backspace Reverse Selection
- Ctrl+Right-Arrow Place Cursor At End Of All Lines
- Ctrl+Alt+Up/Down Add extra cursors above or below current cursor

Line Manipulation

- Ctrl+L Duplicate Line

- Ctrl+J Join Lines
- Ctrl+Shift+K Delete Line
- Alt+Up Move Line(s) Up
- Alt+Down Move Line(s) Down

Emmet

- Ctrl+M Ctrl+W Wrap In Tag

- Ctrl+M Ctrl+I Select Tag Inward
- Ctrl+M Ctrl+O Select Tag Outward
- Ctrl+M Ctrl+R Rename Tag
- Ctrl+M Ctrl+M Jump To Matching Tag
- Ctrl+M Ctrl+Backspace Remove Tag

Font Sizing

- Ctrl+K Ctrl+K Toggle Small/Large Font Size

- Ctrl+- Shrink Font Size
- Ctrl+= Expand Font Size

IntelliSense

- Ctrl+R Find Method (Symbol)

- Ctrl+Shift+R Find Global Method (Symbol)
- Ctrl+K Ctrl+Enter GoTo Definition
- Ctrl+K Ctrl+I Import Namespace
- Ctrl+K Ctrl+R Run Test
- Ctrl+K Ctrl+P Run Previous

Extras

5
- Alt+Ctrl+I Toggle DevTools
- Escape Hide Toaster Notifications

6
Better Defaults

Before we learn anything new about VS Code, let's first take care of fixing some bad
defaults it ships with.

Add the following to your settings.json file:

/**

* Better Defaults

**/

"editor.copyWithSyntaxHighlighting": false,

"diffEditor.ignoreTrimWhitespace": false,

"editor.emptySelectionClipboard": false,

"workbench.editor.enablePreview": false,

"window.newWindowDimensions": "inherit",

"editor.multiCursorModifier": "ctrlCmd",

"files.trimTrailingWhitespace": true,

"diffEditor.renderSideBySide": false,

"editor.snippetSuggestions": "top",

"editor.detectIndentation": false,

"window.nativeFullScreen": false,

"files.insertFinalNewline": true,

7
 "files.trimFinalNewlines": true,

These are settings I've learned about over the years that make VS Code behave more
like I would want it to out of the box.

I've tried to leave out opinionated settings (like most everything else in this book) and
just stick to things that I feel are universally "better".

I'm not going to go over every one here. Think of this like the "CSS Reset" of VS Code.

Ok, on to some actual content!

8
Hide Everything

Out of the box, VS Code is full of panels, popovers, and other distractions.

In this section, we are going to dismantle this mess piece by piece and go from some-
thing that looks like this:

To something that looks like this:

9
Along the way we’ll learn some keybindings and useful settings to easily access what
we need, and only when we need it.

10
The Activity Bar

What's the Activity Bar? Well, think of it as a sidebar for your sidebar. Because who
wouldn’t want more sidebars taking up valuable space? amirite?

Let’s kill it.

- Open the “Command Palette” (by pressing Ctrl+Shift+P)

- Search and select “View: Toggle Activity Bar Visibility”

11
Ah, that feels better.

Before we move on, let’s look at what that did to our settings.json file, and make sure
we don’t let that file get too messy. You should see something like this:

Over time, as we configure VS Code, this settings file will get out of hand quickly. To
keep it somewhat organized, we’ll add helpful headings, starting with “Hide Every-
thing“.

As we hide unnecessary things in our editor, we’ll add those settings under this head-
ing.

12
Also, as a reminder, you can always reference the finalized settings.json and key-
bindings.json files in the package that came with this book.

Now that we’ve hidden the activity bar, your next question might be: “But wait, didn’t
we need that bar?”

Great question. The answer is: No. That’s what we have custom keybindings for.

Keybindings

Here are the keyboard shortcuts we will be using instead of the Activity Bar icons:

- Ctrl+K+E (E for Explorer)

- Ctrl+K+G (G for Git)
- Ctrl+K+D (D for Debugger)
- Ctrl+K+X (X for eXtensions)

Unfortunately, these are NOT the keybindings that come out-of-the-box with VS Code.
We will have to configure them ourselves.

Open the keybindings.json file and add the following snippet:

/**

* Panels

13
 **/

"key": "ctrl+k ctrl+e",

"command": "workbench.view.explorer"

},

"key": "ctrl+k ctrl+g",

"command": "workbench.view.scm"

},

"key": "ctrl+k ctrl+d",

"command": "workbench.view.debug"

},

"key": "ctrl+k ctrl+x",

"command":
"workbench.extensions.action.showInstalledExtensions"

},

Now, try these for yourself. While holding the Ctrl key, press K and then G, you should
see the “Git” or “Version Control” panel. Now if you press Ctrl+K+E, you should be
back to the file explorer.

14
I switch between the file explorer and the Git panel most often. I imagine the same will
be true for you.

The logic behind these decisions

First, we are removing the “Activity Bar” to clear up space in the editor. All space is
valuable. Not because you need more room for your code, but because your code
needs to breathe and be the central focus of the editor. Also, the less our fingers leave
the keyboard the better.

Let’s talk about the reasoning behind these shortcut keys. If keyboard shortcuts were a
computer program, Ctrl+ would be the “global scope”. More plainly, because Ctrl+
shortcut keys are the easiest to remember and type, your computer already has a
bunch reserved. Some examples you are likely already familiar with: Ctrl+C, Ctrl+V,
and Ctrl+Q.

As a consequence, if we started adding new Ctrl+ shortcuts, we would quickly run

into collisions, or run out of available letters. Therefore, it’s easier if we have a blank
slate with no reserved keys. A new “scope” or “layer” if you will. Introducing: Ctrl+K

Why K? It’s a convention already established in VS Code for other shortcuts, so we’re
taking a cue from there. It also doesn’t hurt that it’s in a handy location on the key-
board (the home row). As we go, we will be adding more Ctrl+K shortcuts where it
makes sense.

This approach sure beats something like ^+⇧+⌥. Not only do you have to remem-
ber what those symbols mean, but you also have to contort your fingers in impossible
ways to hold them all at once. It’s a hard enough life.

15
The Sidebar

I like to keep the sidebar hidden and only toggle it on as needed.

You may be thinking to yourself: "Wait, I have to show and hide the sidebar every time
I need to open a new file?"

You're right, that'd be a bit much. Hold that thought, we'll get to files in the next chap-
ter.

VS Code’s default keybinding for hiding the sidebar is Ctrl+B.

I personally prefer Ctrl+K+B, to stay consistent with the established namespace.

We can configure that by adding the following snippet to your keybindings.json file,
under the "Panels" section from:

{
16
 "key": "ctrl+k ctrl+b",

"command": "workbench.action.toggleSidebarVisibility",

},

Another common need is temporarily "focusing" the main code editor while keeping
the sidebar shown.

For this, I map Ctrl+E to focus the editor.

Here's the keybinding for that:

"key": "ctrl+e",

"command": "workbench.action.focusActiveEditorGroup",

},

So now, when you open a sidebar panel with something like Ctrl+K Ctrl+G, you can
easily re-focus the editor with Ctrl+E.

While we’re on the topic of the sidebar, here are two pro-tips related to it:

Pro Tip #1: Move the sidebar to the right

This is another big change for you. Your entire coding career, the sidebar has been on
the left.

However, now that you are emphasizing focus over whizbangs and doodads, your
sidebar isn’t always visible.

As a consequence, your code will be pushed to the right every time you toggle the
sidebar.

17
This behavior is jarring, and unacceptable.

Your code is THE most important thing in your editor. Why are you letting it get
pushed around by the sidebar? Have some dignity.

If we move the sidebar to the RIGHT side of the screen, we can toggle it without inter-
ruption. This preference communicates that the sidebar is secondary and our code is
primary.

Add the following snippet to your settings.json file, under the "Hide Everything" Sec-
tion:

"workbench.sideBar.location": "right",

Here's how our settings.json file is shaping up:

Much better.

18
Pro Tip #2: Make the sidebar ridiculously big

As you become more attached to a clean workspace, you will naturally hide the side-
bar when you’re done with it. It will feel good to you.

Right now you haven’t developed this habit yet, so you’ll constantly forget, leaving the
sidebar visible most of the time.

I believe in changing your environment to change your behavior, so here’s a brief

anecdote from when I was a wee-lad:

In high school, I wanted dearly to get better at typing without looking at the keyboard.
Over and over I failed using will power alone, so I scribbled on all the keys with a
Sharpie marker. After a week or two I was typing just as fast as I was before, but now
without looking at the keyboard at all! (Look Mom, no eyes!)

The “Sharpie marker” of our habit will be a GIANT sidebar. A sidebar so big you will
be forced to hide it when you’re not using it.

This might seem silly to you, but if it’s the habit you’re after, it would be silly NOT to.

19
20
The Tabs Bar

Now let’s remove the open-file tabs at the top of your editor.

I know what you’re thinking. Don’t we need those? To that I say: You’d be surprised
how much you DON’T need them.

Your current habits

Think for a second about how you open a new file in VS Code. Do you use Ctrl+P to
fuzzy search for the file? Or maybe you click on the file in the sidebar (like an animal
" ).

21
Now that you have the file open, how do you go back to the previous file you had
open? Maybe you dig through all your open tabs?

And while you’re digging, you realize there are too many tabs open and the tab you
want is buried off the screen?

It’s time for a change.

We will solve all these problems with a single shortcut key: Ctrl+P

Our savior: Ctrl+P

When you press Ctrl+P, a search box opens at the top of VS Code with a list of file-
names below. As you type, VS Code will narrow down the results. When the results are
narrowed and the file you want is highlighted, you press enter. BAM, you’ve got your
file.

We will be using this single pattern for not only opening new files but switching be-
tween them.

Turns out, it’s faster and easier to navigate files this way than using tabs or the File Ex-
plorer panel.

22
Switching to the most recently opened file

One of the most common needs I have is quickly pulling up the last opened file. To do
this press Ctrl+P twice.

If you press Ctrl+P twice again, it will take you to your original file.

To get to the second-last opened file, press Ctrl+P THREE times. And so on…

Killing tabs

We will remove the tabs bar similarly to how we removed the activities panel:

Add the following snippet to your settings.json file:

"workbench.editor.showTabs": false,

Now save this file and watch the tabs bar DISAPPEAR!

23
The reasoning

This tip is probably a big change to your workflow. Most people I pair program with
have tabs open. I talked a little bit before about why hiding the tabs bar is a good de-
cision, but let me spell out the advantages clearly for you:

- “More keyboard, less mouse”: We can now do all our file navigation without
ever leaving the keyboard
- We’ve reduced the visual noise of our browser and freed up more valuable
space
- When too many tabs are open, you feel messy. It feels like having loose pa-
pers on your desk. When you hide the tabs bar, those negative feelings
evaporate into thin air. You should now realize tabs are just a construct that
you can opt-out of.

I know I sound overly passionate about tabs vs Ctrl+P, but trust me, this pattern will
apply to future workflow optimizations.

24
The Status Bar

The status bar is the thin blue bar at the bottom of your editor.

Consider for a moment the times you’ve gotten value out of it.

I only ever use it for the following things:

- Changing the “Language Mode” of a file.

- Viewing the current git branch I'm on
- Changing the "Line Endings" of a file.

Helpful, but not necessary. Because I need these functions so infrequently, it makes
sense to hide the bar and use the command palette instead.

Everything I just mentioned can be accessed with the Command Palette

(Ctrl+Shift+P), or in the case of viewing the current branch, I usually do that in the ter-
minal.
25
Hiding the status bar

Add the following snippet to your settings.json file:

"workbench.statusBar.visible": false,

Mmmm, that feels good. Now our code is full-bleed on the bottom.

Maybe you DO like the status bar #

Because everyone’s needs are different, you may rely on the status bar for things I per-
sonally don't. Or perhaps an extension you use provides crucial info inside it.

If you DO use it a lot, you have my permission $ to keep it visible or you can toggle it
only when you need it from the command palette: Ctrl+Shift+P -> Toggle Status Bar.

Rather than give these types of disclaimers all over the book, I'll just say it once:

26
Do what works for you.

This book is opinionated. Leave out the opinions you don't love. Form your own. None
of this is dogma.

27
The Mini-Map

To me, the mini-map is a novelty. It’s kinda cool looking, but generally useless.

I HAVE heard from some people working in large codebases that they use it some-
what frequently.

To that I say: there are better ways to hop around code. We'll get there later on.

Hide it

Add the following to your settings.json file:

"editor.minimap.enabled": false,

28
Now we’ve freed up more valuable space!

29
The Terminal

VS Code’s integrated terminal is one of the main features that initially drew me to the
editor.

Outside of conveniently accessing a terminal without switching apps, here’s the main
reason I think it’s so great:

TERMINAL SESSIONS ARE ATTACHED TO PROJECTS!!!!!

If you didn’t think this was a big deal before, you certainly did after reading it in all
caps right?

For real though, how many projects do you have to run npm run watch on? And
when you close those projects in your editor, the terminal watcher stays open right?
And after enough time, you end up declaring terminal tab bankruptcy right? Not a
glamorous life % .
30
Say hello to glamour.

Toggling the terminal

Because I toggle the Terminal so often, I believe this operation deserves a place in the
“root keybinding namespace”.

We’ll be using the keybinding: Ctrl+T

Add the following to your keybindings.json file:

"key": "ctrl+t",

"command": "workbench.action.terminal.toggleTerminal"

},

Now, when you’re editing code and you press Ctrl+T, your terminal will open (if it’s al-
ready open, it will focus). When you are inside the terminal and you want to close it,
press… Ctrl+T!

Fortunately, there's really not much more to say about the terminal. It just works!

I have a few other related tips like styling the font, and managing multiple sessions,
but we'll get to those a bit later.

31
Master The Panels

Rather than covering every single panel/widget in VS Code, we'll walk through the im-
portant ones I use ALL THE TIME.

You probably feel like these panels are self-explanatory, but I assure you, there are lots
of little tips and tricks to make your life easier in them.

Let's dig in!

32
The File Explorer

The “File Explorer” panel is an extremely useful feature of any editor.

I keep the file explorer panel hidden most of the time while coding. Ctrl+P generally
gets me far enough. However, when I need to visually browse or manipulate files, I
happily reach for it.

At a glance, the file explorer seems pretty good, and it is. However, with a few tweaks,
we can do much better.

33
Clearing the clutter

VS Code has a few unnecessary widgets in the explorer that we’ll want to remove right
away:

To remove them, right-click on one of their headings and deselect the following to
make them go away:

- Open Editors
- Outline
- Timeline
- NPM Scripts

Ah, much better.

Duplicating files

VS Code cannot duplicate files on its own. Fortunately, there’s a handy extension that
solves the problem perfectly. Once installed, you won’t think about it again.

To install it:
34
 - Open your extensions panel using Ctrl+K+X
- Search “duplicate”
- Find “Duplicate action” and click “Install”

That’s it, now if you right-click on a file in the sidebar, you should see the “Duplicate
file or directory” item listed at the bottom.

Keybindings

The File Explorer is looking pretty good, but I dare you to try to use it without a
mouse. It’s painful.

Because I use Finder on the Mac so much for exploring files, I’ve learned to adopt all
of it’s keyboard shortcuts.

We can leverage those conventions and adopt the keybindings for the File-Explorer in
VS Code. This way we get a bunch of new keybindings without having to learn any-
thing new!

Here are the keyboard shortcuts we will be adopting:

35
 - Ctrl+D for “Duplicate”
- Ctrl+Shift+N for “New Folder”
- Ctrl+N for “New File”
- Delete for “Move To Trash”

To add the missing shortcuts, open up your keybindings.json file and add the follow-
ing snippet:

/**

* File Explorer

**/

"key": "ctrl+d",

"command": "duplicate.execute",

"when": "explorerViewletVisible && filesExplorerFocus

&& !explorerResourceIsRoot && !inputFocus"

},

"key": "ctrl+n",

"command": "explorer.newFile",

"when": "explorerViewletVisible && filesExplorerFocus

&& !inputFocus"

},

"key": "shift+ctrl+n",

36
 "command": "explorer.newFolder",

"when": "explorerViewletVisible && filesExplorerFocus

&& !inputFocus"

},

Notice the “when” conditions on each shortcut.

Because of these conditions, we can use Ctrl+D for “Duplicate” in the file explorer, but
still, use it for “Select next occurrence” (Multi-cursor) in the text editor. We now can fo-
cus on using the most appropriate shortcuts, without worrying about collisions from
other existing ones in the app. This is extremely powerful.

Now that our environment is all set up, let’s look at some common file operations.

Rather than listing out everything the file explorer is capable of, I'll walk through the
things I most commonly use it for.

Common operations

Traversing files

Whether you’re renaming, duplicating, or deleting a file, you need to first be able to
navigate to it.

Often, it’s faster to just use your mouse (this is one of the few allowable use cases for a
mouse). However, it’s useful to know the keyboard shortcuts:

- Up/Down Arrow: Move around the file list

- Right Arrow: Open folder
- Left Arrow: Close folder
- Ctrl+Left Arrow: Close ALL folders

37
Moving files

This is another instance where using the mouse is advantageous. In VS Code, to move
a file from one folder to another, simply drag and drop the file.

This is a fantastic feature other editors like Sublime lack (at least it did the last time I
used it).

Creating a new file

This is the most common action I perform in the file explorer. Occasionally, I open up
the terminal and use the touch command to create a new file, but generally, I do the
following:

- Open the file explorer Ctrl+K+E

- Press Ctrl+N to create a new file
- Type the new filename
- Press Enter
- Close the file explorer Ctrl+K+B

If I need to create the file in a different folder, it’s much faster to right-click on the fold-
er and select "New File”.

Creating a folder

This is the same as creating a file, except instead of Ctrl+N it’s Ctrl+Shift+N.

Deleting a file

To delete a file:

- Select the file

- Press Delete
- Press Enter in the confirmation prompt

38
Adding files from other applications

A nifty feature of VS Code is the ability to drag a file from another app into VS Code’s
sidebar.

I use this often for dragging new image assets into my projects. Whether I down-
loaded the asset from the internet or exported it from Sketch, it’s as simple as drag-
ging and dropping the file into the folder I want.

39
Git Panel

VS Code has a nifty little version control panel you can open by pressing Ctrl+K
Ctrl+G.

There are a few things this panel is GREAT for, and plenty more I would never use it
for.

Here’s my best summary of what I WOULDN’T use this panel for:

Branch Management

If it has to do with branches, I’m not using VS Code for it. Merging, pushing, pulling,
checking out, etc… are all operations I’d rather do straight in the command line. (You
might prefer some Git GUI like Sourcetree or GitHub Desktop)

For me, command-line Git is the “source of truth”. I use it for most major operations.

40
As powerful as Git is on the command line, it sucks at a handful of things. VS Code
makes these experiences much nicer. Let’s see em’.

Committing code

This is THE most common Git operation I perform daily, and VS Code is much better at
it than the command line is.

Here’s how I commit code using the version control panel:

- Open the version control panel Ctrl+K Ctrl+G

- Click on various files to get a beautiful diff of the changes
- Type a message
- Press Ctrl+Enter

If I only want to commit certain “unstaged” files, I click the little “plus” icon on the files I
want to be included in the commit. Too easy.

41
Undo last commit

Here is the entire list of Git operations VS Code offers:

I only ever use ONE from this panel & . And it is GLORIOUS: Undo Last Commit.

A common operation that previously required googling for me, is now a simple click
away. This is extremely useful.

Resolving merge conflicts

When you encounter merge conflicts in your command line (or GUI), you can open
this panel and easily browse the conflicts, edit them inline, and resolve them easily.

42
There are handy links like "Accept Current Change" collocated with the merge diff
which makes it extremely easy to accept or reject changes:

The interface is pretty self-explanatory, but it’s worth noting one operation that is
much easier than its command-line alternative:

Resolving an entire file’s conflicts at once (by choosing which set of changes you want).

Normally, on the command line, I type something like this:

git checkout some/file/that/takes/a/long/time/to/type.js —

ours (or —theirs)

43
In VS Code, I can just select “accept all current/incoming” in the right-click dropdown
of the file I want, and VS Code will remove the conflict. I can now click the “plus” icon
to stage the conflict.

A much nicer experience than using the command line.

44
The Find Panel

There are 2 different types of “finding” you will use in VS Code.

Let’s breeze through the first one: “Find in file”

To find something in a file, press Ctrl+F and search away! This is probably familiar to
you because basically every other app in the world does this.

But what about finding something in your entire project? Say hello to the find all pan-
el!

45
Opening the panel

To open the “find all” panel, press Ctrl+Shift+F. Because like many other keyboard
shortcuts, the more extreme version of the action is the same shortcut with +Shift
added to it.

A quick tip, typically you copy some bit of code, open the find all panel, and then
paste that bit of code into the panel. But VS Code makes this a little easier if you want.

You can highlight the code in the editor, and press Ctrl+Shift+F and it will “seed” your
search with the highlighted code.

Also, if you want to search within a specific folder, you can right-click on that folder in
the explorer panel and select "Find In Folder" to scope your search down to that fold-
er and its subdirectories.

46
Move to bottom

By default, the "Search" panel is housed in the sidebar. This is a terrible place for it.

Every single time I use it I find myself expanding the sidebar extremely wide so I can
read all the search results.

VS Code used to allow you to configure this panel to live alongside the terminal pan-
el, but they removed this config option for some odd reason.

Never fear!

Instead, you can accomplish this same thing by toggling the activity bar, then drag-
ging the magnifying glass icon next to the terminal.

47
Find and replace

VS Code’s “replace” is extremely user-friendly. Expand the “replace” panel by clicking

the arrow at the left of the find panel, type in what you want, and see a preview of
what will be “replaced”.

You can click the little replace icon to cherry-pick and only make single replacements:

48
OR, you can do a “replace all”.

This will automatically save the replacements for you and you’re good to go! You can
also click the little “x” to exempt certain things from the global replace; very handy.

Narrowing down your search

One annoying thing about any global find tool is getting search results from files you
don’t care about.

For me, these are generally things like cache files, vendor/node_modules folders, lock
files, and bundled assets.

By default, VS Code will use .gitignore as a guide for things to hide in the search pan-
el.

49
This is a good default, but it doesn't work perfectly for me.

I like to "source-dive" code I'm working with. For example, I'm often working in the
Laravel PHP framework, so sometimes I want my "Find All" to include source code
from Laravel. However, by default, VS Code hides Laravel code because it lives in
the .gitignored "vendor" directory (the PHP equivalent of node_modules).

So rather than rely on different project's .gitignore files, I instead configure a common
set of search exclusions for all my projects.

This gives me much more power over my search exclusions.

Here's a glimpse of what my "settings.json" configuration looks like and we can talk
about things you may want to keep or change for yourself:

/**

* Find

**/

"search.useIgnoreFiles": false,

"search.exclude": {

// Hide everything in /vendor, except the "laravel" and

"livewire" folder.

"**/vendor/{[^l],?[^ai]}*": true,

// Hide everything in /public, except "index.php"

"**/public/{[^i],?[^n]}*": true,

"**/node_modules": true,

"**/dist": true,

"**/_ide_helper.php": true,

50
 "**/composer.lock": true,

"**/package-lock.json": true,

"storage": true,

".phpunit.result.cache": true

},

First, notice search.useIgnoreFiles.

If your "exclusions" are "additive", meaning you want to exclude everything in .gitig-
nore AND some extra folders, you can leave this out.

I have some fancy exclusions as you noticed that make it so that I need to disable
useIgnoreFiles completely and build an exclusion list from scratch.

Exclude everything in a folder WITH EXCEPTIONS

Unfortunately VS Code doesn't make this easy or pretty, but it IS possible.

Here's what I ultimately want.

When I search for something, I want VS Code to search ONLY the "vendor/laravel" and
"vendor/livewire" folders. I want it to IGNORE every other folder in the "vendor" direc-
tory.

Because these configurations allow Glob patterns, we can kind of hack this outcome
with the following syntax:

"**/vendor/{[^l],?[^ai]}*": true,

What this is telling VS Code is:

Ignore everything in the "vendor" directory EXCEPT folders whose first letter starts
with "l" and second letter starts with either "A" or "I".

51
This is enough for me to effectively ignore everything except "laravel" and "livewire",
because they both satisfy these rules.

I know this is not an easy or sexy setting to wrap your head around, but it really is the
current best way and is extremely useful.

Feel free to play with these settings to suit your own workflow as needed.

52
The Terminal

We’ve already covered toggling the terminal (Alt+T), now let’s talk about using it.

Because you are likely already using a terminal application, we’re not going to cover
how to use a Terminal, we’ll just cover the things that pertain to VS Code in particular.

In reality, there’s only one:

Splitting the terminal

I often need to do more than one thing at a time in the terminal. My most common
need is running some build process with something like npm run watch in one ter-
minal session, and keeping the other free for other tasks.

The way I initially thought to accomplish this was by opening multiple tabs inside the
terminal, but this becomes a hassle. Knowing which ones are open and switching be-
tween them.

I then started “Splitting” the terminal in two vertically so both panels are always shown
and liked this workflow MUCH better.

53
To split the terminal, there is an icon in the top right corner that you can click and be
done with it, but we’re hackers, mouses are for chumps.

Splitting the terminal in my mind should use the same keybindings as splitting an edi-
tor (which we will cover in the next section of the book).

Editor splitting has always been intimidating to me. I’ve looked up the keybindings in
the past, but then I promptly forgot them. It doesn’t help that there are usually num-
bers in the keybindings which makes it even harder for me to remember.

Let’s pretend we’ve never seen the real keybindings for splitting a panel, and see what
we might come up with on our own.

First, let’s list out all the operations we will need to perform with these bindings:

- Split panel vertically

- Focus panel to the right
- Focus panel to the left
- Close Panel

Now, let’s consider some conventions we might use for these operations:

54
 - Ctrl+N is “new file/window” maybe we could use “N” for “new panel”
- Usually focusing something to the right and left uses arrow keys or the Vim
“h” and “l” keys
- Ctrl+W is “Close Window” so maybe we can use “W” to close a panel.

Now that we have an idea of what we want and what conventions exist, I think it’s clear
we want the shortcuts to use: “N”, “H/L”, and “W”. But the question is, what’s the name-
space?

We can’t use Ctrl+K, because “Ctrl+K+W” is already taken.

I personally like using Alt for the new namespace.

Here’s the shortcut keys for panel navigation as it stands now:

- Alt+N Split panel vertically

- Alt+L Focus panel to the right
- Alt+W Close Panel

There we go, these are much more intuitive and easy to remember. If you have the
shortcuts extension installed, these are the defaults, if you don’t, then add the follow-
ing lines to your keybindings.json file:

/**

* Terminal Split Panel

**/

"key": "alt+n",

"command": "workbench.action.terminal.split",

"when": "terminalFocus"

},

55
 {

"key": "alt+l",

"command": "workbench.action.terminal.focusNextPane",

"when": "terminalFocus"

},

"key": "alt+h",

"command":
"workbench.action.terminal.focusPreviousPane",

"when": "terminalFocus"

},

"key": "alt+w",

"command": "workbench.action.terminal.kill",

"when": "terminalFocus"

},

Now, when you want to run npm run watch, Open the terminal Alt+T, split it Alt+N,
and type npm run watch and Enter to start building. When you need to focus the other
panel for something else, press Alt+H.

There we go! We’ll use this same exact pattern for splitting the entire code editor win-
dow as well in the next chapter, so you only have to memorize these keybindings
ONCE and you can use them anywhere you need to split panels.

56
Editing

Probably THE most valuable skill to develop in your editor is, well… editing!

You CAN just use VS Code like Microsoft Word: Place the cursor, type in content,
maybe and copy and paste a chunk or two.

VS Code can be so much more than that.

There are common operations that are specific to code editing that you need to mas-
ter.

Let’s dig in.

57
Line Manipulation

Having a good workflow for manipulating lines of code in your editor is extremely im-
portant.

Here are the most common line operations we need to get good at performing (with-
out the mouse of course):

- Delete
- Duplicate
- Indent
- Fold
- Join
- Move

The default keybindings for these operations are generally sound, but we'll need to
add a couple:

/**

* Line Manipulation

**/

"key": "ctrl+l",

"command": "editor.action.copyLinesDownAction",

"when": "editorTextFocus"

},

58
 "key": "ctrl+j",

"command": "editor.action.joinLines",

"when": "editorTextFocus"

},

"key": "shift+ctrl+[",

"command": "editor.fold",

"when": "editorFocus"

},

"key": "shift+ctrl+]",

"command": "editor.unfold",

"when": "editorFocus"

},

Delete line

This is my MOST used line manipulation operation. Having a good way to delete en-
tire lines at a time is crucial.

Place your cursor anywhere in a line of code and press Ctrl+Shift+K

This works on highlighted chunks of code too.

59
Duplicate line

This is the second most often used line operation for me.

Because it's so common I've created a shortcut key in the root namespace: Ctrl+L!

L is for “line”, and it’s a simple, easy shortcut to press and remember.

To duplicate a line, place the cursor anywhere on the line and press Ctrl+L. Now the
line will be duplicated and placed on the line below.

This also works on highlighted chunks of code for duplicating multiple lines at once.

Indent lines

Let's say you paste a line of code into your editor and the indentation doesn't match
its surroundings.

With your cursor anywhere on the line, you can press Ctrl+[ to move the line one level
of indentation to the left, and Ctrl+] to move the line to the right.

60
You can also do this with highlighted blocks of code too of course.

This is a shortcut you will be using ALL THE TIME if you aren't already.

Code folding

To more easily scan big piles of code it can be helpful to "fold" specific blocks (HTML
tags, functions, conditionals, classes, etc.).

To fold a block, place your cursor anywhere on the topmost line and press Ctrl+Shift+
[. To unfold that block, do the opposite: Ctrl+Shift+].

This is also extremely handy for folding big HTML tags to more easily scan an HTML
document:

61
Joining lines

This is an operation I use surprisingly often: “bring line up”.

Because I use it so often, I map it to: Ctrl+J.

To join two lines, place your cursor on the top line and press Ctrl+J, now the bottom
line will be brought up and stitched together with the current line.

A common example for me is turning a multi-line object or array into a single line one:

// Before

foo: 'bar',

// After

{ foo: 'bar' }

Moving lines

Moving lines is last on this list because it's the line operation I use the least.

It is however useful enough to mention.

To move an entire line (or highlighted group of lines) up or down, press Alt+Up or
Alt+Down while your cursor is on the line.

62
Multi-Cursor

Multi-cursor support is crucial to any editor. In fact, I often wish every single text editor
in existence supported it.

In general, the concept is simple to grasp and you probably use it already, but there
are a few little tricks you can employ to make multi-cursor usage MUCH more power-
ful.

Before we start, here are the keybindings I use that you can add to your keybind-
ings.json file:

/**

* Multi-Cursor

**/

"key": "ctrl+backspace",

"command":
"editor.action.moveSelectionToPreviousFindMatch",

"when": "editorFocus && editorHasMultipleSelections"

},

"key": "ctrl+k ctrl+d",

"command":
"editor.action.moveSelectionToNextFindMatch",

63
 "when": "editorFocus && editorHasMultipleSelections"

},

"key": "ctrl+right",

"command":
"editor.action.insertCursorAtEndOfEachLineSelected",

"when": "editorFocus && editorHasSelection"

},

Let’s get started.

The shortcut key

The default shortcut key for multi-cursor in VS Code is [Ctrl+D].

Your basic workflow should be:

- Select a bit of text (Bonus points for using Ctrl+D to select the entire word
your cursor is on)
- Press Ctrl+D again to select the “next occurrence”
- Rinse and repeat until you’re satisfied, now you can manipulate all those
bits of text at the same time.

That workflow will get you pretty far, but let's look at some other usages.

64
Skip “next occurrence”

This is another common multi-cursor situation. You are selecting a bunch of things,
and you want to skip one of the selections.

To do this, there is a default keyboard shortcut I can never remember, so instead I map
my own.

Here are my keys:

Ctrl+K Ctrl+D for “skip to next”

For example, if you have an <input type="email"> tag and want to change the
"name" attribute to something other than "email", but preserve the type="email"
mixed in the middle.

If you highlight the first instance of "email", and press Ctrl+D, you will highlight the
unwanted "type" attribute.

To skip over this instance and continue highlighting, press Ctrl+K Ctrl+D.

65
Now you can continue selecting instances of "email" and change them all as you'd
like.

Reverse occurrence

Some times you just went ONE too far, and you want to undo the last selection? You
can use the Ctrl+Backspace shortcut for this.

Clicking around to add other cursors

Sometimes you want to click around and place multiple cursors around your editor.

Coming from Sublime Text, I was used to being able to hold Ctrl and click around to
place other cursors, however, this isn't the default in VS Code.
66
The following setting is included in the "Better Defaults" settings snippet from the be-
ginning of this book. If you didn't paste it in then, add it to your settings.json file to
enable this behavior:

"editor.multiCursorModifier": "ctrlCmd",

Putting your cursor at the end of multiple lines

A really common use case for multi cursor is changing something at the end of a
bunch of lines.

Take for example an array that you want to add commas at the end of the lines to:

To do this, you can highlight the entire series of lines and press Ctrl+Right. Now there
will be a cursor at the end of every line, and you can easily type a comma.

67
Navigating multiple cursors around words of differ-
ent length

Let’s look at that array example again. Let’s say we highlight all the lines, press
Ctrl+Right to put the cursor at the end of them.

Except, THIS TIME we want to change the single quotes to double quotes.

The first one is easy, simply press Backspace and type ”. But what about changing the
beginning quote?

If you press the left arrow three times, your cursor will be properly aligned for “one”
and “two”, but not “three” because it is two characters longer than the other "two".

In these cases, we can use the global modifier keys for navigating the beginning/end
of words or lines: ctrl for words, home/end for lines.

68
Now, if you hold ctrl and press the left arrow, your cursor will be at the beginning of
all three words and you can now change the beginning ’ single quote to a ” double
quote with ease.

home/end and ctrl are key parts to navigating text with multiple cursors. I use them
all the time.

Alternatively, you could have pressed home to go to the beginning of each line.

For VIM binding users, you have even more control over multi-line navigation. You can
do things like f" to navigate each cursor to the next occurrence of the " character. This
is the ultimate in flexibility.

69
Split Panels

Splitting the code editor is a common operation that for some reason I can NEVER re-
member the keybindings for.

Like we covered in the Terminal chapter, I've developed a much more intuitive set of
keybindings for this operation:

Shortcuts:

- Alt+N Split Panel Vertically

- Alt+W Close Split Panel
- Alt+H Focus Left

70
 - Alt+L Focus Right
- Alt+= Grow
- Alt+- Shrink

Here are the keybindings to add to your keybindings.json file:

/**

* Split Panels

**/

"key": "alt+w",

"command": "workbench.action.joinAllGroups",

"when": "editorFocus"

},

"key": "alt+n",

"command": "workbench.action.splitEditor",

"when": "editorFocus"

},

"key": "alt+l",

"command": "workbench.action.navigateRight",

"when": "editorFocus"

},
71
 {

"key": "alt+h",

"command": "workbench.action.navigateLeft",

"when": "editorFocus"

},

"key": "alt+=",

"command": "workbench.action.increaseViewSize",

"when": "editorFocus"

},

"key": "alt+-",

"command": "workbench.action.decreaseViewSize",

"when": "editorFocus"

},

Armed with these shortcuts, you can quickly and easily split your editor and compare
two files at once.

It’s worth noting that the only time I split my editor is when I am pair programming or
presenting at a conference or meetup. It’s much easier for an audience to understand
two bits of related code if they are shown directly next to each other than it is if you
are constantly switching back and forth.

72
Growing/shrinking panels

Notice there is a new shortcut included in here that we haven't seen before: Alt+=
and Alt+-.

These shortcuts allow you to grow and shrink a panel without reaching for your mouse
to drag the border left and right. This should feel right in line with other applications
that use "=" and "-" for zooming in and out (including VS Code).

Quickly opening a file in a split pane

One more quick tip: if you are navigating to a file with Ctrl+P, you can hold Ctrl be-
fore pressing Enter and the file will be open in a split panel.

Very handy.

73
HTML

There are a handful of annoying things I run into when editing HTML in any editor:

- Writing out entire open and closing tags

- Wrapping content in a tag
- Highlighting a tag's contents
- Folding tags for easy browsing
- Renaming tags
- Highlighting the contents/entirety of a tag

For all of these scenarios, we will be relying on the fantastic plugin included with every
VS Code installation: Emmet.

Emmet can do so many useful things, it deserves its own namespace for its shortcuts.
I’ve chosen Ctrl+M ("M" for eMMet).

Here are the shortcuts:

/**

* Emmet

**/

"key": "ctrl+m ctrl+i",

"command": "editor.emmet.action.balanceIn",

"when": "editorTextFocus"

},

{
74
 "key": "ctrl+m ctrl+o",

"command": "editor.emmet.action.balanceOut",

"when": "editorTextFocus"

},

"key": "ctrl+m ctrl+w",

"command": "editor.emmet.action.wrapWithAbbreviation",

"when": "editorTextFocus"

},

"key": "ctrl+m ctrl+m",

"command": "editor.emmet.action.matchTag",

"when": "editorTextFocus"

},

"key": "ctrl+m ctrl+e",

"command": "editor.action.smartSelect.expand",

"when": "editorTextFocus"

},

"key": "ctrl+m ctrl+r",

75
 "command": "editor.emmet.action.updateTag",

"when": "editorTextFocus"

},

"key": "ctrl+m ctrl+backspace",

"command": "editor.emmet.action.removeTag",

"when": "editorTextFocus"

},

In addition to the shortcuts, you can browse all of Emmet's capabilities by opening the
Command Palette (Ctrl+Shift+P) and searching "Emmet".

Quick intro to emmet

Emmet has been around for a while and has become a staple in the web developers
toolbox for a long time now.

76
At face value, Emmet allows you to type something like the following:

div.panel#notification

Then press Tab and the previous snippet will be expanded to:

<div class="panel" id="notification"></div>

It can do so much more and is EXTREMELY useful. For more than this basic syntax,
head over to the docs to become an Emmet wizard: Emmet Documentation.

Wrapping content in tags

If I have a <form> tag, I want to wrap in a <div> tag, you normally have to put your
cursor above the opening <form> tag and type “<div>”, then indent the entire selec-
tion by 1, then add a closing “</div>”.

This workflow is incredibly annoying.

If you select something in your editor like this:

Then press Ctrl+M Ctrl+W, you will be given a little input box you can type a new tag
into.

When you hit enter, Viola! Your selection has been wrapped AND indented for you.

77
This operation is invaluable. I use it ALL the time.

Bonus, you can use Emmet syntax from the editor, so you can type “div.foo.bar” and
hit enter, and your selection will be wrapped with a <div class=“foo bar”> tag. So nice.

Selecting inside a tag

Somewhat often I want to select the contents of a tag, or highlight the entirety of a tag.

I mapped Ctrl+M+I for “Balance Inward” and Ctrl+M+O for “Balance Outward”.

Here's what balancing INWARD looks like:

Here's what balancing OUTWARD looks like:

78
Folding

Like folding anything else, when I need to fold a tag, I either use the gutter with my
mouse in the side panel, or the folding shortcut key: Ctrl+Shift+[ or Ctrl+Shift+]

Simple as that.

Renaming a tag

If you want to rename a “div” to a “span” tag, it’s sometimes not so simple if the tags
are deeply nested and really far apart.

Again, Emmet to the rescue, there is an Emmet command to make this happen.

Press Ctrl+M+R to make this happen.

Move cursor to matching tag

In a large HTML tag, you may want to place your cursor at the other end of the tag to
either add a sibling or a similar operation.

79
Do do this, place your cursor inside a tag and press Ctrl+M+M.

Removing a tag

You can also easily remove tags (but keep their contents) with Ctrl+M+Backspace.

80
Snippets

You probably repeat the same keystrokes A LOT when you’re writing code.

Consider the following bit in PHP:

public function foo($bar)

//

How many times a day do you write “public function…”.

AND how much time does it take you? Yeah, I thought so...

Snippets.

Snippets are bits of pre-fabricated code that you can summon with a designated trig-
ger.

For example, when I type met in my editor:

class Foo {

met

... and then press "Tab", the aforementioned "met" is replaced by the defined snippet:

class Foo {

public function [cursor is placed here]()

81
 {

//

Snippets I find useful

You can configure snippets for all sorts of repetitive tasks and I’m certain I under-use
them, but here are the common ones I use often:

- met for “public function x() {}” (For some reason I don't find the need for a
javascript function snippet)
- test for bootstrapping a test method
- ds for document.querySelector
- con for console.log
- tinker for "eval(PsySh());" (An obscure but awesome Laravel trick)

That’s about it honestly.

Again, it’s likely that I underutilize them, but those are snippets I DO use all the time.

Registering a snippet

Snippets are contextual. You register them based on the file type you will be using
them in. For example, you could have a met for PHP and met for JavaScript.

To create a new snippets, open the command palette and select “Snippets”. Now type
the name of the language you are registering snippets for: ex. PHP and hit Enter.

A JSON file will open where you can copy the example snippet and get to work.

82
Setting placeholders

In the case of met, when I insert the snippet, I want the cursor to be set where I would
type in the name of the method.

VS Code makes this easy. When you’re registering your snippet, you can place dollar
signs ($) around the snippets where you want the cursor to go when the snippet is in-
serted.

If you have multiple, after inserting the snippet and typing into the first $ placeholder,
you can press Tab to jump to the second one.

You can also set “default” values for the those placeholders if only sometimes you
want to customize the value at “insert-time”.

If you want to get really funky with it, there are more things Snippets can do. For exam-
ple you can set regex expressions in the placeholders to control capitalization and
other crazy things.

But for me, I only rely on a handful of snippets and that’s good enough for me.

If you want to dig deeper, you can visit the VS Code docs.

83
My personal snippets

Here are my personal language snippets that I use all the time. Use them for reference
or copy and paste them directly. It's up to you!

PHP

"Method": {

"prefix": "met",

"body": [

"public function $1($2)",

"{",

" $3",

"}",

],

},

"Test Method": {

"prefix": "test",

"body": [

"/** @test */",

"public function $1()",

"{",

84
 " $3",

"}",

],

},

"Tinker": {

"prefix": "tinker",

"body": [

"eval(\\Psy\\sh());",

],

JavaScript

"Query Selector": {

"prefix": "ds",

"body": [

"document.querySelector($1)",

],

},

85
 "Console Log": {

"prefix": "con",

"body": [

"console.log($1)",

],

},

86
VIM Mode

First, what is “Vim Mode”?

Vim is a terminal-based text editor that’s been around forever.

Every command line (I’ve used) has access to it.

You likely have encountered it accidentally and had a hard time exiting it (you have to
type: :q to quit the program).

The thing that makes Vim special as a text editor, is it has 2 modes. One is an “insert
mode” which feels exactly like any other editor (You type things in and see them ap-
pear). The second is a “command mode”. This is the thing that makes Vim different.
While in command mode your entire keyboard turns into a control panel for travers-
ing and manipulating text.

The learning curve for using Vim is extremely steep and dedicating yourself to it takes
time and effort.

Because VIM is SO powerful, most editors and IDE’s support “Vim Bindings” so that
you can use the second “command” mode in your editor as if you were using Vim it-
self.

VS Code unfortunately has no “VIM mode” out of the box, but there are few good plu-
gins that work well.

amVim

amVim is my Vim extension of choice. I’ve tried every other one and they are either
too slow or act oddly.

87
amVim feels fast and lightweight and offers most if not all the functionality I’d want out
of Vim bindings.

There are two little gotchas when using amVim that are worth mentioning:

It makes "find" act funny

For some reason with AmVim, when you press Ctrl+F to open the "Find" popover,
normally you can press Enter repeatedly to go to the next occurances, but AmVim
breaks this behavior.

To fix this, add the following override to your keybindings.json file:

/**

* amVim Finder Fix

**/

"key": "enter",

"command": "editor.action.nextMatchFindAction",

"when": "findWidgetVisible"

},

"key": "shift+enter",

"command": "editor.action.previousMatchFindAction",

"when": "findWidgetVisible"

},

88
Some “yanking” gotchas

First, y and p (yank and put) in Vim are essentially “copy” and “paste”.

It’s worth noting that amVim has a separate “clipboard” for these actions and remem-
bering which clipboard is which (your OS’s one, or the VIM one) can be confusing at
times.

Especially when copying and pasting between projects. Yanking (y) and putting (p) is
impossible between projects, so you have to remember to use Ctrl+C and Ctrl+V in-
stead.

Another note is that yanking multi cursor text doesn’t “put” properly. When you are
copying text in multi-cursor mode, you should use Ctrl+C and Ctrl+V.

89
Project Switching

I often have more than one project open at any given time in VS Code.

Similar to Ctrl+P for files, I want to be able to quickly search and switch between them
with a shortcut key.

We're going to use Ctrl+; for this. It's easy to press and right next to Ctrl+P.

There are two ways to achieve this behavior:

Method #1) "Switch Window" command

You can achieve a Ctrl+P-esque experience with VS Code's native "Switch Window"
command.

Here's the config to add to your keybindings.json file to achieve this:

/**

* Project Switching

**/

"key": "ctrl+;",

"command": "workbench.action.switchWindow"

},

Now, here's what pressing Ctrl+; looks like:

90
Method #2) Simple Project Switcher extension

Simple Project Switcher is an extension I wrote for this course specifically.

It is only available in the upgraded package of this course. If you did not purchase it,
consider upgrading your package by emailing us at [email protected]
com.

It solves a few pain points and makes some enhancements to the aforementioned
Ctrl+; workflow:

- It lists ALL projects, not just the open (or recently opened ones)
- It sorts by most recently opened (or switched to)
- It allows for double pressing Ctrl+; to go to the most recent project (exactly
like Ctrl+P does)

For more specifics on installing and using this extension, reference the README in-
cluded in you course package.

91
Now that it's installed, it should just magically work out of the box.

If you press Ctrl+; now, you should see a window listing all the available projects in
the directory ABOVE the current project.
92
You can now fuzzy search for a project and open it by pressing Enter.

It will automatically open new projects in new windows and sort the items by most re-
cently opened (unlike the native "Quick Window Switcher").

If you're like me, all your coding projects are in a single folder, so the default of look-
ing in the directory above works great!

However, if this default doesn't suit you, you can configure this extension to look in a
specific directory:

"simple-project-switcher.directory": "/Users/calebporzio/
Sites",

Using window tabs

Now that we have a good way of switching projects without using the mouse, let's
look at an interesting config option for managing different project windows.

By default, VS Code will open new folders/projects in separate windows.

This isn't a big deal because we have our new Ctrl+;, but sometimes it's nice to see
the currently opened projects in tabs at the top.
93
You can enable this behavior with the following setting in settings.json:

"window.nativeTabs": true,

Now, if you have two projects open at once, it will look like this:

I personally prefer NOT to use these tabs for the same reason I don't use file tabs, but
I do understand it can be helpful for window management.

As an additional tip, if you use these tabs, you can add the following keybindings to
switch between them with the same keybindings you use to switch between tabs in
your web browser:

"key": "alt+ctrl+right",

"command": "workbench.action.showNextWindowTab",

},

{
94
 "key": "alt+ctrl+left",

"command": "workbench.action.showPreviousWindowTab",

},

95
Prettyness

Aesthetics Matter.

You work in your code editor all day long. It should look great and bring you joy.

More importantly, the way your editor looks actually has an impact on the code you
write. Things like font-size make a big difference in how you perceive a block of code.

Let’s talk about all this.

96
Clearing Line Crap

VS Code adds so many popovers, overlays and underlines, it’s ridiculous.

I like just plain ole’ text that I can read. Maybe the occasional autocomplete dialogue
or red squiggly to tell me something’s wrong.

Add the following to your settings.json file and customize away!

/**

* Silence The Noise

*/

"breadcrumbs.enabled": false,

"scm.diffDecorations": "none",

"editor.hover.enabled": false,

"editor.matchBrackets": "never",

"workbench.tips.enabled": false,

"editor.colorDecorators": false,

"git.decorations.enabled": false,

"workbench.startupEditor": "none",

"editor.lightbulb.enabled": false,

"editor.selectionHighlight": false,

"editor.overviewRulerBorder": false,

97
 "editor.renderLineHighlight": "none",

"editor.occurrencesHighlight": false,

"problems.decorations.enabled": false,

"editor.renderControlCharacters": false,

"editor.hideCursorInOverviewRuler": true,

"editor.gotoLocation.multipleReferences": "goto",

"editor.gotoLocation.multipleDefinitions": "goto",

"editor.gotoLocation.multipleDeclarations": "goto",

"workbench.editor.enablePreviewFromQuickOpen": false,

"editor.gotoLocation.multipleImplementations": "goto",

"editor.gotoLocation.multipleTypeDefinitions": "goto",

There are just too many configurations above to cover all of them, but most of the ti-
tles should be self-explanatory.

As with any of this, feel free to modify things to suite your own needs as you see fit.

To give you a visual idea of what the above settings do, here are before and after
screenshots of an editor with this configuration.

98
99
Typography

Believe it or not, your editor's typography has an impact on the code you write.

Bigger fonts with more line spacing give you more focus and encourage smaller
methods.

"Zooming in" encourages you to care about small, stylistic details in your code.

"Zooming in" also acts as a constraint. Messy code feels messier. Long methods, feel
longer.

For this reason, here are my default typography settings:

/**

* Typography

**/

"editor.fontSize": 16,

"editor.lineHeight": 45,

"editor.suggestFontSize": 16,

"editor.suggestLineHeight": 28,

"terminal.integrated.fontSize": 15,

"terminal.integrated.lineHeight": 1.5,

Here's a before and after with these settings applied:

100
Ah, much cleaner.

But is it always?

101
Are there times when this font is too big?

Absolutely

Zooming out

MOST of the time, my font size is big and spacious, however, there ARE times this ac-
tually works against me.

If I'm scanning a big block of code, navigating a giant HTML file, or navigating a JSON
settings file like the same ones referenced in this book, the big font size actually hurts
my workflow.

For these cases, I want to be able to easily swap back and forth between two different
typographical setups. One for zooming in, and one for zooming out.

We're going to use the shortcut key Ctrl+K Ctrl+K to quickly jump back and forth be-
tween these settings.

Here's the set up:

1. Search for and install the "Toggle" extension.

2. Add the following snippet to your keybindings.json file:

/**

* Toggle Big/Small Font Size

**/

"key": "ctrl+k ctrl+k",

"command": "toggle",

"when": "editorTextFocus",
102
 "args": {

"id": "fontSize",

"value": [

"editor.fontSize": 16,

"editor.lineHeight": 45,

},

"editor.fontSize": 14,

"editor.lineHeight": 0,

},

By default, Ctrl+K Ctrl+K is the shortcut key to toggle Zen Mode in VS Code.

If you haven't heard of "Zen Mode", it's a way to hide all the extra crap in VS Code and
focus on your work.

Why would we need a shortcut key for this? It's Zen Mode ALL THE TIME around here
'.

103
Themes

Color Themes are an area of pure taste. You should use the one that makes you feel
the best. Everyone is different. Just make sure you are intentional and that you use the
opportunity to extract joy from the aesthetics of your editor.

I’ll go through few notable ones and my thoughts on them:

Palenight

This is the color theme to end all color themes for me. It’s a variant of the legendary
“Material Theme” (which we will get to in a second), and I think it’s perfect in *almost
every way (I wish it was a tad higher contrast sometimes).

104
The color combinations are drop-dead gorgeous in my opinion. It’s full of life and
completely modern. I just love it so much and have been using it consistently for prob-
ably 4 years?

Material

The “Material Theme” was the first color theme I ever loved. It’s fantastic and looks
great. But honestly, it’s too low-contrast and not “Palenighty” enough for me. Lots of
people still love it and it remains one of the most popular themes out there.

105
Dracula

Dracula is a fantastic theme with a Pro version you can purchase. If I didn't love
Palenight so much, I would be using this theme.

106
Nord

Nord is a newer kid on the block. It's based off the fantastic Nord color palette which
I've used in plenty of graphic design work.

There's a lot to love here if cool, muted colors are your taste.

107
Cobalt 2

Cobalt 2 is a variation on the original “Cobalt” theme by Wes Bos. It takes a kinda-
cool, but "old" feeling theme and makes it fresh as hell.

Wes Bos crafted it himself and it’s become popular in its own right. I used it for a year
or so happily.

108
Shades Of Purple

This theme is by Ahmad Awais who's behind the "VS Code Power User" course. I
LOVE purple in my designs (and life). If you're like me, this is a fantastic theme to get
more purple in your life.

109
Night Owl

This is a fairly new and popular theme by Sarah Drasner (A super famous web devel-
oper/educator). It's too dark for me, but looks really nice.

110
One Dark Pro

This is an adaptation of the "One Dark" theme for the Atom editor. It's a bit warmer
than everything else mentioned here if that suits your tastes.

111
SynthWave '84

"SynthWave '84” is a fun, newer theme that caters to people who want to relive the
80's and like listening to the "The Midnight".

It’s pretty good on its own, but the really unique thing about it is, with a little cus-
tomization, you can have your code “glow”. It looks really sexy and I think it’s a great
choice if you’re into the synth-wave vibe. (I've tried twice in the past to get my editor
to glow and failed both times, so there's no glow in the screenshot ( )

112
GitHub Light

I have to mention at least ONE light theme for when you're coding on a sunny day
from a park bench.

If you’re into light themes, I think the GitHub one is the best personally. It’s really nice.

113
Fonts

Font choice is entirely a taste thing.

I’ll tell you what font I use, and then offer a bunch of good alternatives (ones that I’ve
likely used in the past and been very happy with).

/**

* Typography

**/

"editor.fontFamily": "MonoLisa",

MonoLisa

While writing this chapter, I tried out this font and fell in love. I've been using it ever
since and am still adoring it over a month later. It was built with great care for develop-
ers specifically.

It DOES cost ~$70. A price I was happy to pay for such a well crafted font.

114
Operator Mono

BEFORE writing this chapter, my font of choice was “Operator Mono”. It looks fantastic
to me (although lots of people think it’s hideous), but is really expensive. It’s $300.

I got the font for free by running a contest: (laravelstickercontest.com) and getting the
font donated by the creators. They were kind enough to give me a free copy.

I probably wouldn’t have bought it otherwise.

Dank Mono

Before I got a free version of Operator Mono, I bought a similar looking font (that had
cursive for italicized text) called “Dank Mono”. It’s a much more reasonable $40 and
looks really good in my opinion.

115
Fira Code

This is THE coding font. It’s been around forever, looks great, and is completely free.

This was the first coding font I fell in love with and remains a great option to this day.

IBM Plex Mono

A free font that lots of people use. It does nothing for me. But maybe it does for you!

116
JetBrains Mono

JetBrains is the company behind PHPStorm and WebStorm and this is their personal
font offering.

Try it if you like it, it's totally free. Same as IBM Plex, this does nothing for me, but don't
let me stop you. Tons of people love this font.

117
Intellisense

What does "IntelliSense" mean? Here's a definition taken straight from the VS Code
docs:

IntelliSense is a general term for a variety of code editing features including:

code completion, parameter info, quick info, and member lists. IntelliSense fea-
tures are sometimes called by other names such as "code completion", "con-
tent assist", and "code hinting."

VS Code is wonderful for its ability to remain a text-editor, but offer some of the fanci-
ness of grown-up IDEs.

I personally use JavaScript and PHP in my day-to-day work.

You may be using different languages entirely.

The principles and shortcut keys I demonstrate here will translate to most other lan-
guages, you will just have to do the work of finding the right extensions yourself.

118
JavaScript

VS Code has good JavaScript support out of the box. So there’s no need to install a
separate package for it like there is with PHP and other languages.

The only thing I will say is if you use Vue, you will want to download the Vetur exten-
sion. (VS Code supports React out of the box)

Here are the keybindings we will be using for JavaScript IntelliSense:

/**

* IntelliSense

**/

"key": "ctrl+r",

"command": "workbench.action.gotoSymbol",

},

"key": "ctrl+shift+r",

"command": "workbench.action.showAllSymbols"

},

"key": "ctrl+k ctrl+enter",

"command": "editor.action.goToDeclaration",
119
 "when": "editorTextFocus"

},

Easily searching functions/methods

A common need for me is to open a function definition in a file. Sometimes I want to

modify the function, other times I just want to source dive and explore the code.

To search for a function within the current file, we will map Ctrl+R to “symbol search”
so we can easily browse methods within a file.

This should function very similarly to Ctrl+P for searching files. Press the key, and start
searching for a function, press enter when you’ve found it and your editor will present
it to you.

To search for functions in the entire project, we will bind Ctrl+Shift+R.

Now, you can press Ctrl+Shift+R, and as you type VS Code will search ALL js files in
your project for “symbols” or for us, functions.

120
Pro tip:

When I type Ctrl+R and start searching, I generally only want to see “functions”, not
properties and other noisy things. To “kind-of” accomplish this, we’ll type “:” in the Ctrl
pallet to sort by method.

Import class/function

Fortunately, VS Code auto-imports a function if you select it from an auto-complete

list.

For this reason, I try to always press Enter when VS Code is auto-completing a func-
tion I'm typing.

121
I also would love to be able to press Ctrl+K Ctrl+I to manually import a function like I
do in PHP (like you'll see in the coming section) when I need to, but VS Code doesn't
actually allow a way to do this without installing other extensions which just isn't worth
it for me.

So for now, my recommendation is: use the auto-complete!

GoTo definition

It is often handy for me to want to see the definition of the class/function/method I’m
referencing in my code.

You can right click and select “GoTo definition”, but I prefer the keybinding: Ctrl+K
Ctrl+Enter to go into the definition without my mouse.

If you added the keybindings above this should work great for you.

Find all references

In addition to going to a definition of a referenced function, you can also view the ref-
erences of a defined function.

122
In simple terms, if you want to view all the places a function is used in your codebase,
go to that function and select "Find All References".

A sidebar panel will open up with the references of that function.

I personally don't use this enough to warrant a keyboard shortcut, but I figured I'd
mention that it exists here.

Rename a class

To rename a symbol in VS Code, right-click and select “rename symbol“. Type in the
new symbol, and Viola! All references will be changed. Too easy.

123
Again, I don't use this command often enough to memorize a keybinding. The mouse
works fine for these cases.

Running tests

Testing is a huge part of my workflow, and often times I'm TDDing the code I write
(less in JS than in PHP, but still often).

It's important that I have keybindings to both quickly run a test, and quickly re-run a
previous test as I refactor code.

I use Jest for testing in JavaScript, so after installing the "Better Jest" extension (which
was built specifically for this course by Adam Richbart) I'm all set up.

I can now place my cursor inside a test and press Ctrl+K Ctrl+R to run that test:

124
Now, as I am working on code, I can press Ctrl+K Ctrl+P to re-run the previous test to
see how I'm doing.

I use these two shortcuts ALL THE TIME and they're imperative to my workflow.

Linting

Another common need is “linting”. Linting is the term for conforming your code to a
preset “style”. Things like “there should be a space after if and ().

There are lots of options for linting in JavaScript, ES Lint is fairly popular, but Prettier is
growing more and more popular.

We're going to talk about Prettier because it's the easiest to set up and configure and
the most popular nowadays.

To get it running, we'll need to install the "Prettier - Code Formatter" extension.

Once that is installed, we'll need some better default settings in our settings.json file:

/**

* Prettier

125
 **/

"[javascript]": {

"editor.defaultFormatter": "esbenp.prettier-vscode",

"editor.formatOnSave": true,

},

"prettier.requireConfig": true,

"prettier.useEditorConfig": false,

The first [javascript] block means that these settings will only be applied to Java-
Script files. Here we are setting the Prettier extension as the default formatter for JS
files, and we are setting it to format on save.

Next the "prettier.requireConfig": true" setting means that Prettier won't run unless we
have a .prettierrc file (Prettier's configuration file).

Without this setting, when you hit "save" in any project's JS files, they will be formatted
with Prettier's default settings. This is way too heavy handed to me.

Instead, I only want Prettier to run in projects that are set up to use it.

Here's an example of a .prettierrc file for one of my projects:

"tabWidth": 4,

"semi": false,

"singleQuote": true,

"arrowParens": "avoid"

126
Now, with this file in the root directory of a project, Prettier will run using these settings
when I save a JS file. It's exactly what I want and extremely reliable.

The other setting worth covering is "prettier.useEditorConfig": false,. This

setting tells the extension to NOT look at .editorconfig files for prettier configura-
tion.

In my experience MOST projects have a .editorconfig file for specifying tab length and
such, and I don't want to run Prettier on these projects because they haven't explicitly
set up a .prettierrc file.

Your mileage may vary. Linting is always opinionated and you will have to chart out
your own path, but hopefully what I've provided here are sensible defaults for you.

Step debugging

Sometimes, console.log() isn’t enough and you need more in-depth "step debug-
ging".

"Step Debugging" is the word for tools that allow you to freeze code execution at a
certain point, step through the code execution slowly and explore the runtime freely.

It's incredibly powerful and VS Code offers some tools for it, however, I haven't found
a good workflow for JavaScript in general.

It IS possible to set up for JavaScript, but all the setups are too complex or unreliable.
So instead, I have a simpler alternative for you:

The debugger statement

Fortunately, from anywhere in your JS code, you can simply insert a "debugger" state-
ment and let Google Chrome be your debugger.

Here's an example:

127
Let's say we add a "debugger" (think of it like a magical "console.log") statement to a
JavaScript function in our project.

Now, let's run that function from the browser somehow. (We'll manually do it in the
DevTools for now)

The execution is now paused and we can explore the code from the "Sources" panel
in the DevTools.

128
More specifics on step debugging are outside the scope of this book, so this is as far
as we'll go.

129
PHP

For bringing PHP IntelliSense to VS Code, there is a fantastic extension called “PHP In-
telephense”. This is going to be the bedrock of making VS Code understand PHP.

After installing the extension we only have to configure ONE setting to make it work
the way we want in settings.json:

/**

* PHP Intelephense

**/

"php.suggest.basic": false,

This setting ensures that we only get PHP suggestions from ONE place; the extension,
not VS Code itself.

In case you didn't catch the keybindings in the "JavaScript" section, here are the same
keybindings for IntelliSense related things that apply to PHP as well:

/**

* IntelliSense

**/

"key": "ctrl+r",

"command": "workbench.action.gotoSymbol",

},

130
 {

"key": "ctrl+shift+r",

"command": "workbench.action.showAllSymbols"

},

"key": "ctrl+k ctrl+enter",

"command": "editor.action.goToDeclaration",

"when": "editorTextFocus"

},

"key": "ctrl+k ctrl+i",

"command": "namespaceResolver.import",

},

Notice, there is one new one referenced here that we didn't reference in the Java-
Script section: Ctrl+K Ctrl+I. We'll get to that in a minute.

Find methods in file and in project

Because we added the above extension, global and local symbol search will just work
out of the box.

Press Ctrl+R to search for methods within a file, and press Ctrl+Shift+R to search for
methods within the entire project.

This is one of the most useful features that I use constantly.

131
Import class

Unfortunately, PHP Intelephense doesn’t offer this ability out of the box.

For this, we will need a new extension called “PHP Namespace Resolver”. This exten-
sion is fantastic and works perfectly out of the box with ZERO configuration.

As you've seen at the beginning of this section, the keybinding for this operation has
been mapped to Ctrl+K Ctrl+I (I for "Import").

Also, occasionally, I don’t want to “import” a class, but I want to “expand” the class in-
line. (Often for things like a routes file or some non-namespace/class file). To do this,
right-click on a class and select “Expand class“. There’s no shortcut for this because it’s
rare enough it’s easier to just right-click.

GoTo definition

Thanks to PHP Intelephense, GoTo definition just works as you'd expect.

With your cursor on a class or method, press Ctrl+K Ctrl+Enter to be taken to its
source code.

You can also access this from the right-click menu:

132
Rename a class

This is something that you will have to buy the “pro” version of “PHP Intelephense” to
unlock, and I will say, it IS handy.

To unlock the "Pro" version of Intelephense, go here and buy a license key.

Now, from the command palette, select "Intelephense: Enter license key" and enter it.

Now you can right click on a class or method, you can rename it easily by selecting
“Rename Symbol”.

133
Now when you hit enter, the class and all its references, including the file itself, will be
renamed.

This is EXTREMELY useful and saves loads of time doing global find/replaces and re-
naming files.

Running tests

For running tests in PHPUnit we'll be using the Better PHPUnit extension. It's the sim-
plest and fastest one out there (I'm biased because I wrote it, but let the install count
speak for itself ) ).

It comes with our preferred keybindings out of the box.

With the cursor inside any test, press: Ctrl+K Ctrl+R to run that test.

134
To re-run the previous test as you're refactoring, press Ctrl+K Ctrl+P.

As a tip, you can put your cursor at the top of a file and press Ctrl+K Ctrl+R to run the
entire file.

If you want to run your entire test suite, you can do so in the command palette with:
"Better PHPUnit: run suite".

I use this workflow CONSTANTLY and it works wonderfully.

Linting

Linting is the term for when an automatic computer system fixes your code styling for
you. Like if you have too many spaces it will normalize that for you.

The popular linter for PHP is PHP CS Fixer.

PHP CS Fixer is fairly simple. You configure what styles you want in a .php_cs.dist file,
and run php-cs-fixer from the command line.

For us, we’re just going to use an off-the-shelf VS Code plugin so we don’t have to
worry about any of that.

135
It's called: "php cs fixer" by "junstyle"

Once installed we'll need to configure it with sensible defaults in our settings.json
file:

/**

* PHP CS Fixer

**/

"[php]": {

"editor.defaultFormatter": "junstyle.php-cs-fixer"

},

"php-cs-fixer.onsave": true,

"php-cs-fixer.showOutput": false,

"php-cs-fixer.autoFixByBracket": false,

"php-cs-fixer.rules": "@PSR2",

These settings set this extension to lint our files when we save a file.

By default it will use basic "PSR2" rules, but if it detects a config file (.php_cs.dist) file,
it will use that instead.

It would be great to only run this extension when a config file is present, but unfortu-
nately, there is no configuration to do that.

Fortunately, the default "@PSR2" rules are ubiquitous and loose enough to not feel in-
vasive in projects that don't use a .php_cs.dist file.

136
Step debugging

For step debugging in PHP, VS Code will work with the XDebug PHP extension.

Getting this set up locally is out of the scope of this book.

For tight VS Code debugging integration, I recommend the following tutorial: https://
tighten.co/blog/configure-vscode-to-debug-phpunit-tests-with-xdebug/

Pro Tip:

Along the same lines as the debugger statement I mentioned in the JavaScript sec-
tion, there is a similarly magical little snippet that allows you to pause execution and
explore code at run-time in PHP (Laravel more specifically). Here it is:
eval(\Psy\sh())

It's a gnarly looking code snippet, but it's extremely powerful.

If you are running your code from a PHPUnit test, drop this snippet somewhere you
would normally write "dd()" like so:

Now, when you run the test, the command line will be transformed to a console for
PHP with access to all the variables in scope.

137
I have a "tinker" snippet set up that I mentioned in the "Snippets" section of the book
to make this easier.

For more info and tips on this, check out this blog post.

138
Signing Off

Wheeew, there we go! A complete VS Code workflow.

We've come a long way. From a messy, ugly VS Code install, to something we're
proud of.

I encourage you to revisit this book as a reference from time to time to make sure
you're taking advantage of all the shortcuts and techniques we discussed.

Thank you so much for coming along on this journey with me.

If you have any questions, thoughts, or corrections on this book, feel free to reach out
via [email protected].

It's been a real pleasure,

Caleb

139