VSCode Change Vertical Guide Line Indentation - visual-studio-code

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.

Related

How to hide the thing on the right-hand side for better screen ratio? [duplicate]

This beauty appeared after a recent update, and it is very distracting to me.
I searched through the menus, but didn't find any setting to remove it. Is there any way to banish it from the editor?
This is called the minimap, and, as stated in that link,
If you would like to disable minimap, you can set "editor.minimap.enabled": false in your user or workspace settings.
Once you save the settings file, the minimap will be gone.
You can also toggle the minimap from the Command Palette. You can go to 'View' and select Command Palette or just Ctrl+Shift+P and type in the word 'minimap', you will instantly get the option to toggle the minimap.
Click on "File" -> "Preferences" -> "Settings"
After Settings open, in "search settings" or press "Ctrl+f" type "editor.minimap.enabled" this will take you direct to the settings. On left of it edited option will be available right click to it. And set it to "false"
After wards you can see the right side pane is hide.
Ctrl + Shift + P write Toggle minimap and hit enter and it's gone.
While all the answers here will accomplish what the original question asks, they are showing a dated, manual way of hiding the minimap. Current versions of Code have a "Toggle Minimap" item in the View menu, which will hide the minimap without the need to edit anything manually in User Settings.
That view is called Minimap. To toggle, goto:
Toolbar -> View -> Toggle Minimap
I know of 3 ways to show/hide it.
View -> Show Minimap
Ctrl+Shift+P -> Toggle Minimap
Settings.json -> "editor.minimap.enabled": false
I also made a Youtube tutorial here demonstrating all three ways.
In VS,
Click on View on the top toolbar,
Then you will get a pop up, unselect --- Show minimap
Oowekyala's answer is correct. I am adding a description with image for better understanding. Here is the number from 1 to 5 that describe the steps. Firstly click on File->Preferences->Settings. Then you will get User Setting page. Next, type "editor.minimap.enabled" in the search box(step-4). you will get setting option. On left of it edited option(step-5) will be available right click to it.
Go to Preferences->Settings Under text-editor dropdown go to Minimap and there uncheck the enable of a minimap.
This thing is called minimap
to toggle is on and off
crtl+p
then search for ">minimap"
then just click enter
And if you again want to use it, repeat above step's again
Simply Click F1 a text box will appear search for minimap
and select View:Toggle MiniMap
2022 Update
The latest 2022 version of VS Code (1.73.0) now makes this even more simpler. Simply do the following to remove the minimap:
Right click anywhere on the minimap and toggle the Minimap option.
To reactivate the minimap, right click anywhere on the scroll bar and toggle the Minimap option.
From the View menuitem in Visual Code main menu, click on Toggle Minimap
On Windows.
Visual Code version 1.20.1
On Mac: Code - Preferences - Settings, and in the right panel add the following line:
"editor.minimap.enabled": false
Please care the commas, this file needs them after each but the last line. (It will warn you if a comma is missing.)
Tools -> option ->Text Editor -> All Languages -> Scroll Bars -> Behavior
toggle between the 2 options (use bar mode .. & use Map mode ... ) given that "Show vertical scrollbar " option is checked.
enter image description here

How don't show excess vertical lines in VSCode

I have 2 files, first .phtml
Screen of code from there:
And second file .vue:
Using the red arrows in the screenshot above, I want to show that there are extra vertical lines in the Vue file, which, it seems, do not connect anything.
There are no such lines in the .phtml file
How can I remove them?
You have to set that in the settings file as stated in the docs of VSCode settings
Press Ctrl + Shift + p, type settings and go to Preferences: Open Settings (JSON) to open User Settings, and add this:
"editor.renderIndentGuides": false,
Its work for me:
"editor.detectIndentation": false

How can I open a file in a new tab?

