When I use tab space in VSCode it remains a vertical line for each tab as in picture below. How can I remove them?
The Editor > Guides: Indentation setting controls whether or not those lines are rendered. Just uncheck that box and you should stop seeing them.
It's the bottom box in this image
Update based on comments: I don't think the editor can selectively render some indent guides while hiding the rest, all 'TAB SPACES' before text count as indentation to it. If you're only doing this with comments for some visual reason, you can simply start the comment early and put the spaces later like so:
Before:
After:
VS Code has options to hide/show indent guides. Steps to configure are as below.
Open VS Code Settings [ Cmd + Shift + P / Ctrl + Shift + P ]
Search for 'settings' and select Preferences: Open Workspace Settings
Now in settings, search for 'editor>guides'
Uncheck Editor > Guides: Indentation to remove guides.
You can also choose to hide or show Editor › Guides: Highlight Active Indentation
Related
The Visual Studio editor highlights the current line by changing the background color of the current line. Is there a simple way to disable this highlighting? Otherwise, which parameter in Fonts and Colors dialog controls the background color of the currently selected line in the editor?
Is there a simple way to disable this highlighting?
Tools -> Options -> Text Editor, in the Display group, uncheck "Highlight current line"
Which parameter in Fonts and Colors dialog controls the background color of the currently selected line in the editor?
The colors are named "Highlight Current Line (Active)" and "Highlight Current Line (Inactive)"
To disable the border around the current line
In VS 2019
Go to : Environment -> Fonts and Colors:
Find the display item: Highlight Current Line
Set the item foreground color to: Automatic
In VS 2017 and earlier
Go to : Tools -> Options -> Text Editor:
Find the display items:
Highlight Current Line (Active)
Highlight Current Line (Inactive)
Set the item foreground color to: Automatic
if its visual code make
"editor.renderLineHighlight": "none"
The Visual Studio editor highlights the current line by changing the background color of the current line.
The only time I've seen this is when "Use Windows High Contrast settings" is enabled (Options > Environment > General)
With this setting disabled, I just get a subtle grey box to indicate the current line (this may depend on your Color Theme):
If you're using Resharper, it's:
Tools -> Options -> Text Editor:
ReSharper Current Line Highlight
press -> Ctrl + comma
Search => Render Line Highlight
select none from the options
In addition to the previous answer, I'd like to mention that Visual Assist (the tomato icon) also have an highlight current line feature, that can still be active while your Visual Studio highlight option is turned off.
This drove me crazy! Find it in Visual Assist Option panel, Display category.
So don't forget to also uncheck the VisualAssist highlight option.
edit
my settings:
Visual Assist option turned off
Visual Studio option turned on (in the Text Editors part)
In the font color settings, for Highlight current line (active and inactive), set the foreground to Automatic
Finally you can set your highlight color as you want with the background color.
Last point, sometimes Visual Studio mess things up even more, you may have to restart it, or close/open your tabs... sadly, YMMV.
For VsCode 2021 version users
Workspace > Text-Editor > Render Line Highlight > none
Visual assist and vsvim extensions were conflicting. So I disabled it within the visual assist options.
Uncheck the option: Highlighting->Highlight results of Quick Find and Find in Files.
For some reason "esc" doesn't work .
How to add more indentation in a file tree structure? It has a little bit indentation I want to increase more just like NetBeans.
check the image
Go to File > Preference > Settings and choose:
Workbench › Tree: Indent
Controls tree indentation in pixels.
or (in your settings.json enter this directly)
"workbench.tree.indent": 10
and choose a high enough number for you.
Also see my answer at Visual Studio code sidebar Vertical guideline (customize sidebar) where with v1.36 you can add colorized tree indent guides to make the explorer file structure more obvious.
The example picture uses: "tree.indentGuidesStroke": "#00ff00" in the colorCustomizations, so the guidelines will appear green.
{ // in settings.json
"workbench.colorCustomizations": {
"tree.indentGuidesStroke": "#00ff00"
}
In a small change coming to v1.64 note that the minimum tree indent will be raised to 4 from 0 previously. So you will not be able to go less than 4.
If you just want to change the indentation you can set these options:
Press Ctrl+Shift+P -> Go to Preferences: Open Settings (JSON)
"workbench.tree.indent": 18,
You can add guidelines as well with:
"workbench.tree.renderIndentGuides": "always",
You can also change their color using:
"workbench.colorCustomizations": {
"tree.indentGuidesStroke": "#008070"
},
For Mac, using your menu bar would be
Code > Preferences > Settings
Then at the Search settings type: tree or go to
Workbench > Appearance > Tree: Indent (Controls tree indentation in pixels)
and set your preferred indentation
{
"workbench.tree.indent": 20, // just paste this line of code in setting.json file
"editor.mouseWheelZoom": true // for zoom in & out font size with Ctrl+ mouse scroll
}
As of Visual Studio Code Version: 1.59.0+
You have to go: Code (on menu bar) > preferences > [user menu] > Appearance > tree:indent
I set it to 22.
Besides the other answers involving settings files, the indentation may also be changed in the Files / Preferences / Settings GUI:
I changed my VSCode settings to define a tab as 4 spaces, as opposed to the default 2 spaces. How do I make the vertical guide lines appear on every 4 spaces, as opposed to 2? Please see screenshot below.
Open a .js file and in the status bar (at the bottom of the screen) you will find a button that says
Spaces: 2
Once you click on it, you get a menu at the top of the screen which has a button
change view
Click on it and you will be able to select the tab size for the file.
To change the setting globally, go to File -> Preferences -> Settings, search for 'tabSize' and click on Edit in settings.json. Then in the settings.json file set "editor.tabSize" to 4 and save.
I'm using VSCode and that's what solved the issue here
1- create a prettier.config.js file and among the options, make sure to have these here:
module.exports = {
tabWidth: 4,
tabs: true,
// other options...
}
2- Open the options bar (cmd + shift + P) and select "Developer: Reload window" to reload the IDE.
How to add more indentation in a file tree structure? It has a little bit indentation I want to increase more just like NetBeans.
check the image
Go to File > Preference > Settings and choose:
Workbench › Tree: Indent
Controls tree indentation in pixels.
or (in your settings.json enter this directly)
"workbench.tree.indent": 10
and choose a high enough number for you.
Also see my answer at Visual Studio code sidebar Vertical guideline (customize sidebar) where with v1.36 you can add colorized tree indent guides to make the explorer file structure more obvious.
The example picture uses: "tree.indentGuidesStroke": "#00ff00" in the colorCustomizations, so the guidelines will appear green.
{ // in settings.json
"workbench.colorCustomizations": {
"tree.indentGuidesStroke": "#00ff00"
}
In a small change coming to v1.64 note that the minimum tree indent will be raised to 4 from 0 previously. So you will not be able to go less than 4.
If you just want to change the indentation you can set these options:
Press Ctrl+Shift+P -> Go to Preferences: Open Settings (JSON)
"workbench.tree.indent": 18,
You can add guidelines as well with:
"workbench.tree.renderIndentGuides": "always",
You can also change their color using:
"workbench.colorCustomizations": {
"tree.indentGuidesStroke": "#008070"
},
For Mac, using your menu bar would be
Code > Preferences > Settings
Then at the Search settings type: tree or go to
Workbench > Appearance > Tree: Indent (Controls tree indentation in pixels)
and set your preferred indentation
{
"workbench.tree.indent": 20, // just paste this line of code in setting.json file
"editor.mouseWheelZoom": true // for zoom in & out font size with Ctrl+ mouse scroll
}
As of Visual Studio Code Version: 1.59.0+
You have to go: Code (on menu bar) > preferences > [user menu] > Appearance > tree:indent
I set it to 22.
Besides the other answers involving settings files, the indentation may also be changed in the Files / Preferences / Settings GUI:
In Visual Studio Code, a while ago, when I used menu View → Split Editor, it would split vertically. (One file on the left and one file on the right.)
I updated Visual Studio Code and when when I do menu View → Split Editor, it always splits horizontally. (One file on the top and one file on the bottom.)
How can I split vertically?
Change editor split layout from horizontal to vertical
In 1.20
ALT+SHIFT+0 PC (Windows, Linux)
⌘+⌥+0 Mac
Pre-1.20
ALT+SHIFT+1 PC (Windows, Linux)
⌘+⌥+1 Mac
In 1.25
You can split editor into Grid layout. Check View=>Editor Layout
It is nicely presented in Release notes v1.25: VS Code grid editor layout
In 1.58.2 **
** Someone update this with the lowest version where this became true.
The menu entry with the shortcut given above is View=>Editor Layout=>Flip Layout
The Command Palette entry is labeled "Toggle Vertical/Horizontal Editor Layout"
The settings entry is
{
"key": "alt+cmd+0",
"command": "workbench.action.toggleEditorGroupLayout"
}
If you're looking for a way to change this through the GUI, at least in the current version 1.10.1 if you hover over the OPEN EDITORS group in the EXPLORER pane a button appears that toggles the editor group layout between horizontal and vertical.
To split vertically:
⌘+\ Mac
command: workbench.action.splitEditor
To split orthogonal (ie. horizontally in this case):
⌘+k+⌘+\ Mac
command: workbench.action.splitEditorOrthogonal
Method 1
Method2
View -> Command palette -> type 'split'
Method3
Method4
Tip
Add a Keyboard Shortcut for split Editor
Press CMD + SHIFT + P (MAC) and search for Toggle Editor Group
In version 1.23.1, it is Ctrl+Shift+P and Split Editor
This will divide the screens vertically and you can move through them using Ctrl+K+LeftArrow
By default, editor groups are laid out in vertical columns (e.g. when you split an editor to open it to the side). You can easily arrange editor groups in any layout you like, both vertically and horizontally:
To support flexible layouts, you can create empty editor groups. By default, closing the last editor of an editor group will also close the group itself, but you can change this behavior with the new setting workbench.editor.closeEmptyGroups: false:
There are a predefined set of editor layouts in the new View > Editor Layout menu:
Editors that open to the side (for example by clicking the editor toolbar Split Editor action) will by default open to the right hand side of the active editor. If you prefer to open editors below the active one, configure the new setting workbench.editor.openSideBySideDirection: down.
There are many keyboard commands for adjusting the editor layout with the keyboard alone, but if you prefer to use the mouse, drag and drop is a fast way to split the editor into any direction:
Keyboard shortcuts#
Here are some handy keyboard shortcuts to quickly navigate between editors and editor groups.
If you'd like to modify the default keyboard shortcuts, see Key Bindings for details.
⌥⌘→ go to the right editor.
⌥⌘← go to the left editor.
⌃Tab open the next editor in the editor group MRU list.
⌃⇧Tab open the previous editor in the editor group MRU list.
⌘1 go to the leftmost editor group.
⌘2 go to the center editor group.
⌘3 go to the rightmost editor group.
unassigned go to the previous editor group.
unassigned go to the next editor group.
⌘W close the active editor.
⌘K W close all editors in the editor group.
⌘K ⌘W close all editors.
Simply in windows
ctrl + # (the button 2 in the upper horizontal row of numbers in keyboard)
The key bindings has been changed with version 1.20:
SHIFT+ALT+0 for Linux.
Presumably the same works for Windows also and CMD+OPT+0 for Mac.
Use Move editor into Next Group shortcut:
Mac: ^ + ⌘ + Right/Left arrow
If you want to change shortcut:
Open Command Pallette (macOS keyboard shortcut: ⌘ + Shift + p)
Select Preferences: Open Keyboard Shortcuts
Search View: Move editor into Next Group
To change the editor in Landscape and Vertical mode, follow the steps below.
For example, open two files that you have in your left or right side bar, depending on where you are placed. By default it is always on the left.
Now that you have both windows open, you have to use the key combination for PC (Alt + Shift + 1) for (Windows and Linux Operating Systems) or for MAC (Cmd + Option + 1), as commented here v-andrew.
I just found a simple solution. You can drag an opened file and move towards the four sides of the Editor, it will show a highlighted area that you can drop to. It will split the view automatically, either horizontally, vertically, or even into three rows.
VSCode v1.30.2
Update: you can also drag a file from the Explorer to split the Editor in the same way above.
Right-click on the tab that you want to split it into another screen.
Then choose whether you want to split it (up-down | right-left).
I find this is the quickest way, and You can split it to as many screens as you want.
The best way is to configure the VSCode settings to make the default behavior the way you want:
Split Editor (to a new editor group)
"workbench.editor.openSideBySideDirection": "right" // left/right (default)
"workbench.editor.openSideBySideDirection": "down" // up/down
Split Editor in Group (does not create new editor group)
"workbench.editor.splitInGroupLayout": "horizontal" // left/right (default)
"workbench.editor.splitInGroupLayout": "vertical" // up/down