I've recently noticed that when typing out long lines of code, they split into multiple lines after this threshold and it bothers me. enter image description here
Not sure if it was a formatting extension that I put on here years ago, but I couldn't seem to locate it in the settings.
The grey line isn't what causes the wrapping. You can apply settings to have the grey line and not have wrapping. They grey line is displayed according to the editor.ruler setting.
In general text editor terminology, this wrapping you are observing is called "soft wrapping" (when an editor wraps long lines in its rendering of the text, but doesn't actually insert line-break characters, which is called "hard wrapping").
By default, soft-wrapping can be toggled by Alt+z (The command palette command is named View: Toggle Word Wrap).
The default setting of soft wrapping for VS Code is configurable by the editor.wordWrap setting. It has several values it can take on:
"bounded": lines wrap at the minimum of viewport width and editor.wordWrapColumn,
"off": Lines will never wrap
"on": Lines will wrap at the viewport width
"wordWrapColumn": Lines will wrap at editor.wordWrapColumn
The word wrap column is configurable by the editor.wordWrapColumn setting. See also the editor.wrappingIndent and wrappingStrategy settings.
This is a setting called rulers. Go into Settings and search "rulers". Then you will be able to edit the settings.json file. Under "editor.rulers" remove all values in the array so that it is empty. That should solve it.
I'm working on a project that is using 2 spaces as indentation.
I have a hard time reading code with such small indentation, so my question is:
Question: Can I make vscode show the two spaces as if they were wider (for example double the width)?
(I could of course solve it in a hackish way, by converting each file on checkout, and convert it back before i commit it, but that would be very tedious and error prone. I could also try to convince the project to convert the whole project to tabs, so that everyone can use their own preferred indentation. But I don't want to go into that discussion for every project I work on :) )
I have written the extension Indent Whitespace that decorates each space used in indentation with additional spaces (cursor will skip the decoration).
The decorated spaces are colored with a very transparent red.
With a setting you can change the number of spaces to add, default 1.
If you delete spaces with Delete it looks funny because the selection does not change, use the Arrow keys to update the decorations.
In a later version I will make the decoration color a setting, and also only update the decoration when the file changes (only important for large files, and fix the delete-update rendering).
I think you can't.
There is no such setting in VS Code. As of version 1.13, you can change the kerning, but this changes the spacing between all characters. You cannot do this only for a single character (or a set of characters).
The space width is a property of the font. Microsoft has a guideline that defines what is the ideal space size for a font. But this does not mean you cannot change it yourself when designing one. So I created a version of Roboto Mono which space character is 4x the original one.
This works on Notepad and MS Word, we can see the space is quite big. However, using the exact same font in VS Code, the space is still small, independently of the font being monospaced or not.
Illustration
Somehow, it looks like VS Code ignores space size in the font and decides by itself what is the best value.
I cannot use the full width of the panel in VsCode.
As can be seen in the picture it is quite a lot of space I can't use. (the red line)
Which setting should I change?
I do not have that many extensions and I have not played around very much in the settings either. (I set up a new machine every 30 och 90 days and hence don't fiddle around too much.)
Here are my relevant settings:
"editor.lineNumbers": "off",
"editor.wordWrapColumn": 100,
"editor.wordWrap": "on",
"editor.minimap.enabled": false,
The word wrap is at 80 characters which also happens to be the standard editor.wordWrapColumn but I am not using it but have editor.ordWrap set to on. (on means word wrap but not at a special column count)
I have set editor.wordWrapColumn to another value but, as supposed, nothing changes as long as I have etidor.wordWrap set to on.
I have played with setting editor.wordWrapColumn to, say, 100 and editor.wordWrap to wordWrapColumn which, as supposed, makes the lines break at 100. Setting it back and everything goes back to (ab)normal.
That is just space so your lines can grow longer. Basically to remove it resize your window to the desired space. (In case you mean the minimap just go into settings and disable it)
Rendering More than One Ruler 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?
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"
}
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
]
}
With Visual Studio Code 1.27.2:
When I go to File > Preference > Settings, I get the following tab
I type rulers in Search settings and I get the following list of settings
Clicking on the first Edit in settings.json, I can edit the user settings
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.
The panel for selecting the default user setting values isn't shown anymore.
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
}
Visual Studio Code: Version 1.14.2 (1.14.2)
Press Shift + Command + P to open palette
For non-macOS users, press Ctrl+P
Enter "settings.json" to open setting files.
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.
At right window "user setting", add the following:
"editor.rulers": [140]
Save the file, and you will see the rulers.
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
],
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:
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.
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!
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.
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:
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:
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.
File -> Preferences -> Settings Or cntrl+,
type "rulers" and click Edit Setings.json
3. Add the size value by ',' As you wish
Like this(Gif)
Combining the answers of kiamlaluno and Mark, along with formatOnSave to autointent 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"
},
],
}
Go to Menu File -> Preferences -> Settings and add
"editor.rulers": [preferred-value, preferred-value]
The color can be customized in
workbench.colorCustomizations
I like this explanation. It also tells how to set different colors for more than one ruler.
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