DEV Community

Brad Beggs
Brad Beggs

Posted on

VS Code - Vertical Rulers for Prettier Code?

What is a Vertical Ruler in VS Code?

In VS Code, the vertical ruler is a static, customizable design element to give your code an unenforced right-side boundary, meaning it won’t word-wrap your code

This vertical ruler isn’t for measurements, unlike in Word, Illustrator, or other design/editing packages.

Orange, gray, purple rulers

Orange, gray, and purple rulers. Note lines 21, 22 are not impacted by the rulers.

Text is not impacted by rulers, as the example above shows.

Why?

A vertical ruler provides an easy means to make your code readable by not being too wide.

Some languages (like Python or Drupal) have style guides for max characters per line. (79 characters for Python).

While others, like Javascript, have a very loose set of guidelines but nothing suggesting a max character count per line.

How

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

Step 1 - Open settings.json

  • Mac: Press Shift Command P
  • non-macOS: press Ctrl P

This opens the file search.

Type in settings.json and select the file to edit it.

Step 2 - Add the following to the last line inside the json object:



"editor.rulers": [
   {
     "column": 80,    // spacing of 1st column from left
     "color": "#ff9900"   // orange, Go Vols!
   },
     100,  // 2nd ruler with no color option
   {
    "column": 120,      // third ruler
    "color": "#9f0af5"  // purple, go Pirates! 
   },
],


Enter fullscreen mode Exit fullscreen mode

The above implementation is language-agnostic and becomes the default "always-on" ruler(s). It is possible to have both the default and language-specific at the same time.

For a specific language, change the language name in the ‘[ ]’ brackets to your preferred language:



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


Enter fullscreen mode Exit fullscreen mode

Add one for each language.

Step 3 - Enjoy readable code

Make sure to save your changes and enjoy.

Pretty Code. Not too wide. Just right.

Pretty Code. Not too wide. Just right.

Feedback?

Have thoughts or advice on the above implementation or other useful VS Code settings?

If so, drop a note. I'd love to hear and see your examples, explanations, and other details to clarify how/why/when.

Resources

February 2020 VS Code Feature.
MDN Javascript Guidelines
Python Style Guide - PEP8

Top comments (4)

Collapse
 
doylemark profile image
doyle-mark • Edited

Enforce max line length with your linter.. This is not sustainable in a collaborative environment

Collapse
 
brad_beggs profile image
Brad Beggs

How so/why not? <--curious, not argumentative. :)

Collapse
 
dehin profile image
David

If this is still relevant, I would think because for languages that don't have strict rules on line length, using linting settings in a collaborative environment would cause things like comments changes and unnecessary commit changes.

Example: I use a desktop, personal laptop, and work laptop to work on personal projects. While I plan to, I haven't yet amalgamated all the different user settings. As a result, a Python file, for example, might get added to a commit solely because the linter on the work laptop is set to 80 and on the personal to 75. This could cause the docstrings describing the various functions in that file to be "re-arranged". While I might make an actual change to that file, when I save at the line length change is applied to the docstrings, those changes will also get pushed.

Now, imagine this amongst a whole team! Unless an organization or team leader sets out specific style guidelines and enforces it so everyone is using the same settings file, this could cause a very messy commit history.

Collapse
 
adityakrcodes profile image
Aditya Kumar

Which theme are you using here?