Relative Line Numbers in Visual Studio Code

# Relative Line Numbers in Visual Studio Code

Displaying line numbers as relative to the current cursor position is something you might be used to from using VIM.

You don't have to set up any external configurations or install any extensions to achieve this as the setting is natively supported.

To enable relative line numbers in Visual Studio Code:

1. Press Ctrl + Shift + P (or Command + Shift + P on macOS).

2. Type user settings and select Preferences: Open User Settings.

You can also open the settings screen by pressing Ctrl + , on Windows and Linux or Cmd + , on macOS.

3. Type editor line numbers and set the Editor: Line Numbers dropdown setting to relative.

If the setting is set to relative, the line numbers are displayed relative to the current cursor position.

Here is a short clip that demonstrates how this works.

The other possible options for the Editor: Line Numbers setting are:

• off - to not show line numbers at all.
• on - to show absolute line numbers.
• interval - to render line numbers every 10 seconds.

By default, the setting is set to on to show absolute line numbers.

Here is a clip that demonstrates what using absolute line numbers looks like.

# Enabling relative line numbers in settings.json

An alternative approach to enable relative line numbers is to do it in your global settings.json file.

1. Press Ctrl + Shift + P (or Command + Shift + P on macOS).

2. Type user settings json.

3. Click on Preferences: Open User Settings (JSON)

4. Set the editor.lineNumbers setting to relative.

Copied!
"editor.lineNumbers": "relative",

# Enable relative line numbers using a local settings.json file

You can also set the line numbers setting to relative for the specific project, in a local settings.json file:

1. In the root directory of your project, create a .vscode folder.

2. Create a settings.json file in the .vscode folder.

3. Add the following code to your settings.json file.

Copied!
{
  "editor.lineNumbers": "relative"
}

Once you set the setting to relative, line numbers will be displayed relative to the current cursor position for your current project.

Note that the settings you set in .vscode/settings.json are only applied to the current project (not globally).

If you want to apply the setting to the currently logged-in user, use the approach from the previous subheading.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Move a line or a selection Up or Down in Visual Studio Code
• Move the Sidebar or Terminal to the Right in VS Code
• How to Show and Set Line endings in Visual Studio Code
• VS Code: Sort Lines and JSON object properties
• Wrap Tabs to Multiple Lines in Visual Studio Code
• Place curly braces on a New Line in VS Code in JS and TS