CODEWITHSUNDEEP
visual-studio-codeconfigurationvs-code-settings
nalply
nalply

Reputation: 28717

How can I have multiple vertical rulers in VS Code?

VS Code's default configuration for a ruler is demonstrated below.

"editor.ruler": 80

The issue I am having with the default VS Code configuration (as shown above) is that it only renders a single ruler. In the Sublime Text Editor I can render as many rulers as I like using the following Sublime configuration.

"rulers": [72, 80, 100, 120]

Is it possible to render multiple rulers in V.S. Code. If it is possible, What does a multi-ruler configuration look like in VS Code?

Upvotes: 1647

Views: 898328

Answers (13)

dude_on_fire
dude_on_fire

Reputation: 107

Go to Menu File -> Preferences -> Settings and add:

"editor.rulers": [preferred-value, preferred-value]

The color can be customized in:

{
  "workbench.colorCustomizations": {
    "activityBar.background": "#00AA00"
  }
}

Upvotes: 8

AKUMA no ONI
AKUMA no ONI

Reputation: 11809

 

Customizing VS Code's Char-len Ruler:

      The following answer is far more recent than the other answers provided for this question, therefore; it is important to note that this answer contains information & content not provided by any of the other answers. I have formatted the question below into 4 configurations. Each configuration builds on top of the last configuration, consequently; The first configuration is simple, and offers a simple result, whereas the last configuration is more complex and offers much more.

For your convenience, I have included images at the bottom of each configuration's example. The images allow you to view a configuration, then see the result that the configuration has. This is important, because without the images you would have to bounce back and forth between here & your editor to see what each configuration looks like.




Config #1 | The Obvious Single Ruler Config

The obvious setting is the setting that has been suggested many times over. I will mention it here, just because it is the correct place to start.

  • Add the following JSON Property to your settings.json file.
{
    "editor.rulers": [80]
}

PLEASE NOTE! It may be required that you reload the instance of VS Code (semantically speaking: some refer to this as reloading the window) being configured to get the newly added configuration to render as expected. (to see how to reload your window quickly, scroll to the end of this answer).

Once the configuration takes, your editor should look like this:

Image demonstrates the result when the editor.ruler setting in VS Code is configured with a single value



Config #2 | Multiple Rulers

Obviously the ruler takes an array as its assigned value. The array allows VSC users to add multiple rulers.

  • Be simply adding one value to the configuration in the last example (as shown in the snippet below) we can add another ruler.
{
    "editor.rulers": [80, 125]
}

The screen shot I took is a bit short, but it communicates the point well enough. You can see that there are now two vertical lines, rather than a single line. Many front-end developers opt for this configuration because 125 is often used as the preferred line-length for HTML, and 80 is the preferred line-length for JavaScript embedded in HTML documents.

Image demonstrates the result when the editor.ruler setting in VS Code is configured with more than one value




Config #3 | Coloring the Ruler

This configuration demonstrates the whimsy side of playing with VS Code's configuration; and the ruler is certainly one of the more whimsical editor-features that VS Code ships with. This configuration shows you how to color the configuration we used above. To be able to custom color the rulers, it is required that an additional setting be added to the configuration, take a look below:

{
    "workbench.colorCustomizations": {
        "editor-ruler.foreground": "#0099AA"
    },

    "editor.rulers": [80, 125]
}
Below you can see the awesomeness of the pacific blue color!

enter image description here




Config #4 | Coloring the Ruler so it works w/ Code

So, as awesome as beautiful pacific-blue rulers are, they are not always practical. The opaque — and in this case highly contrasted — rulers streak right behind are code which can greatly decrease the readability of your code. For this very reason, developers generally opt for a configuration that places a single ruler at the desired line length, however, there is another way. By adjusting the previous configuration ever so slightly, we can render the rulers in a way that is much less intrusive. Take a look at the configuration below.

Do you see the subtle change?
{
    "workbench.colorCustomizations": {
        "editor-ruler.foreground": "#0099AA33"
    },

    "editor.rulers": [80, 125]
}

Below demonstrates where the change was made:

  • Color used in the 3rd configuration:

    • "editor-ruler.foreground": "#0099AA"

  • Color used in the 4th configuration:

    • "editor-ruler.foreground": "#0099AA33"

