Eliminating the need for scrolling right in the V.S. Code editor

Question

How Can I Configure V.S. Code to Wrap lines before the viewport ends?

---

        V.S. Code places the end of long lines beyond the viewport, in other words; when the length of a line exceeds the length of the editor's viewport, the editor places the line in an area that is not visible, causing me to keep having to scroll right to see the entire script that I have typed — it's very counter productive. I would like to eliminate the need for scrolling right altogether, by configuring V.S. Code to adapt to the size of the app and go from top to bottom according to the width of the editor's viewport.

---

Here is a photo that demonstrates the issue:

It demonstrates how I have to keep scrolling right to view the entirty of a line that exceeds the length of the viewport.

Answer 1

Eliminate Horizontal Scrolling in the VS-Code Editor

This topic (or question) is more involved than some people might think. Below are the settings that I suggest using to eliminate horizontal scrolling, and for wrapping lines at the viewport. Some of the settings may seem odd, but it is important to include all settings that affect what ever it is your trying to configure, in this case, line wrapping, tab wrapping, and horizontal scrolling. All of the settings that I have added to my example are explained below the code block — I describe every setting that I include.

Configuring V.S. Code in such a way, that the need for horizontal scroll bars (or for scrolling horizontally) is eliminated altogether, the editor will need to be configured so that lines wrap at the viewport, and tabs too will wrap at the viewport. Any settings below that do not achieve this, are configured to make sure that the configuration is not overridden by related settings. If some of the settings look familiar, it is because some of them were only released with-in the last 3-4 months (current month "August of 2021").

To start

I am guessing that when you asked the question, that you were only referring to horizontal scrolling within the editor when you asked how to get rid of horizontal scrolling, its important to note, and many of you likely know this already, but the editor is not the only part of V.S. Code that is vulnerable to becoming overcrowded, and forcing content out of the visible viewport. Tabs are also prone to this behavior. IMO, the V.S. Code U.I. was screwed-up when horizontal scrolling was added to it as a way of solving over crowdedness in the editor, fortunately however; V.S. Code has a fantastic devs-team, it seems to enjoy listening to the community that it has. The team has eliminated the need to use horizontal scrolling by adding features that present an alternate way of handling an overcrowded editor.

---

V.S. Code: Configuring the editor to wrap better, when the viewport is too small, or the editor is overcrowded.

_        To configure V.S. Code, so that your lines of code, and your tabs, both wrap just before they reach the end of the visible viewport at the right side of your screen, you will need to insert the settings — as well as the values that are assigned to them, exactly as seen below — to the appropriately scooped ".../settings.json" file._

---

    // "./.vscode/settings.json" || ".../user/settings.json"   

    {
        "workbench.editor.wrapTabs": true
        "editor.wordWrap": "on",  
        "diffEditor.wordWrap": "inherit",
        "editor.scrollbar.horizontal": "hidden",   ​
        "editor.accessibilitySupport": "off"
   ​}

---

Brief Explanation of the Settings above:

workbench.editor.wrapTabs: true on
inherit hidden

V.S. Code Settings	ASSIGNED VALUE	DECRIPTION
workbench.editor.wrapTabs	"True"	"When a tab would normally be forced out of the viewport, it is placed on a new row that exists between the breadcrumbs and the preexisting row of tabs."
ed​itor.wordWrap	"On"	"When set to on, Lines wrap at the viewport width. Setting it to off will make it so lines continue on, past the visible viewport, until you start writing code on a new line."
diffEditor.wordWrap	"Inherit"	"Enables the standard editor's wordWrap configuration, for the Diff.Editor. Enabling this makes it so editors all work as expected, without needed to unnecessarily assign values to more settings than is needed (or practice)."
editor.scrollbar.horizontal	"Hidden"	"Sometimes the horizontal scroll bar can pop up, despite there being no need for it. This setting makes sure it remains hidden at all times."
editor.accessibilitySupport	"Off"	"Controls whether the editor should use support for features that can help people who may have difficulties from age, disabilities, or other reasons for needing accessibilitySupport. When set to "on" V.S. Code disables word Wrapping, and allows for lines of code to be placed outside of the visible viewport, as it optimizes the editor for screen readers. If you don't need the support, it should be set to off."

---

To read about the settings in this answer, in further detail, go to:

https://code.visualstudio.com/docs/getstarted/settings#_languagespecific-editor-settings