Table of contents :
Visual Studio Code logo

4. VSCode, Settings.json file.

Not all settings have their own place on the settings tab. Many settings, especially many settings for plugins, can only be changed in the settings.json file.
You can find a definition of the json format in:
"Wikipedia, JSON file format."

Every VSCode setting is written to the default settings.json file. There is also a settings.json file for every user. The settings that do not have their own place on the settings tab, have to be written into this user settings file. This example comes from the wikipedia page:

Example of a settings.json file describing a person.
Example of a settings.json file describing a person.
Example of a settings.json file describing a person.

As you can see the file is neatly formatted too. Notice there are levels, ( firstname, lastname and address are the same level), and inside the address you can see a next level with for instance city and state.

I will not describe the formatting of the file itself, only show you the importance of the levels. You can see there are 2 types of brackets used:
{ } and [ ] , also notice the placement of comma signs, all lines inside a bracket, end with a comma, except the last line in that level.

If you are making changes to your settings.json file, keep those thinghs in mind. Before you save your changes, check opening and closing brackets and the correct placing of commas.
The examples in this article will have the correct syntax and are cut and paste ready.


Visual Studio Code, vertical rulers. (thin vertical help lines)


To help you find in which column the cursor is positioned, you can have 1 or more thin vertical help lines, (vertical rulers), inside the editing window of VSCode. This has to be changed in the settings.json file of VSCode.

If you want to know more about a json file, you can have a quick look at this very short tutorial:

JSON, short introduction on Youtube.
JSON, short introduction on Youtube.
JSON, short introduction on Youtube.

To set the rulers in VSCode, type rulers in the searchbox on the settings tab.

VSCode: editing the rulers in the settings.json file.
VSCode: editing the rulers in the settings.json file.
VSCode: editing the rulers in the settings.json file.

After clicking on Edit in settings.json we get:

VSCode: empty rulers definition in the settings.json file.
VSCode: empty rulers definition in the settings.json file.
VSCode: empty rulers definition in the settings.json file.

VSCode opens the settings.json file and fills it with an empty block for the rulers specification.

The cursor is already blinking where you have to type the text. Notice the little dot in the file tab, denoting the file has changed and needs to be saved.

This example will create 3 rulers, at positions: 80, 100 and 120. The ruler at position 100 gets the default color, the other 2 get colors of our own choice.

VSCode: add rulers to the settings.json file.
                    
                    "editor.rulers": [
                      {
                        "column": 80, // spacing of 1st column from left
                        "color": "#ff9900" // orange
                      },
                      100, // 2nd ruler with no color option
                      {
                        "column": 120, // third ruler
                        "color": "#008000" // green
                      }
                    ]
Every ruler has 2 possible parameters: the column in which the ruler is positioned, and a color value for the ruler itself. The color is not necessary, default is grey.

Now cut and past the above code so the file looks like this:

VSCode: rulers definition pasted in the settings.json file.
VSCode: rulers definition pasted in the settings.json file.
VSCode: rulers definition pasted in the settings.json file.

Again notice the dot in the file tab. Make sure the code looks like the one above, with the brackets and commas in the right places. Save the file and you will get:

VSCode: rulers according to new settings in settings.json file.
VSCode: rulers according to new settings in settings.json file.
VSCode: rulers according to new settings in settings.json file.

The rulers have no special function, so it does not mean codelines end at the position of a ruler. They are only there to help you see where you are on a line.

Visual Studio Code, problems when clicking in the scrollbar.


It turns out VSCode has a different way of handling a click in its scrollbar. The normal windows way of clicking in a scrollbar is to jump 1 page up or down in the source file, depending where you click.
Unfortunately, VSCode does not do that. It jumps to the position in the file, that is approximately the percentage of the lenght of the file that corresponds to the click position in the scrollbar.

There has been a change request for VSCode:
"Make Clicking in Scrollbars Move By Page #104923."
But at the time of this writing it is not yet documented very well. If you want VSCode to just move 1 codepage, while clicking in its scrollbar, you have to do the following:

Make sure VSCode is selected, so make sure the mouse is not inside another program, or the character combination will not have the correct effect. Choose the character sequence CTRL+SHIFT+P, that will open the command palette like this:

VSCode: open command palette with CTRL+SHIFT+P.
VSCode: open command palette with CTRL+SHIFT+P.
VSCode: open command palette with CTRL+SHIFT+P.

Inside the box type Open Settings

VSCode: Type: Open Settings, in command palette.
VSCode: Type: Open Settings, in command palette.
VSCode: Type: Open Settings, in command palette.

While typing you can see VSCode searching already, as in the above screenshot.

Now choose the command: Open Settings (JSON) and you will get:

VSCode: add line for scrollbar click change in settings.json file.
VSCode: add line for scrollbar click change in settings.json file.
VSCode: add line for scrollbar click change in settings.json file.

VSCode: change scrollbar click behaviour, in the settings.json file.
                    
                    "editor.scrollbar.scrollByPage": true
In this screenshot the correct line is already there, thats because in my VSCode it has already been changed.

Notice the extra comma in the line just before it !

If your file looks like the above you can save.
What I found was, that after saving I needed to restart VSCode for it to work.