How to Hide or Show Line Numbers in Visual Studio Code

Prefer video tutorials?

You can watch a video version of this tutorial on my YouTube channel:

If the video helps you, you can say thanks by liking and subscribing. Feel free to ask questions in the comments section too! 🙂

Step 1: Install Settings Cycler

Go to the VSCode Extensions tab and search for Settings Cycler. This extension allows cycling through VSCode settings using keyboard shortcuts.

Click install.

Step 2: Configure settings.json

Open up your settings.json file, and add this code inside the curly braces of your default/existing object { ... }:

    "settings.cycle": [{
        "id": "lineNumbers",
        "values":[
            {
                "editor.lineNumbers": "off",
                "editor.folding": false,
                "editor.glyphMargin": false
            },
            {
                "editor.lineNumbers": "on",
                "editor.folding": true,
                "editor.glyphMargin": true
    
            }
        ]
    }],

Remember to save the file, before you move on.

Step 3: Create line number keybinding

Open up your VSCode keybindings.json file:

• Mac: CMD + SHIFT + P > Open Keyboard Shortcuts (JSON)
• Windows: CTRL + SHIFT + P > Open Keyboard Shortcuts (JSON)

You may or may not have other configurations in this file.

If you don’t, you’ll have something like this:

// Place your key bindings in this file to override the defaultsauto[]
[]

Now add this object inside the brackets []:

{
    "key": "cmd+l",
    "command": "settings.cycle.lineNumbers",
    "when": "editorFocus"
}   

As a reference, here’s my keybindings.json file:

// Place your key bindings in this file to override the defaultsauto[]
[
    {
        "key": "cmd+l",
        "command": "settings.cycle.lineNumbers",
        "when": "editorFocus"
    }   
]

You’ll notice that my keybinding is CMD + L. You can choose whatever you want, as long as it’s not already taken.

Save your file, and now you should be able to toggle line numbers on/off with whatever keybinding you added in your keybindings file.

Alternative keybinding set up

If the above doesn’t work or confuses you, you can try this approach instead, since it’s more visual (the result will be the same).

Open up your keybinding settings (not the JSON file):

• Mac: CMD + SHIFT + P > Open Keyboard Shortcuts
• Windows: CTRL + SHIFT + P > Open Keyboard Shortcuts

Inside the keybindings window, search for “linenumber” and it should automatically show up (if you remembered to save your file in Step 2).

Click on the + button, and type the keybinding you want to show/hide (toggle) line numbers. I use CMD + L (on Mac) but it’s up to you:

Make sure you don’t pick a keybinding that is already assigned to something else (VSCode will tell you), at least not if it’s an important part of your workflow.

After assigning your keybinding, you should be able to toggle line numbers on/off with your specified key combination.