<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:media="http://search.yahoo.com/mrss/">
  <channel>
    <title>VS Code · Jared Lynskey</title>
    <link>https://jared.lynskey.co.nz/en/tags/vs-code/</link>
    <description>Short stories of value on software engineering and engineering leadership — performance reviews, hiring and scaling teams, CI/CD, DevOps monitoring and agentic AI. Written from Seoul.</description>
    <generator>Hugo</generator>
    <language>en</language>
    <copyright>© 2026 Jared Lynskey</copyright>
    <lastBuildDate>Wed, 28 Oct 2026 00:00:00 +1300</lastBuildDate>
    <atom:link href="https://jared.lynskey.co.nz/en/tags/vs-code/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>Git Graph in the Terminal and VS Code: Track Progress Without Micromanaging</title>
      <link>https://jared.lynskey.co.nz/en/posts/2023/2023-06-02-project-progress-git-graph/</link>
      <guid isPermaLink="true">https://jared.lynskey.co.nz/en/posts/2023/2023-06-02-project-progress-git-graph/</guid>
      <pubDate>Fri, 02 Jun 2023 11:30:03 +0000</pubDate>
      <dc:creator>Jared Lynskey</dc:creator>
      <category>Git</category>
      <category>Git Graph</category>
      <category>VS Code</category>
      <category>Project Management</category>
      <category>Engineering Manager</category>
      <description>How to see a git graph: the git log --graph command and an alias for it, comparing two branches, and the graph views in VS Code. Then how I use it to follow progress without micromanaging.</description>
      <content:encoded><![CDATA[<p>The quickest way to see a git graph is in the terminal: <code>git log --graph --oneline --all --decorate</code> draws every branch as lines of text, one commit per line, with branch and tag names next to the commits they point at. In VS Code you can use the Source Control Graph that&rsquo;s built into the Source Control view, or install the Git Graph extension for a bigger, clickable version. Both are covered in more detail at the end of this post.</p>
<p>Nobody enjoys being asked &ldquo;how&rsquo;s it going?&rdquo; — and as the one leading a project at work, I still need to know how it&rsquo;s going. My compromise is the git graph: I look at it before I ask anyone anything, and most of the time it already has the answer. It shows commit activity, branching and merging at a glance, and nobody has to sit in a meeting for it.</p>

<h3 class="relative group">What the graph actually tells you
    <div id="what-the-graph-actually-tells-you" class="anchor"></div>
    
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
        <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#what-the-graph-actually-tells-you" aria-label="Anchor">#</a>
    </span>
    
</h3>
<p><figure><span class="mc-img" style="--lqip:url('data:image/webp;base64,UklGRqoAAABXRUJQVlA4IJ4AAAAQBgCdASogABgAPw1yrE0mIyIhKAqoxiGJ5QC3uywCxQFpuHEPXSkTd6B0z2RWZa4T7Y8RfsruOsAA/vd8+2CpyheBOdEz3RjVNYlC9RtFoqjOvb/UUWB572vAmnOtzv/AnG5mtp9GYAzXQce5Jk69dXACVLuYiXixGTwngnNtwm/gJSEGWEDi7N2CT1vDSW68w98W/Qmb3QPw7xAAAA==')"><img
    class="my-0 rounded-md"
    loading="lazy"
    decoding="async"
    fetchpriority="auto"
    alt="Git Graphs"
    width="2560"
    height="1920"
    src="https://jared.lynskey.co.nz/img/posts/gitgraphs/image_hu_4be8d7d2144dd617.webp"
    srcset="https://jared.lynskey.co.nz/img/posts/gitgraphs/image_hu_4be8d7d2144dd617.webp 800w, https://jared.lynskey.co.nz/img/posts/gitgraphs/image_hu_b6056380eece4a86.webp 1280w"
    sizes="(min-width: 768px) 50vw, 65vw"
    data-zoom-src="https://jared.lynskey.co.nz/img/posts/gitgraphs/image_hu_1c52b3c34db54258.webp"></span></figure>
</p>
<p>If you haven&rsquo;t looked at one closely: every node is a commit, every divergent path is a branch, and the whole thing reads as a timeline of the project. That layout carries a surprising amount of information:</p>
<ul>
<li>A glance shows how many branches are active and how often commits are landing.</li>
<li>A branch that suddenly goes quiet, or one that hasn&rsquo;t merged for weeks, usually means someone is stuck. That&rsquo;s an early warning worth having.</li>
<li>Merge frequency tells you how the team collaborates. Frequent merges mean work is actually being integrated; long-lived branches usually mean someone has drifted off into siloed work.</li>
</ul>

<h3 class="relative group">Fewer interruptions, better conversations
    <div id="fewer-interruptions-better-conversations" class="anchor"></div>
    
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
        <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#fewer-interruptions-better-conversations" aria-label="Anchor">#</a>
    </span>
    
</h3>
<p>The obvious win is that I don&rsquo;t have to interrupt anyone to know where things stand. The bigger win is what happens when a conversation <em>is</em> needed: it starts from the graph rather than from assumptions. &ldquo;This branch hasn&rsquo;t moved since Tuesday — anything blocking you?&rdquo; is a much better opener than &ldquo;any updates?&rdquo;</p>
<p>It also helps to make the routine explicit. Mine is a quick glance most mornings and a proper look once a week. The team knows that&rsquo;s the rhythm, so nobody gets surprised.</p>

<h3 class="relative group">Don&rsquo;t turn it into surveillance
    <div id="dont-turn-it-into-surveillance" class="anchor"></div>
    
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
        <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#dont-turn-it-into-surveillance" aria-label="Anchor">#</a>
    </span>
    
</h3>
<p>This is the part I have to keep reminding myself of. Commit count is not value — one thoughtful commit can beat fifty noisy ones. Seeing every commit doesn&rsquo;t entitle you to question every decision; trust the team and step in only when a pattern genuinely looks like trouble. And when you do bring the graph into a conversation, it&rsquo;s a starting point for feedback, not evidence for a prosecution.</p>

<h3 class="relative group">Viewing the graph in the terminal
    <div id="viewing-the-graph-in-the-terminal" class="anchor"></div>
    
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
        <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#viewing-the-graph-in-the-terminal" aria-label="Anchor">#</a>
    </span>
    
</h3>
<p>Nothing to install, just Git:</p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">git log --graph --oneline --all --decorate</span></span></code></pre></div></div>
<p>What each flag does:</p>
<ul>
<li><code>--graph</code> draws the branch and merge lines down the left-hand side.</li>
<li><code>--oneline</code> puts each commit on one line: its short hash and the first line of its message.</li>
<li><code>--all</code> shows every branch and tag, remote ones included, instead of only the branch you&rsquo;re on.</li>
<li><code>--decorate</code> prints branch and tag names next to the commits they point at. Recent versions of Git already do this when the output goes to a terminal, but the flag keeps them when you pipe the output somewhere else.</li>
</ul>
<p>Nobody wants to type that every morning, so make it an alias:</p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">git config --global alias.graph <span class="s2">&#34;log --graph --oneline --all --decorate&#34;</span>
</span></span><span class="line"><span class="cl">git graph</span></span></code></pre></div></div>
<p>On a long-lived repo the full graph scrolls forever. A few ways to cut it down:</p>
<div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">git graph --since<span class="o">=</span><span class="s2">&#34;2 weeks ago&#34;</span>    <span class="c1"># only the last two weeks</span>
</span></span><span class="line"><span class="cl">git graph -20                      <span class="c1"># only the last 20 commits</span>
</span></span><span class="line"><span class="cl">git log --graph --oneline main..feature                <span class="c1"># on feature, not yet in main</span>
</span></span><span class="line"><span class="cl">git log --graph --oneline --left-right main...feature  <span class="c1"># both sides, marked &lt; and &gt;</span></span></span></code></pre></div></div>
<p>The last two compare two branches, and they use plain <code>git log</code> rather than the alias because <code>--all</code> would pull every other branch back in. Two dots shows what <code>feature</code> has that <code>main</code> doesn&rsquo;t. Three dots with <code>--left-right</code> shows what each side has that the other doesn&rsquo;t, which is a quick way to see how far a long-lived branch has drifted.</p>

<h3 class="relative group">Viewing the graph in VS Code
    <div id="viewing-the-graph-in-vs-code" class="anchor"></div>
    
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
        <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#viewing-the-graph-in-vs-code" aria-label="Anchor">#</a>
    </span>
    
</h3>
<p>VS Code has a graph built in. Open the Source Control view (Ctrl+Shift+G) and the Source Control Graph is one of the sections in that panel; it has been there since version 1.93 (August 2024). By default it follows the current branch and its remote, and the branch picker in the graph&rsquo;s title bar adds others. For a quick look, that&rsquo;s all you need.</p>
<p>For every branch at once, install the Git Graph extension by mhutchie (search for &ldquo;Git Graph&rdquo; in the Extensions view). Open it from the Git Graph item in the status bar, the Git Graph icon at the top of the Source Control view, or the Command Palette with <em>Git Graph: View Git Graph (git log)</em>. Click a commit to see the files it changed, or click one commit and Ctrl/Cmd-click another to compare the two. It hasn&rsquo;t had a release since 2021, which is one more reason the built-in graph is worth knowing about.</p>
<p>If the Git Graph button doesn&rsquo;t appear, the extension probably hasn&rsquo;t found a repository. By default it only checks the folders you opened, not their subfolders, so open the repository&rsquo;s own folder or raise <code>git-graph.maxDepthOfRepoSearch</code> in the settings.</p>

<h3 class="relative group">Other tools
    <div id="other-tools" class="anchor"></div>
    
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
        <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#other-tools" aria-label="Anchor">#</a>
    </span>
    
</h3>
<p>Most Git tools draw a graph somewhere. <code>gitk --all</code> is Git&rsquo;s own history browser. GitHub, GitLab and Bitbucket each have a &ldquo;network&rdquo; or &ldquo;graph&rdquo; view on the repository page. And the desktop clients, SourceTree (free, from Atlassian), GitKraken, Tower and TortoiseGit on Windows, all have one too.</p>
<p>Whichever you pick, the goal is the same: understand the progress, don&rsquo;t count the commits.</p>
]]></content:encoded>
      <media:content url="https://jared.lynskey.co.nz/en/posts/2023/2023-06-02-project-progress-git-graph/featured.jpeg" medium="image" type="image/jpeg" />
    </item>
    <item>
      <title>Keyboard Shortcuts for Programmers on a Mac: Terminal, Vim, VS Code and Chrome DevTools</title>
      <link>https://jared.lynskey.co.nz/en/posts/2021/2021-12-19-commands/</link>
      <guid isPermaLink="true">https://jared.lynskey.co.nz/en/posts/2021/2021-12-19-commands/</guid>
      <pubDate>Sun, 19 Dec 2021 11:30:03 +0000</pubDate>
      <dc:creator>Jared Lynskey</dc:creator>
      <category>Keyboard Shortcuts</category>
      <category>macOS</category>
      <category>Terminal</category>
      <category>Vim</category>
      <category>VS Code</category>
      <category>Chrome DevTools</category>
      <category>Productivity</category>
      <category>Developer Tools</category>
      <description>The Mac keyboard shortcuts I use as a programmer, checked against each app&#39;s docs: macOS windows and Spaces, Terminal, Vim, VS Code, Chrome DevTools and Slack.</description>
      <content:encoded><![CDATA[<p>These are the keyboard shortcuts I actually use as a programmer on a Mac: moving between windows and Spaces in macOS, Terminal, Vim, VS Code, Chrome DevTools and Slack. Nothing exotic, just the ones that have stuck. They&rsquo;re all default bindings, checked against each app&rsquo;s own documentation, so if you&rsquo;ve remapped keys yours may differ. On many Mac keyboards the top row does brightness and volume, so for anything with an <code>F</code> key you may need to hold <code>fn</code> as well.</p>

<h2 class="relative group">Mac
    <div id="mac" class="anchor"></div>
    
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
        <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#mac" aria-label="Anchor">#</a>
    </span>
    
</h2>
<ul>
<li><code>ctrl</code> + <code>←</code> / <code>→</code> — move between Spaces (desktops)</li>
<li><code>ctrl</code> + <code>↑</code> — open Mission Control</li>
<li><code>cmd</code> + <code>tab</code> — switch between apps</li>
<li><code>cmd</code> + <code>`</code> — switch between windows of the app you&rsquo;re in</li>
<li><code>ctrl</code> + <code>cmd</code> + <code>f</code> — toggle full screen, in apps that support it</li>
<li><code>cmd</code> + <code>w</code> — close the front window (<code>option</code> + <code>cmd</code> + <code>w</code> closes all of the app&rsquo;s windows)</li>
</ul>

<h2 class="relative group">Vim
    <div id="vim" class="anchor"></div>
    
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
        <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#vim" aria-label="Anchor">#</a>
    </span>
    
</h2>
<ul>
<li><code>vimtutor</code> — Vim&rsquo;s built-in tutorial, run it straight from your shell</li>
<li><code>v</code> — visual mode, selecting by character</li>
<li><code>V</code> — visual mode, selecting whole lines</li>
<li><code>ctrl</code> + <code>v</code> — visual block mode, selecting a rectangle of columns</li>
<li><code>y</code> — yank (copy) the selection</li>
</ul>

<h2 class="relative group">Terminal
    <div id="terminal" class="anchor"></div>
    
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
        <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#terminal" aria-label="Anchor">#</a>
    </span>
    
</h2>
<ul>
<li><code>sudo !!</code> — re-run the last command with sudo (that&rsquo;s the shell&rsquo;s history expansion, so it works in zsh or bash in any terminal app)</li>
<li><code>cmd</code> + <code>t</code> — new tab</li>
<li><code>cmd</code> + <code>n</code> — new window</li>
<li><code>cmd</code> + <code>w</code> — close the tab; <code>shift</code> + <code>cmd</code> + <code>w</code> closes the window</li>
<li><code>ctrl</code> + <code>tab</code> / <code>ctrl</code> + <code>shift</code> + <code>tab</code> — next / previous tab</li>
<li><code>cmd</code> + <code>d</code> — split the window into two panes</li>
<li><code>shift</code> + <code>cmd</code> + <code>d</code> — close the split pane</li>
</ul>

<h2 class="relative group">VS Code
    <div id="vs-code" class="anchor"></div>
    
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
        <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#vs-code" aria-label="Anchor">#</a>
    </span>
    
</h2>
<ul>
<li><code>cmd</code> + <code>p</code> — Quick Open: jump to any file by typing part of its name</li>
<li><code>shift</code> + <code>cmd</code> + <code>p</code> — the Command Palette (<code>F1</code> works too)</li>
<li><code>cmd</code> + <code>d</code> — add the next occurrence of the selection, so you can edit them all with multiple cursors</li>
<li><code>option</code> + click — add a cursor where you click (<code>option</code> + <code>cmd</code> + <code>↑</code> / <code>↓</code> adds one above or below)</li>
<li><code>option</code> + <code>↑</code> / <code>↓</code> — move the current line up or down</li>
<li><code>shift</code> + <code>option</code> + <code>↑</code> / <code>↓</code> — copy the current line up or down</li>
<li><code>cmd</code> + <code>/</code> — toggle a line comment</li>
<li><code>F12</code> — go to definition</li>
<li><code>ctrl</code> + <code>`</code> — show or hide the integrated terminal</li>
</ul>

<h2 class="relative group">Chrome DevTools
    <div id="chrome-devtools" class="anchor"></div>
    
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
        <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#chrome-devtools" aria-label="Anchor">#</a>
    </span>
    
</h2>
<ul>
<li><code>option</code> + <code>cmd</code> + <code>i</code> — open DevTools on whichever panel you used last</li>
<li><code>option</code> + <code>cmd</code> + <code>j</code> — open DevTools on the Console</li>
<li><code>shift</code> + <code>cmd</code> + <code>c</code> — inspect element: click anything on the page to jump to it in the Elements panel</li>
<li><code>shift</code> + <code>cmd</code> + <code>p</code> — with DevTools open, the Command Menu (type &ldquo;screenshot&rdquo;, for example)</li>
<li><code>shift</code> + <code>cmd</code> + <code>r</code> — hard reload, fetching the page&rsquo;s files again instead of using the cache</li>
</ul>

<h2 class="relative group">Slack
    <div id="slack" class="anchor"></div>
    
    <span
        class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none">
        <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#slack" aria-label="Anchor">#</a>
    </span>
    
</h2>
<ul>
<li><code>cmd</code> + <code>k</code> — jump to a conversation: type part of a channel or person&rsquo;s name and press Enter (in recent versions the same box searches too)</li>
<li><code>F6</code> — move focus to the next section (<code>shift</code> + <code>F6</code> goes back)</li>
<li><code>cmd</code> + <code>/</code> — see all of Slack&rsquo;s shortcuts</li>
</ul>
]]></content:encoded>
      <media:content url="https://jared.lynskey.co.nz/en/posts/2021/2021-12-19-commands/featured.jpeg" medium="image" type="image/jpeg" />
    </item>
  </channel>
</rss>