The new configuration's adjusted chromatic value (the color/hue) renders transparently (or not at 100% opacity), in-other-words; the rulers are rendered to be partially transparent (approximately 25% transparency).

The change has a rather significant effect because opaque rulers hinder readability, and can distract the programmer from her code. A programmer may opt for transparent rulers because transparent rulers will allow her to measure the length of her code at any length intervals she chooses, without hindering the readability of the code.

See the transparent rulers below? You might want to click on the image to see the larger view.

Example shows a colored ruler in VS Code




Config #5 | The Ultimate Customized Ruler

The problem with transparent rulers is that they are not quite as fancy as the other rulers, fortunately, there's a way to get the best of both worlds. This example uses two images (or screen-shots): One image that shows the configuration, just like the other images you have been viewing above, and the other is a final image showing the configuration I use. The configuration I use is shown as a way to help put into perspective what you're able to accomplish with a good ruler configuration.

Below is a crazy sort of configuration...
{
    "workbench.colorCustomizations": {
        "editorRuler.foreground": "#00999922"
    },

    "editor.rulers": [
        20, 40, 40, 60, 60, 60, 60, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80
    ]
}

I KNOW CRAZY RIGHT?!


This configuration, looks nutter-butter, but it actually produces a very interesting, and highly customized sort of result. I really like this example because it offers a great demonstration of how the ruler array-property configuration works, and what can be accomplished with it.


Here is the result:

Multiple Transparent Rulers


Notice what is happening?

Each ruler is brighter than the last. The rulers are doing this because we are laying several transparent rulers over each other. With ever layer the rulers color becomes more saturated. This is an extremely fun effect to play with.



Like I said above, I will show you I use this effect to configure my environment:

Customized rulers in a customized environment


Note that I make all of the rulers very transparent except for the last two. This offers a snazy environment, while still keeping things practical. Having several rulers also helps me to format and organize my code. I am so use to having them now that I can hardly stand to work in an environment without them.

If I work on a project with a style-guide that enforces an 80 character limit, I often will place one line at 80, and another at 90. I write my code such that it breaks before, or at, 80 chars, however I don't like the 80 char limit personally, I feel that the standard should be 85 - 90 chars. 80 really makes developers feel like there pushed into a box. So if I don't like the way a line looks at 80, I will extend it to 90. Before I commit, I look at the file and I can quickly see everywhere I went over 80, I add line-breaks, the commit. then I use ctrl+z to reset the line breaks so the extend past 80.

Another purpose, Is when I comment, I prefer to end my comments at 70, it helps me visually distinguish between comments and code. When you have the extra lines, there is a good chance you'll start using them to do all sorts of your own little formatting customs.





The resource below only pertains to those who are in need of instruction on reloading there instance of VS Code.

RELOADING YOUR WINDOW IN VS CODE

To reload your window, press F1 to open the Quick-input Menu. You should see the menu drop open, type Developer: Reload Window, then select the Developer: Reload Window option from the drop-down menu.

Upvotes: 52

Jeff Widman
Jeff Widman

Reputation: 23472

In addition to global "editor.rulers" setting, it's also possible to set this on a per-language level.

For example, style guides for Python projects often specify either 79 or 120 characters vs. Git commit messages should be no longer than 50 characters.

So in your settings.json, you'd put:

"[git-commit]": {"editor.rulers": [50]},
"[python]": {
    "editor.rulers": [
        79,
        120
    ]
}

Upvotes: 464

Lohith
Lohith

Reputation: 934

Combining the answers of kiamlaluno and Mark, along with formatOnSave to auto-indent code for Python:

{
    "editor.formatOnSave": true,
    "editor.autoIndent": "advanced",
    "editor.detectIndentation": true,
    "files.insertFinalNewline": true,
    "files.trimTrailingWhitespace": true,
    "editor.formatOnPaste": true,
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.snippetSuggestions": "top",
    "editor.rulers": [
        {
            "column": 79,
            "color": "#424142"
        },
        100, // <- a ruler in the default color or as customized at column 0
        {
            "column": 120,
            "color": "#ff0000"
        }
    ]
}

Upvotes: 11

jialin wang
jialin wang

Reputation: 3670

Visual Studio Code: Version 1.14.2 (1.14.2)

  1. Press Shift + Command + P to open palette

    • For non-macOS users, press Ctrl+P

  2. Enter "settings.json" to open setting files.

  3. At default setting, you can see this:

    // Columns at which to show vertical rulers