How do I open a new file using Ctrl+P, so it doesn't override the current file, but rather use a new tab?
Also, would it be possible to focus the searched file instead of opening it, if it was already opened on a tab, to avoid duplicates?
When a single click to a file is made in the sidebar, Visual Studio Code opens it in Preview Mode, which allows you to quickly view files.
Behavior of Preview Mode
The tabs in the Preview Mode are not kept open.
As soon as you open another file from the sidebar, it overrides the existing file if it's in preview mode.
The title of the tab will be in italic if it's in preview mode, just like the below screenshot.
Important!
If you want to edit a file, don't open in Preview Mode, double-click on the file in the sidebar instead.
If the file is already open in Preview mode, then to convert it to edit mode:
double click on its italic file name in the title bar, or
press Ctrl-K Enter
Steps to Disable Preview Mode
Criteria:
If you want to disable Preview Mode all together, that is:
accessing file through side-menu.
opening quick open menu using Ctrl + P.
Solution:
Open the Command Palette using the shortcut Ctrl+Shift+P.
Type Preferences: Open User Settings. This will open the Settings editor. Search for workbench.editor.enablePreview, and uncheck the checkbox (changes are autosaved and indicated with a blue left border).
Additional:
If you only want to disable preview mode in the quick open menu, uncheck the box for workbench.editor.enablePreviewFromQuickOpen.
TL;DR for Mac users
Step 1: Press ⌘+,
Step 2: Search for Preview and disable Workbench › Editor: Enable Preview
For both to keep a file tab open when you first click and after use, go to the definition,
"workbench.editor.enablePreview": false
It is the right answer.
Instead of changing a setting, a simpler option is to drag the file from the sidebar on to the tabs bar. It opens in a new tab.
Go to menu File → Preferences → Settings → search for "settings.json", and at the last line before }, add a comma to the last option and paste:
"workbench.editor.enablePreview": false
For example:
{
"editor.fontFamily": "'Consolas', 'monospace', 'Times New Roman'",
"terminal.integrated.fontFamily": "monospace",
"editor.fontSize": 13,
"workbench.iconTheme": "vscode-icons",
"workbench.editor.enablePreview": false
}
In the quick open menu, a file can be opened in the background by pressing the right arrow key. The current tab, with the quick open menu remains in the foreground, and the same process can be repeated to open multiple files.
VSCode doc can be found here.

Open files always in a new tab

