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. Go to the Settings tab (if you're not there already).

   There are different ways to get there, but usually the easiest way is to find the cog wheel icon in the bottom left of the screen, click it, and then click "Settings".

   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 (CMD+S for Mac, CTRL+S for Windows).

   If you properly saved it, there should be a thin grey line that appears to the right.

   

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!