How to set up clang-format in Visual Studio Code in a Vagrant environment (GeorgiaTech GIOS)

Your code will be automatically formatted in a standardized way upon saving in visual studio code.

Source Image

If you’re like me, a CS noob, this took me several hours to figure out. There isn’t very good documentation on how to do this. Which might mean it’s so easy that no one needs a tutorial… but hopefully you find this helpful. I definitely would have appreciated a tutorial.

Introduction: Target Audience

The target audience is mainly for current OMSCS Georgia Tech students in the Graduation Introduction to Operating Systems (CS 6200 GIOS) course. The goal of this guide is to teach you how to set up your VS Code application to automatically format your C code whenever you save.

The main target audience is for Windows users who are using a vagrant file to run a virtual machine. The minimum assumption will be that VS Code is already set up and connected via SSH to the virtual machine.

The Guide

Example of end result: format upon saving

In the VM shell, you want to search the available clang-format versions. This command will list all the available versions.

Install the version you want. In my case, I just chose the latest one, clang-format-9.

After installation, you’ll want to note down the location it was downloaded to. You can find out by typing the following command:

This command will return all the locations of a file that are named “clang-format-9” delimited by spaces. In my case, I got 2 results. You only care about the location of the file that is named exactly as your command. So in my case, I don’t care about the file that has the .1.gz extension.

So the location of my file is:

Go to VS Code’s extension market place and install the clang-format by xaver.

The first step is to find and open the vscode settings.json file. You can find it by navigating to File → Preferences → Settings. This will open a new window. At the top right corner, click on the 3rd icon from the right (see picture below).

This will open up your settings.json file. You’ll want to add some code in there to set up some formatting functionality.

  1. Define the location of the clang-format
    “clang-format.executable”: “clangFormat_location_noted_in_previous_step”
  2. Define your clang-format style. I just used Google’s.
    “clang-format.style” : “google”
  3. Set your editor to format on save
    “editor.codeActionsOnSave” : { “source.fixAll” : true },
    “editor.formatOnSave” : true
  4. Explicitly choose the clang-format format for the C language
    “clang-format.language.c.enable”: true,
    “[c]”: {
    “editor.defaultFormatter”: “xaver.clang-format”,
    “editor.wordBasedSuggestions”: false,
    “editor.suggest.insertMode”: “replace”, “editor.semanticHighlighting.enabled”: true
    }

Below is a copy of the code if you would like to copy and paste.

Common Mistakes

A common mistake might be installing clang-format on your Windows machine while trying to format code in your Vagrant virtual machine. This is what caused me struggle for hours on end. I feel like this isn’t that intuitive because I’m running VS Code on my Windows machine and I’m just SSH’d into the VM. I thought VS Code would’ve looked for the clang-format executable on my native machine.

But I guess the VS Code formatter will search for the format executable in the environment… not the native machine.

Conclusion

That’s it! I hope you found this helpful! Please feel free to add me on LinkedIn and provide some comments and feedbacks.

If you found this helpful, please feel free to share with your peers!

Mechanical Engineer — University of Texas at Austin #2018

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store