Do You Know About Rulers in Visual Studio Code?
They are extremely helpful as a guide while coding
Visual Studio Code is one of the best free coding editors out there.
It can be configured in many many many many ways. (This emphasis was really necessary).
We can change the color theme of the editor, the set of icons therein, the font, the font’s size, the line height; configure key bindings with given actions; set up various kinds of tasks; and much more.
There are so many things configurable in Visual Studio Code that we can easily write an article with over 10,000 words to just slightly explain some of them; let alone a detailed explanation of every configuration.
In this article, we’ll learn about an extremely helpful feature of the Visual Studio Code editor — rulers.
What are rulers?
In simple words:
A ruler is simply a visual guide to help us determine right when we touch a character limit for a line of code.
That was too much, wasn’t it?
Let’s take it step-by-step…
A ruler is a visual guide, i.e. it’s actually displayed visually in the editor window, and it helps us determine ‘something’.
That ‘something’ is when we touch a character limit for a line of code.
Suppose we are writing a long line of code that has over 100 characters. If we have a ruler placed at the 60th character position, then it could help us see exactly when we hit the 60-character limit while typing that line.
That’s why we say that a ruler is a guide.
Rulers are extremely useful when writing code. Often times while coding, we tend to type certain lines that just keep on going forever and forever.
Having a ruler means that we can notice exactly when we reach the maximum character limit for that line and thus type the subsequent piece of code on a new line.
Overall, this keeps the code neat and readable.
How to add a ruler?
Adding a ruler in Visual Studio Code is extremely simple.
In quick words, we just ought to head over to the settings.json file for the current workspace or the current user, add the property "editor.rulers" in there, and then set it to an array of integers, each of which specifies a ruler position.
In detailed words, the following is how we ought to proceed.
Step 1. Open the settings.json file
Open up Visual Studio Code, and then click on the settings icon at the bottom-left corner, as highlighted below:
Select the Settings option from the box that appears thereafter, as highlighted below:
This opens up a window similar to the following:
In the top-left corner of this window, as highlighted in the figure above, there are two options namely User and Workspace.
- User applies given settings throughout the current Visual Studio Code installation. You could think of User as global settings.
- Workspace applies given settings just to the current workspace. A workspace is simply a folder that we open up in Visual Studio Code to act as the entry point of a given project. If we open up different folders in Visual Studio Code, we, in effect, open up different workspaces.
If you keep the User tab selected, you’d be applying rulers throughout all workspaces that you currently have in your Visual Studio Code installation.
On the other hand, if you keep the Workspace tab selected, you’d be applying rulers only to the current workspace.
We’d apply rulers while keeping the User tab selected (as shown above, there is a line beneath User indicating that it is selected), as we want these helpful guides in every single code file that we edit in Visual Studio Code.
Now while the User tab is selected, we’ll open up its corresponding settings.json file by clicking on the small file icon at the top-right corner of the window, as shown below:
This opens up the settings.json file for the current User setting, as shown below:
Depending on your setup, this file might already have some code in it. We also have some code in our settings.json file to start with (because of some previous configurations we did).
Whether the settings.json file has some code already in it or not shouldn’t concern us. We are only interested in adding a new setting in the file in order to set up a ruler.
Step 2. Add an “editor.rulers” property
The next step is to add an editor.rulers property to the JSON file we just opened up in the previous step.
editor.rulers simply holds an array containing integers, each of which represents a ruler’s position in the editor. That’s why it’s called editor.rulers!
The position is in terms of the number of characters from the beginning of a given line. The position could also be thought of as a column number.
That is, the integer 60 would mean that the ruler would appear exactly after 60 characters in the editor or that it would appear right in the 60th column.
Note that here we assume that you know how to work with JSON or, in general, know how to work with JavaScript object literals.
Go on at the end of the code, right before the ending right-brace character (}), and add the editor.rulers property, setting its value to an empty array.
After this, depending on how many rulers you desire, add integers to the array, each of which represents the position of a ruler in the editor.
We’ll only add one ruler and that would be at the position 80, as shown below:
Now you might be thinking, why 80?
Well, in the world of coding, the 80-character bound is a pretty conventional limit for characters of a single line in a piece of code.
That’s it.
Once, you’ve typed in the value 80, go ahead and save the settings.json file.
Now, in a new tab, open a new code file.
One quick way to open up a new code file is to double-click at the top of the editor window, right next to the box that represents the current tab.
Step 3. Celebrate
And Voila!
You can now witness the ruler that you just added above:
Changing the color of the ruler
We stated above that editor.rulers is an array of integers. Precisely speaking, this is wrong.
It would be better to say that editor.rulers is an array of items that can be either of the following:
- An integer which represents the position where a ruler should be added.
- An object, containing two properties, namely
columnandcolor, that represents the position where a ruler should be added and its color, respectively.
In the following code, we add another ruler to our previous editor.rulers property, this time using an object and not an integer.
The position is set to 90 while the color is set to #ffcc00 (a bright yellow color).
Let’s save the file and then witness our new ruler.
Note: Often times, changes to settings don’t show up immediately in the current Visual Studio Code window. You’d have to restart Visual Studio Code in order to get those changes to be applied.
That’s it
In the end, we’d like to ask a simple question?
Did you know about rulers in Visual Studio Code before this article, and did you ever use them?
if (yes) { console.log('Good 👍') }
else { wouldYouNowUseThem('❔') }
I hope you enjoyed reading this article.
More of our articles
Level Up Coding
Thanks for being a part of our community! Before you go:
- 👏 Clap for the story and follow the author 👉
- 📰 View more content in the Level Up Coding publication
- 🔔 Follow us: Twitter | LinkedIn | Newsletter
🚀👉 Join the Level Up talent collective and find an amazing job
