Adding a Code Ruler

One of our recommendations to keep code looking clean is to limit the character counts of your lines of code to around 80 characters.

...but that is an exceptionally tedious task, counting out every line of code to make sure it hasn't gone past 80 characters.

However, Visual Studio Code lets you set "rulers" in your code editor, much like how you could set guides and rulers in Photoshop and Illustrator. It's just a bit of a more manual process than in those applications.

Let's find out how we can set up that ruler, so you can make your code cleaner without having to think about it!

Configuring your Code Editor

75, 76, 77...shoot, lost count...1, 2, 3....

1. It's a bit of a trek to find your way to the Settings page that allows you to configure a code ruler in Visual Studio Code (and its also a slightly different path depending on whether you're using a PC or a Mac).

   For PC Users:

   • Click on the File menu at the top left.
   • Hover over Preferences.
   • Click on Settings to open up the Settings page.

   For Mac Users:

   • Click on the Code menu at the top left.
   • Hover over Preferences.
   • Click on Settings to open up the Settings page.

   In the search bar at the top of the Settings page, type "ruler".

   Then go down to the section called "Editor: Rulers" and click the "Edit in settings.json" link.

   This will open up a JSON code file.

   DON'T PANIC! The code will look quite foreign to you, and that's okay. We'll show you exactly what you need to modify.

   

2. In the settings.json file, you will want to find the setting called "editor.rulers".

   There may be more or less other settings in your own settings.json file compared to the screenshot. That's okay, and will not change anything!

   There will be square brackets [ ] after that.

   Inside the square brackets, just type the number 80.

   No quotes, no periods, nothing else: just the number 80, exactly like in the screenshot.

   Finally, save the file.

   If you properly saved it, there should NOT be a circle to the right of the settings.json tab. Instead, there should be an 'x'.

   

3. Now when you go back to any of your code files, you should see a thin line at the 80 character mark in your code!

   This line doesn't prevent you from typing past it; it's literally just a guide line, so you're aware of when your code is longer than 80 characters.

   That's it! Well done!

   

Now you have a ruler showing when you've reached 80 characters in your code!