"editor.rulers": [],

    This means the empty array won't show the vertical rulers.

  4. At right window "user setting", add the following:

"editor.rulers": [140]

Save the file, and you will see the rulers.

Upvotes: 76

RoKa
RoKa

Reputation: 135

I like this explanation. It also tells how to set different colors for more than one ruler.

Color and multiple vertical rulers are available in VS Code as of the February 2020 edition.

For example:

"editor.rulers": [
  {
    "column": 80,
    "color": "#ff9900"
  },
    100,
  {
   "column": 120,
   "color": "#9f0af5"
  },
],

To target a specific language:

"[ruby]": {
  "editor.rulers": [
    {
      "column": 100,
      "color": "#00ff22"
    }
  ]
}

Upvotes: 4

Victorino
Victorino

Reputation: 1641

I got a last version for today of VS code "1.83"

This is what is works for me w3schools.

or you can do this like this : enter image description here

Upvotes: 0

Ahmed Taifour
Ahmed Taifour

Reputation: 21

if you're using Flutter then you need to edit the ruler for dart, you'll navigate to the file from RUN command: %APPDATA%\code\User\settings.json

and set the ruler to 0

like in the picture.settings.json

Upvotes: 1

raccoon
raccoon

Reputation: 559

To expand on the above, you can set multiple rulers and colors for each ruler. The default color appears to be "#5a5a5a", and if you tack on two additional digits to the end you can adjust its transparency to make some rulers more faint than others.

Here are my rulers, defined in a concise manner that's easier to edit.

"editor.rulers": [
    {"column":   0, "color": "#5a5a5a80"}, // left boundary is 50% opaque
    {"column":   2, "color": "#5a5a5a20"}, // tab stops are 12.5% opaque
    {"column":   4, "color": "#5a5a5a20"},
    {"column":   6, "color": "#5a5a5a20"},
    {"column":   8, "color": "#5a5a5a20"},
    {"column":  10, "color": "#5a5a5a20"},
    {"column":  40, "color": "#5a5a5a20"}, // center line
    {"column":  79, "color": "#5a5a5a20"}, // right rule minus one
    {"column":  80, "color": "#5a5a5a80"}, // right rule
    {"column": 120, "color": "#5a5a5a40"}  // extra right rule
],

Upvotes: 43

Mark
Mark

Reputation: 180541

In v1.43 is the ability to separately color the vertical rulers.

See issue Support multiple rulers with different colors - (in settings.json):

"editor.rulers": [
  {
    "column": 80,
    "color": "#ff00FF"
  },
  100,  // <- a ruler in the default color or as customized (with "editorRuler.foreground") at column 100
  {
    "column": 120,
    "color": "#ff0000"
  },
]

To change the default color for a ruler:

"workbench.colorCustomizations": {

  "editorRuler.foreground": "#fffa"   
            // or "#ffffffaa" - the a's are alpha transparency values
}

Upvotes: 179

lava
lava

Reputation: 7333

  1. File -> Preferences -> Settings Or cntrl+,
  2. type "rulers" and click Edit Setings.json

enter image description here 3. Add the size value by ',' As you wish

enter image description here Like this(Gif)

enter image description here

Upvotes: 16

Dimitar Asenov
Dimitar Asenov

Reputation: 26836

Visual Studio Code 0.10.10 introduced this feature. To configure it, go to menu File → Preferences → Settings and add this to to your user or workspace settings:

"editor.rulers": [80,120]

The color of the rulers can be customized like this:

"workbench.colorCustomizations": {
    "editorRuler.foreground": "#ff4081"
}

Upvotes: 2629

avpaderno
avpaderno

Reputation: 29669

With Visual Studio Code 1.27.2:

  1. When I go to File > Preference > Settings, I get the following tab

    Screenshot

  2. I type rulers in Search settings and I get the following list of settings

    screenshot

  3. Clicking on the first Edit in settings.json, I can edit the user settings

    screenshot

  4. Clicking on the pen icon that appears to the left of the setting in Default user settings I can copy it on the user settings and edit it

With Visual Studio Code 1.38.1, the screenshot shown on the third point changes to the following one.

enter image description here

The panel for selecting the default user setting values isn't shown anymore.

Upvotes: 204

Related Questions