Skip to content

Editing in VS Code

Jump to bottom
Alexander Refsum Jensenius edited this page Sep 21, 2026 · 2 revisions

The browser editor is fine for one file at a time. Once you are editing several files, adding images in bulk, or want to see the site as you write, it is worth moving to your own machine.

This page gets you there without using the command line. Everything happens through buttons in VS Code.

You should be comfortable with Your First Edit before starting here.

Why bother

  • Search and replace across the whole site
  • Editing several files without committing between each one
  • Drag and drop for images
  • Spell checking
  • A live preview of the site, once you add Running the Site Locally
  • GitHub Copilot, which is the subject of Using GitHub Copilot

Step 1: install VS Code

Download it from code.visualstudio.com and install it. It is free, and it runs on Windows, macOS and Linux.

Step 2: install Git

VS Code needs Git underneath to talk to GitHub.

On Windows, download it from git-scm.com and accept every default in the installer.

On macOS, open Terminal and type git. If it is not installed, macOS offers to install the developer tools for you. Click through that and you are done.

On Linux, use your package manager, for example sudo apt install git.

Restart VS Code afterwards so it notices.

Step 3: sign in to GitHub

In VS Code, click the accounts icon at the bottom of the narrow left-hand bar, then Sign in with GitHub. Your browser opens, you approve, and it hands control back.

This saves you from typing passwords or juggling access tokens later.

Step 4: get a copy of the website

In VS Code, press Ctrl+Shift+P, or Cmd+Shift+P on a Mac. This opens the command palette, which is how you reach everything in VS Code.

Type clone and choose Git: Clone. Paste this address:

https://github.com/MishMash-Norway/mishmash-web.git

Choose a folder to keep it in. VS Code downloads the site, which takes a minute, and offers to open it. Say yes.

You now have the entire website on your machine. Cloning is a one-off; from here on you update the copy rather than downloading it again.

Step 5: install two useful extensions

Click the extensions icon in the left-hand bar and search for these:

  • Markdown All in One: preview, table formatting, list continuation
  • YAML: catches frontmatter mistakes as you type, which is the most common cause of a failed build

Neither is required, and both save time.

The four things you do from now on

Pull before you start

Someone else may have changed something, and the nightly script updates the people directory every morning at 05:00 UTC. Before editing, get those changes.

Click the source control icon in the left-hand bar, the one that looks like a branching line. Click the ... menu at the top of that panel and choose Pull.

Do this every time you sit down to work. Skipping it is what causes conflicts later.

Edit

Open files from the explorer in the left-hand bar and edit them. Nothing special: it is a text editor.

Commit

Open the source control panel. Your changed files are listed under Changes.

Click a file to see exactly what you changed, old version on the left, new on the right. Read this before committing; it catches accidents.

Hover over Changes and click + to stage everything, or click + on individual files to stage only those. Staging is how you say which changes belong in this commit.

Type a message in the box at the top describing what you did, then click Commit.

Push

Committing saves the change on your machine only. To send it to GitHub, click Sync Changes, the button that appears after committing.

Two minutes later it is live, exactly as with the browser editor.

Working safely once you are here

Everything above commits straight to main, which means straight to the live site.

That is a reasonable default for text fixes. For anything larger, such as a new page, a restructured section or a change to a layout or to CSS, switch to a branch so the quality checks run before publication. VS Code makes this two clicks, and Branches and Pull Requests shows how.

If something looks alarming

The word conflict means you and someone else changed the same lines and Git wants you to choose. VS Code shows both versions with buttons marked Accept Current Change and Accept Incoming Change. Pick the right text, save, commit. It is less dramatic than it looks.

If you get stuck badly, nothing is lost: the version on GitHub is intact. You can delete your local folder and clone it again from step 4. Any committed and pushed work is safe.

Next

Clone this wiki locally