Byte Sized Blog

Streamline Academic Writing with VS Code + Zotero + Git

Check this out

Pretty neat, right?

What you just saw above was the ability to save an article off the web, and immediately cite it in your paper. This guide will show you how to configure Visual Studio Code (VS Code), Git, and Zotero together to automate your workflow and make writing a breeze. Most likely, the big question on your mind is “Why should I switch from Overleaf?”, so consider the following:

If any of this sounds interesting to you, then read on!

Pre-requisites

This guide is aimed at macOS users, but the References section includes some resources for Windows users. Some other requirements include:

  1. A basic understanding of writing in LaTeX.
  2. A free Zotero account, with the desktop app and browser “connector” extension
  3. VS Code downloaded.

Table of Contents :mag_right:

Getting a LaTeX Distribution :file_folder:

All the work will be done on VS Code, but we need a distribution of LaTeX behind the curtain for VS Code to use. TeXLive is strongly recommended for working with LaTeX-Workshop, a VS Code extension we’ll set up later, and the easiest way to do this for macOS machines is with MacTex. You can find the download link here, but note this distribution will take almost 10 GB of space.

Once the MacTeX.pkg is downloaded, open it and follow the install instructions. At the Installation Type step, select Customize and make sure only TeXLive-2025 is selected. There is no issue installing the other GUI components, but we will functionally replace them with VS Code, so they aren’t needed.

LaTeX and Git on VS Code :gear:

With our LaTeX ready, we need to get VS Code to work with it. The power of VS Code’s customization and tools come from its Extensions Marketplace, which we’ll demonstrate how to access now.

  1. Open the primary side bar (View > Appearance > Primary Side Bar), and click the extensions icon.
  2. From there, enter James-Yu.latex-workshop in the search bar, select the result, and click Install.
    • We’ll put it to use later in this guide, but we need to prepare Zotero first.

Screenshot of VS Code, with the left sidebar open to the extensions tab, and James-Yu.latex-workshop entered in the extensions search bar. The editor window has the LaTeX Workshop extension open

While we’re here, install these other extensions to boost our Git capabilities:

  1. Github Repositories (GitHub.remotehub)
  2. Github Pull Requests (GitHub.vscode-pull-request-github)
  3. GitLens (eamodio.gitlens)

Setting up Zotero :books:

As you saw in the intro, we want our setup to auto-export a newly saved citation to wherever our project is. To do this we'll need Better BibTeX, which has easy install instructions here. As mentioned, make sure you are installing this in the standalone Zotero application. If you're new to Zotero and haven't made a collection yet, open the app and click the Add Collection icon in the upper-left corner of the window. Now in your browser when you find a cool new paper, like this one on the GlueX Detector, you can use the Zotero browser extension to easily save it to your collection.
Screenshot showing the Add Collection icon placed above the My Library drop-down menu

Screenshot of an arxiv page, with the Zotero browser extension GUI open in the upper right-hand corner

Working with a Sample Document :page_with_curl:

To best see the capabilities of Git and Zotero, we’ll need a LaTeX document to test it out on.

The LaTeX-Workshop extension includes a LaTeX tab in the Primary Side Bar. Select it, and you’ll notice among other options the button to $\textcolor{green}{\triangleright}$ Build LaTeX project. Whenever you make changes to your project, click this to enact those changes and create the main.pdf output file. If you’re most familiar with Overleaf, this is equivalent to the Recompile option. If you want to mimic the Overleaf style view, use the Split Editor Right button and position your output pdf to the right, like below.

Screenshot of VS Code's split editor view with the main.tex file on the left, and the output pdf on the right

Now that we know our LaTeX build works, let’s take a quick look at what Git can do for us.

VS Code Git Basics

If you’ve made any edits to your document, you may have noticed an $\textcolor{#9E8D71}{\text{M}}$ appear next to your filename, and some textures appear next to the line numbers that can expand to show you changes.

Screenshot of VS Code with the sidebar open to Source Control, and changes made to the LaTeX document highlighted

If you navigate to the Source Control tab in the primary side bar, you’ll see that file is now listed under Changes. This tab is essentially your git status view, where you can view changes and commit them, and push or pull commits from a remote repository. You can access old commits, allowing you to view and even revert to older versions of your project. If you’re entirely new to Git, VS Code has a guide going over the basics.

Zotero in VS Code

We’re in the home stretch now, only a few more steps to go.

  1. In Zotero, right-click on a collection and select Export Collection, which opens a dialog box.
  2. Select Better BibTeX for the format, and ensure Keep Updated is selected.
  3. Save the file in your LaTeX project, or if you’re using the sample project from earlier you can replace the bibliography.bib file there with it.

Now whenever a paper is added to the collection in Zotero, it will sync with this file and the paper will be available to cite! For more info on how the auto-export works, details can be found here. Since better BibTeX will auto-generate citation keys, they can make it a little clumsy to find your paper, but the Zotero LaTeX extension (bnavetta.zoterolatex) can fix that.

With the extension added and the Zotero app open in the background, go to your LaTeX project in VS Code and press Alt+z to open a dialog box that allows you to search for any papers in your library.

Screenshot of VS Code with a Zotero search dialog box open

Congratulations! :tada:

You are all done, and now have LaTeX capabilities with automated citation handling and built-in version control with Git, all in VS Code! Below I’ve listed some other tips that are not necessary, but you may find useful for this setup. If you have any comments / questions please feel free to reach out to me via email at scheuer.ks@gmail.com. Happy writing!

Tips :bulb:

Useful VS Code Extensions:

Settings & Tricks

References