I am using Visual Studio Code 1.3.1 with the newly introduced tabs.
When I click on files, the first file will open in a tab. If I do not make any changes to this file, the second clicked file will open in the same tab.
How can I avoid this and make Visual Studio Code always open a new tab?
When you [single-]click a file in the left sidebar's file browser or open it from the quick open menu (Ctrl-P, type the file name, Enter), Visual Studio Code opens it in what's called "Preview Mode", which allows you to quickly view files.
Preview Mode tabs are not kept open. As soon as you go to open another file from the sidebar, the existing Preview Mode tab (if one exists) is used. You can determine if a tab is in Preview Mode, by looking at its title in the tab bar. If the title is italic, the tab is in preview mode.
To open a file for editing (i.e. don't open in Preview Mode), double-click on the file in the sidebar, or single-click it in the sidebar then double click the title of its Preview Mode tab.
If you want to disable Preview Mode all together, you can do so by setting "workbench.editor.enablePreview": false in your settings file. You can also use the "workbench.editor.enablePreviewFromQuickOpen" option to disable it only from the quick open menu.
Before you can disable Preview Mode, you'll need to open your Settings File.
Pro Tip: You can use the Command Palette(shortcut Ctrl+Shift+P) to open your settings file, just enter "Preferences: Open User Settings"!
Once you've opened your settings file (your settings file should be located on the right), add the "workbench.editor.enablePreview" property, and set its value to false.
You can learn more about Visual Studio Code's "Preview Mode", here.
If you don't want to disable preview mode you can explicitly tell vscode to keep a specific tab open. As mentioned above a tab heading with italic text is in preview mode.
To get a tab out of preview mode you can either right click on the tab and choose keep open or use the shortcut cmd + k enter that is mapped to the command workbench.action.keepEditor.
Furthermore, double-clicking on a tab also gets it out of preview mode (verified in vscode 1.44.0).
I came up with the same problem, and open setting.json file, add the following:
"workbench.editor.enablePreview": false
Use workbench.editor.enablePreview: false to disable Preview mode completely.
Use workbench.editor.enablePreviewFromQuickOpen: false to disable Preview mode for the files open from quick open menu.
For 2020:
easy as pie, tap preferences (command ⌘ + , on Mac),
The secret is "Enable preview"
they added it right there:
Turn OFF (uncheck) for NORMAL behavior.
i.e., Turn OFF to avoid the "automatic closing" behavior.
Open in new Tab Solution:
Open the command palette by: Cmd + Shift + K
Open settings file by: Preferences: Open Settings (JSON)
Under user setting, enable Tabs by: "workbench.editor.showTabs": true
Watch for filenames in italic
Note that, the file name on the tab is formatted in italic if it has been opened in Preview Mode.
Quickly take a file out of Preview Mode
To keep the file always available in VSCode editor (that is, to take it out of Preview Mode into normal mode), you can double-click on the tab. Then, you will notice the name becomes non-italic.
Of course, you can simply double-click to open a file. This will open the file in a new tab, skipping the Preview Mode.
Feature or bug?
I believe Preview Mode is helpful especially when you have limited screen space and need to check many files.
For anyone who don't want to disabled Preview Mode.
As I read whole of comments and I found what I preferred that is the shortcut key to pin the opened file from Quick Open/Ctrl+P or that's mean to keep the opened file to the editor, and yes also don't need to switch your hand to the mouse to double-click on files list.
Thanks to #jontem and #MattLBeck.
Call save command with Ctrl+S (⌘+s on Mac) is the easiest way to reach what I preferred.
And if you found out you do this to keep opened file to editor quite frequently, yes I preferred you should setting the option "workbench.editor.enablePreview": false or "workbench.editor.enablePreviewFromQuickOpen": false as others mentioned before.
⚡ Actually, VSCode shows you the preview of a file.
You can disable the preview with this:
"workbench.editor.enablePreview": false,
⬇️ Basically just add these two settings and you're good to go.
Menu File → Preferences → User Settings: add this line
"workbench.editor.enablePreviewFromQuickOpen": false
If you want to open a file permanently from "Go To File..." (⌘P), press "right arrow" instead of return.
This also keeps the Go To File... search bar open so you can quickly open multiple files.
This is not a new answer. It is just showing how to do it via UI.
Open settings via File => Preference => Settings. The most upvoted answer is the correct choice.
Then in search field type Preview.
After that select Workbench and look for Enable preview options.
Uncheck the boxes.
You can do it via GUI
Search for preview
uncheck the options Enable Preview and Enable Preview from Quick Open
Essentially, there are three settings that one has to update (Preference >> settings):
workbench.editor.enablePreview: set this to globally enable or
disable preview editors
workbench.editor.enablePreviewFromQuickOpen: set this to enable or
disable preview editors when opened from Quick Open
workbench.editor.showTabs: finally one will need to set this
otherwise, there will be no tabs displayed and you will just be
wondering why setting/unsetting the above two did not work
From settings you can find edit settings.json
You need to search by Preview. Please check the below screen short.
Add the below code there:
"workbench.editor.enablePreview": false
enabling using GUI
go to Code -> Preferences -> Settings -> User -> Window -> New Window
here Open Files In New Window under drop down list select "on" that's it.
my VS Code version 1.38.1
You need to edit settings.json file, which is located at:
Windows %APPDATA%\Code\User\settings.json
macOS $HOME/Library/Application Support/Code/User/settings.json
Linux $HOME/.config/Code/User/settings.json
{
"workbench.editor.showTabs": true,
"workbench.editor.enablePreview": false
}
As hktang above indicates:
one Click opens the file in preview mode (header text in italics)
Double click the same file, it goes out of preview-mode (header text changes from italic to normal font)
I think this is a "comprimise" feature allowing users, to "navigate" both worlds; preview and none-preview.
All you do is click the file to open it in the right panel.
Then immediately double click it to keep it there.
Or - just treble click. File opens in none preview mode.
HTH
Paul S.
Go to File > Preferences > Settings
Search for workbench.editor.enablePreviewFromQuickOpen
Set it to false or uncheck it.
to open another file in a new tab keeping the current file open,
first double click (left click) the current file
then click (single click) the new file
in this way, the new file will be opened in another tab
#OR
you can drag the new file from vs code project explorer and drop it beside opened tab, exactly where the new tab will be opened
Actually, VSCode shows you the preview of a file when you open it. If you want to open files in a new tab, just disable the preview with this setting (paste this in the settings.json file).
"workbench.editor.enablePreview": false,
— you can take it one step further and use this setting
"workbench.startupEditor": "newUntitledFile",
— It will open your VSCode editor with a blank new untitled file to quickly get started.
For those who using Windows OS:
Press Ctrl + Shift + P
Select Preferences: Open Settings (JSON) from the list
Select all and Paste this
{ "workbench.editor.enablePreview": false }
That's it now it will open in a new tab instead of replacing on the existing one.
For reference look at the screenshot below:
Simple and Best way is whenever you open new file it is in preview mode so simply press the CTRL + K and then press ENTER then you done with preview mode , Now this file will remain always open until you closed it that's what you need to do ....
1. Double-click your files instead of single-clicking.
Instead of single clicking on your files, (like I do in the previous GIF) double-click. This will tell VS Code that you want the file to stay open when you switch to a new file.
Here's my beautiful demonstration of this:
2. Double-click the tab you want to keep open
This works if the tab you are working with is in "Preview Mode" (italicized) and you want it to stay open when you open another file.
3. Right click your tab and select "Keep Open"
This one's self-explanatory. Simply right-click on the Preview Mode tab on the tab at the top of your screen (while it's italicized) and click on "Keep Open" once the context menu pops up.
Here's my beautiful demonstration of this:
When you single-click a file in the left sidebar's file browser or open it from the quick open menu (Ctrl-P, type the file name, Enter), Visual Studio Code opens it in what's called "Preview Mode", which allows you to quickly view files.
It's a feature, not a bug.
Very often while programming you will only need to open a file for a small window of time, to "preview" its contents.
FOR MORE INFO
One simple solution is, instead of making changes in settings of vscode, whenever you open a file through a reference,you will see that the file is in preview mode(the name of file is in italic) and in the sidebar you will see that same preview file in focus just double tap it and it will be pinned on the tab,so that it wont get replaced by another file in preview mode.
This is so confusing. All developers I asked didn't appreciate this default behavior.
I use cmd + P to open project files.
In my case, I also had to set workbench.editor.showTabs property to true (in addition to workbench.editor.enablePreview)
I'm not sure how it got changed to false. Maybe, I've accidentally set it to false using some shortcut.
Settings -> Workbench -> Editor Management -> Enable Preview
for me, shift + enter did the trick.
If you have opened a file in preview mode and want to open new file in another tab:
For Mac: use cmd + p -> find the file and alt + enter.

