I am trying to overwrite the default settings with my own user settings, but where in Visual Studio Code 1.73.1? - visual-studio-code

I am trying to complete a Stackskills class that requires me to go to "Settings" on the bottom left, then add the personal settings to overwrite the default settings on the right. My issue is that with Visual Studio Code 1.73.1, that option is no longer there.
The specific code I am trying to implement is this:
{
"editor.renderWhitespace": "all",
"files.autoSave": "afterDelay"
}
So where do I place this piece of code if not in the original place in Visual Studio Code?
I scrolled down all the parts of the Settings and I expected to find a place to write my personal settings to overwrite the default settings. Sadly, I could not find it.

There are multiple ways to access the VS Code settings.
To access the settings graphical UI, you can:
Click the gear icon at the bottom left of the page, and then click the "Settings" menu item in the menu that pops up.
Use the default keybinding to open the settings menu. On Windows and Linux, that is ctrl+,
Open the command palette (the default keybinding for this on Windows and linux is ctrl+p) and then use the Preferences: Open Settings (UI) command or the Preferences: Open User Settings command.
To access the user settings.json file in a regular text editor tab, open the command palette and use the Preference: Open User Settings (JSON) command.
To access the read-only settings.json file that shows what settings are set by default in a regular text editor tab, open the command palette and use the Preference: Open Default Settings (JSON) command.
If a setting is not explicitly already set in the user settings.json file, then that setting takes on whatever value is indicated by the documentation to be the default value.

I'd say that typing ctrl + shift + p and typing afterwards:
User settings
and selecting command Prefeences: Open User Settings (JSON) will bring you there.
I'd highly recommend relaying on ctrl + shift + p as your main tool, not on buttons/menus layouts, as it changes quite often.
The best part of ctrl + shift + p is that you don't actually need to exactly remember command name. Just more or less, what you trying to achieve, as all of those prompts will in the end, after bit of scrolling brings you where you want:
user settings
settings JSON
preferences JSON
preferences user
preferences user JSON
...and so on...
basically, ctrl + shift + p is your small STack Overflow in VS Code, that tries hard to understand your intentions :)

Related

How to enable my accidentally disabled "back" and "forward" buttons in VSCode Command centre? [duplicate]

This question already has answers here:
I hide commandCenter, how can I reopen them
(2 answers)
Closed last month.
image of empty command centre
I right click toggled off various buttons from my command center - back, forward, search bar. How do I re-enable them?
right-clicking again only shows a toggle for the entire command center but the toggles for the above mentioned buttons have disappeared
You can configure Visual Studio Code to your liking through its various settings. Nearly every part of VS Code's editor, user interface, and functional behavior has options you can modify.
VS Code provides several different scopes for settings. When you open a workspace, you will see at least the following two scopes:
User Settings - Settings that apply globally to any instance of VS Code you open.
Workspace Settings - Settings stored inside your workspace and only apply when the workspace is opened.
To modify user settings, you'll use the Settings editor to review and change VS Code settings.
To open the Settings editor, use the following VS Code menu command:
On Windows/Linux - File > Preferences > Settings
On macOS - Code > Preferences > Settings
You can also open the Settings editor from the Command Palette (Ctrl+Shift+P) with Preferences: Open Settings or use the keyboard shortcut (Ctrl+,).
When you open the Settings editor, you can search and discover the settings you are looking for. When you search using the Search bar, it will not only show and highlight the settings matching your criteria, but also filter out those which are not matching. This makes finding settings quick and easy.
Right Click in that area and select Command center
Then Right Click on each element you don't want and select Hide
Edit
Found an issue talking about the command center disappearing
The solution is command: View: Reset All Menus

How do I turn off text formatting on save in visual studio code?

I don't know why my code is auto formatted on save and for some reason changing the layout. I figured out this was due to auto format on save. How do I turn auto save off in Visual Studio Code?
For Windows:
Here are the some basics steps to be followed to turn off auto complete.
Step:1 - Press Ctrl + Shift + P to open Command Palette. Then screen like below image appears.
Step:2 - Type Save without formatting and click the matching option available. It either commands on click or redirects you to next interface.
If it works on click then it's fine and if your are redirected to next screen just uncheck auto format option under onsave. For me it worked on cick to the shown command.
For Mac:
Cmd+K S
This was introduced in back in 2018, the keybinding (on MacOS) is:
Cmd+K S
For keybindings for your own system, search for the command saveWithoutFormatting in the Command Palette
Default: Ctrl + k + Ctrl + Shift + s on 🪟 Windows.
For others having the same problem and if Save without format is inconvenient to do every time and if you want permanent settings for saving without format here are the steps:
Edit the settings.json file. You can do that with the command "Open Settings (JSON)"
press Command + Shift + P (to open the command palette)
and start typing the command "Open Settings (JSON)" and select from the suggestions.
The setting is named formatOnSave and you should set it to false, to disable it. It can be present multiple times for different types of things.
"editor.formatOnSave": false
It is best to search for "OnSave", because there might also be other settings that are doing formatting on Save, for example:
"editor.codeActionsOnSave"
In mac you can save without formatting with the following shortcut, (No need to touch the config):
If you don't want to open the command palette every-time, you can change the Ctrl/Cmd + S shortcut to make the action "Save without Formatting"
and remove the shortcut for "Save".

