How to see codes in full width in vscode

Viewed 1583

I want to use full viewport while coding in VS Code. But the lines are not expanding when i expand my VS Code window. Any Fix ?

enter image description here

3 Answers

You can add any extension in you VS code such as Beautify or Prettier. Or if you want to format the document you can simply use shortcut Shift+Alt+F.

If you want to merge multiline code into single.Follow the steps

1.Select all line you want to merge in single.

2.Press F1 and search for join lines.

3.Select join lines and press enter.

You can also create a keyboard shortcut for this command editor.action.joinLines

The correct configuration to use:


In order to configure V.S. Code so that the lines of code in your editor will only wrap at the end of the view port, and never before, you need to assign the correct value to the setting: editor.wordWrap


There are 4 different values that can be assigned to the editor.wordWrap setting. There is one that I believe is exactly what you are asking for, however; 2 of the other three could work too, so I will list them all, and suggest the one I think will work best for you. The following are the only "out-of-the-box" line-wrapping configurations that VSCode supports, and they are as follows:



01|   "editor.wordWrap": "off"_

— Assigning off to the wordWrap setting will make it so that your editors lines will never auto-wrap. The only way a line will ever be moved to the next line is if you add a line break — by pressing the [ENTER] key. — and proceed to continue typeing text on the next line. This way could work for you, because you get 100% control over when the lines break.


02|   "editor.wordWrap": "on"

  • Assigning on to the editor.wordWrap setting makes it so that that the lines of code in your editor will wrap exactly where the viewport ends. No matter how big, or how small the editor's viewport width is, the lines always extend the entirety of the viewport, and never before.

NOTE: "on" sounds to me like what you were asking for in your question


03|   "editor.wordWrap": "wordWrapColumn"

  • When you assign wordWrapColumn   —to—   "editor.wordWrap" the lines of code inside your editors view-port will wrap at what ever you set the setting editor.wordWrapColumn to. To be more specific, I'll give you an example.
if you configure wordWrapColumn so that it looks like the code-snippet below:

"editor.wordWrapColumn": 80

...then your lines will all wrap at 80.
  • This is by far the most popular configuration, as it is frequently coupled with 3rd party formatters, and linters, such as ESLint & Prettier. Prettier's printWidth setting, coupled with "editor.wordWrap": "wordWrapColumn", is an extremely reliable and consistent configuration.

4| "editor.wordWrap": "bounded"

— Last is "bounded", bounded is a mix between on, and print width. In a nutshell, lines will wrap if either of two conditions are true. - First lines will wrap at what ever "editor.wordWrapColumn" is set to, just like the configuration example #3. - Secondly, lines will wrap at the end of the view port. To reiterate through what I just typed, lines wrap at _"editor.wordWrapColumn"'_s value, unless the view-port is smaller than the value of "editor.wordWrapColumn", in that case lines wrap at the view-port.



That's all...

"editor.mouseWheelZoom": true

Adding this setting to your settings.json will enable zooming in when holding CTRL and scrolling. After you save settings.json with this setting, you can hold the ctrl key and scroll with your mouse or trackpad to zoom in which will make your code cover the full screen. If you want more focus, you can enter Zen Mode. It is a nice feature built into Visual Studio Code, which helps you to focus more on your code than the activity bar or other files. You can toggle zen mode with shortcut keys CTRL + K Z, Command palette, or View menu.

Related