How to restore the menu bar in Visual Studio Code

I disabled the menu bar in preferences and it disappeared as expected. Now there's no way to get to the preferences menu again. How do I get it back?
For Windows users:
For older versions (<1.54) of Visual Studio Code: Press Alt to make the menu visible temporarily. While the menu is visible go to the View menu and choose Appearance -> Show Menu Bar.
For newer versions see the following steps or if Alt does not work use Crtl + Shift + P for command pallete, type 'menu' and select View: Toggle Menu Bar
Alternativily open settings Ctrl+,, search for and change Window: Menu Bar Visibility to either classic or visible.
For macOS users:
If you are in Full-Screen mode you can either move the cursor to the top of the screen to see the menu, or you can exit Full-Screen using Ctrl+Cmd+F, or ⌃⌘F in alien's script.
If you are like me - you did this by inadvertently hitting F11 - toggling fullscreen mode.
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
Another way to restore the menu bar is to trigger the View: Toggle Menu Bar command in the command palette (F1).
It's also possible that you have accidentally put the IDE into Full Screen Mode. On occasion, you may be inadertently pressing F11 to set FullScreen mode to On.
If this is the case, the Accepted Answer above will not work. Instead, you must disable Full Screen mode (View > Appearance > Full Screen).
Please see the attached screenshot.
To restore menu bar visibility so that you don't press key Alt to make the menu bar visible and the menu bar remains visible all the time, see the setting below.
You inadvertently changed the value from "default" to "toggle", so restore the setting to "default" as shown below.
"window.menuBarVisibility": "default"
In version 1.36.1 I tried to follow the steps mentioned in the previous answers and noticed that the Toggle Menu Bar has moved to a different location and has been renamed to Show Menu Bar. Follow these steps:
Press Alt to make menu visible
Click on the View menu, navigate to the Appearance option and choose Show Menu Bar
Click on the 'Manage' button.
Select 'Settings'.
In the search bar type: 'menu bar visibility'.
In the drop-down select 'classic' or 'visible'.
Press Ctrl + Shift + P to open the Command Palette, then
write command : Toggle Menu Bar
From Version: 1.56.2 on in OSX you need to update in settings.json file
"workbench.editor.showTabs": true
instead of
"window.menuBarVisibility": "default"
Press Ctrl + Shift + P to open the Command Palette.
After that, you write menu
Option is enabled
You have two options.
Option 1
Make the menu bar temporarily visible.
press Alt key and you will be able to see the menu bar
Option 2
Make the menu bar permanently visible.
Steps:
Press F1
Type user settings
Press Enter
Click on the { } (top right corner of the window) to open settings.json file see the screenshot
Then in the settings.json file, change the value to the default "window.menuBarVisibility": "default" you can see a sample here (or remove this line from JSON file. If you remove any value from the settings.json file then it will use the default settings for those entries. So if you want to make everything to default settings then remove all entries in the settings.json file).
Some changes to this coming in v1.54, see https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_54.md#updated-application-menu-settings
Updated Application Menu Settings
The window.menuBarVisibility setting for the application menu
visibility has been updated to better reflect the options. Two primary
changes have been made.
First, the default option for the setting has been renamed to
classic.
Second, the Show Menu Bar entry in the the application menu bar now
toggles between the classic and compact options. To hide it
completely, you can update the setting, or use the context menu of the
Activity Bar when in compact mode.
Press Ctrl+Shift+P, type menu, select View: Toggle Menu Bar and the menu bar should be back. If not add a comment
Here is a simple solution to bring back the activity bar.
Just click on the view tab on top of vs code > appearance > then check activity bar then from there it has to appear
All these answers were wrong for me. Press ALT.