VS code doesn't show settings defaults json file beside my customization

I'm trying to master working with visual studio.
In the Intro Vieos the lecturer after opening User Settings shows that on the right side there are the default values for all settings and he can edit them by clicking on some icon beside each setting statement. Like the image below
I just do the same thing as he does. meaning I:
press ctrl+shift+p
search for Preferences: Open User Settings
and I click on it when found
But what I end up in does not show the default setting values on the right, beside a tab on the left to write my own customization. I need to see all the current default settings to decide which one I want to edit. How can I achieve that?
Thanks in advance.
I assume the lecturer uses an older version of Visual Studio Code. There was a change of the settings UI in August 2018, see here: https://code.visualstudio.com/updates/v1_27#_settings-editor
See this link to see how to use the settings UI: https://code.visualstudio.com/docs/getstarted/settings
And there is always the chance to press ctrl+shift+p and type Preferences: Open Settings (JSON). If you go to a new line and type "" you see the autocompletion list which shows all possible options.
EDIT: I just discovered that you can also restore the old behaviour. Open the settings and set workbench.settings.useSplitJSON to true.

Open current editing file in explorer tree

I'm wondering if there is a shortcut for VS Code that highlights in solution explorer tree current opened file. Like we have in Visual Studio:
Alt + Shift + L
Couldn't live with no complete answer, so figured out the following:
Without a direct keyboard shortcut:
Open the command palette via Cmd-Shift-P (or Cmd+P then >) and type Files: Reveal Active File in Side Bar.
This reveals the active file in the side bar similar to Visual Studio's Alt+Shift+L
Then, take the above and map a keyboard shortcut to it:
Open keyboard shortcut preferences file via Cmd-Shift-P followed by Preferences: Open Keyboard Preferences File.
Add in the following (taking Visual Studio's lead, I've personally mapped it to Alt+Shift+L, but map to what you want).
// Place your key bindings in this file to overwrite the defaults
[
{
"key": "shift+alt+l",
"command": "workbench.files.action.showActiveFileInExplorer",
},
]
Note that it's not as good as Visual Studio, Atom, etc. in that you can't then navigate with arrow keys in the tree (arrow keys navigate the active file contents), but I guess I'll eventually figure out how to do that.
#Tomoyuki Aota points out that you can do the following to navigate with arrow keys:
After Files: Reveal Active File in Side Bar, press Ctrl+Shift+E (Show
Explorer). After that, I can navigate the files in the explorer by the
arrow keys.
I don't think there's a command for that, but there is a shortcut to enable/disable revealing the current file as you open it:
"explorer.autoReveal": true
Try this:
Together with #Rob's correct answer:
"explorer.autoReveal": true
then Ctrl-Shift-E (Show explorer) focuses that file in the explorer and the arrow keys will navigate up/down/left/right like any list. This works even if the explorer is closed prior to the Ctrl-Shift-E.
Ctrl-Shift-E has the added bonus in that it will toggle focus between the highlighted file and its editor as well.
For mac, use Cmd-Shift-E
Right-click the file tab (not necessarily current one) and click "Reveal in Side Bar".
I was able to achieve this by customizing the workbench.files.action.focusFilesExplorer command with keybinding Alt + shift + L
Open the Keyboard Shortcuts ctrl + K + shift + S
search for focusFilesExplorer command & customize
Provide your keybindings that you are used to - I set mine to Alt + Shift + L
F1 then type "reveal" also works from in VS Code, at least for me.
It looks like the actual version of VS Code offers a command for this feature now.
In the settings, type revealInExplorer in the search bar to find the command. There is no default keybinding, so just put your own. Works like a charm!
Download the open in browser extension, that's it.
Right click > Open in primary/secondary browser function appears, and the ALT+B / ALT+SHIFT+B shortcuts become available.
Had a similar case and ended up here looking for help.
I opened a file in "preview" mode after clicking a link in a .md file and wanted to know where this opened file was located in the project.
I found this button in the upper right corner of VS Code which was exactly what I wanted:
It's called "show source"
Also check "Explorer: Auto Reveal Exclude" patterns in VS Code settings. Files that fit any of the patterns will not be auto revealed in the Explorer tree.

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.