Toggle Auto Format On Save with Prettier in VSCode - visual-studio-code

99% of the time I want VSCode to auto format my files on save with Prettier. For that 1% of the time is there a way to toggle this to off in a way that's quicker than going into the settings and then manually switching it on and off?
I've tried looking for any keyboard bindings but the only one I found was prettier.open-output

There is command Save without Formatting with the keybinding Cmd+K S
ref: https://github.com/Microsoft/vscode/issues/38695#issuecomment-423422531

I switched from Atom where my prettier extension had a toggle in the menu bar at the bottom of the editor to turn formatting-on-save on or off.
To add this to VS Code, I installed this extension: https://marketplace.visualstudio.com/items?itemName=tombonnike.vscode-status-bar-format-toggle
Once you install it you will see this in the bottom menu bar:
When the check mark is there, prettier will format on save if you have that enabled in your VS Code settings under Text Editor --> Formatting.
Once you have a file that you don't want prettier to format, for example when reviewing someone else's code, you can turn off auto-formatting which looks like this:

Related

How to get keyboard shortcut `Cmd + S` to save on VS Code?

When I attempt to save my file on Visual Studio Code with the cmd+s keyboard shortcut, it does not save the code. I have to manually click File, the Save, just to be able to save my progress. I'm using macOS Catalina version 10.15.7 and VC Code version 1.55.2.
How do I fix this?
Attempts:
-Checked if ⌘ Cmd + S keyboard shortcut is tied to the Save functionality
If you do it right this solution will fix your issue.
I have never had a problem saving with VS-Code personally, but I have had issues with keybindings. IDK if you write your own keybindings, but if you do, you might want to check the keybindings that you have wrote to make sure they do not conflict with [CTRL + S]. The keybindings.json file that you create custom keybindings in, overrides the default keybindings.json file that defines the keybindings that VS-Code ships with.
To check your keybindings.json file...
Hit the F1-Key
A menu will drop open type in "Keyboard Shortcuts"
There will be two Preferences: Keyboard Shortcuts
Make sure to select Preferences: Keyboard Shortcuts and not Preferences: Default Keyboard Shortcuts
If the file is empty you are good. If you have keybindings written in the file, you need to iterate through them by hand, checking each one. Make sure that none use [CTRL + S] together. Even if the keybinding uses [CTRL + S] and other keys, you will need to disable it, so you can test if it is causing an issue.
Debugging [CTRL + S]
If your keybindings.json file is all good, then great, that's one thing to scratch off the list. The only thing left to do now is debug the Bound Key ("Key Binding"). To debug keybindings, you will use a built in tool, that VS-Code offers. To start do the following:
Hit the F1-Key
When the quick input drops open type the following into the text input:
"Toggle Keyboard Shortcuts Troubleshooting"
Select the option: Developer: Toggle Keyboard Shortcuts Troubleshooting
It should automatically open the OUTPUT panel, which is located in the same panel that your terminal is. Make sure that the OUTPUT is set to LOG(Window) in the drop down. (I took a picture and posted it below if you can't find the Keyboard Shortcut Troubleshooter).
The image might have funny declensions because I am on a dual monitor setup with 1 1080x1920 curved screen and one 1080x720 screen.... I cropped it to a STD HD 1920 width.
I Got My Trouble-shooter working, and Output open, now What Jay?
Okay... Well your at the right spot. Now every-time you press some keys, you should see your OUTPUT WINDOW working like crazy. It should be logging all sorts of stuff, which is good, very good.
This Part Is Important! READ CAREFULLY
What you want to do is use your keybinding that you feel isn't working appropriately. Use it when focus is set on an editor, use it when focus is set on a different editor, use it when focus is set on the sidebar. Where you are focused at in the editor at any given time can greatly affect a keybinding. The output is gonna write lines every-time you use your keybinding. Try not to hit any other keys while doing this, so you have a column in you output that includes logging from the keybinding you are testing only. Read the output see what it says. See if it looks right, or wrong. If it looks wrong, you can visit this link, to the VSCode site that covers this topic, and see if you can fix it your self. If you can't fix it your self, come back here, and edit your question. When you edit your question make sure that it includes the Troubleshooter's Logging Output.
VSCode Troubleshooting Keybindings (Keyboard Shortcuts) # https://code.visualstudio.com/docs/getstarted/keybindings#_troubleshooting-keybindings
Image that shows how to open the Keyboard Debugger
Also shows how to set the OUTPUT to Log(Window)
StackOverflow-2021-JUNE-26018:34-PST
Another thing to check for is, for lack of a better term, combination key bindings. For example, I was having an issue with ⌘+s. VSCode gave a message that it was waiting for the second key binding. After looking at the keybindings.json, I noticed I had a key binding for opening up user snippets as
{
"key": "cmd+s cmd+n",
"command": "workbench.action.openSnippets"
}
The ⌘+s portion of this key binding conflicted with the default ⌘+s

Disable the "refactor preview" confirmation tab

A few weeks ago, refactoring code using F2 worked without any confirmation. Since a few days, however, using F2 opens up a "Refactor preview" tab in the bottom panel.
The refactoring will not be done until I manually check what I want to refactor, and click the checkmark at the top right.
I cannot find anything online or in the vscode settings. Can this be disabled so that the refactoring automatically proceeds like it used to?
Are you accidentally pressing Shift + Enter after renaming?
This behavior should only happen after you press F2, change the name of the item, and then press Shift + Enter. Pressing only enter should automatically perform the rename without the refactor preview tab opening. The rename box states this:
In case its not clear, here is a video that illustrates this.
Note: This solution is only for c/c++ case. The reason is that C/C++ extension is doing bad in analyzing the code and relies on user to determine which ones to rename, then the preview panel is poped up for this.
Try disable Editor > Rename: Enable Preview in settings, and then restart vscode.
If the problem still exists, try replace C/C++ extension's intellisense with clangd:
Install clangd extension in vscode;
Disable C/C++ extension's intellisense by adding this to settings.json:
"C_Cpp.intelliSenseEngine": "Disabled"
Then vscode will adopt clangd's intellisense, which renames without a preview.
Uninstalling C/C++ extension is NOT recommended because intergrated gdb will be lost, but you can try lldb as a substitude:
Install CodeLLDB extension in vscode;
Configure cmake's default debug type to lldb in settings.json:
"cmake.debugConfig": {
"type": "lldb"
}

How do I stop Visual Studio Code (VSCode) from linting new, unsaved files?

In Visual Studio Code (VSCode), I often want to temporarily store some text while coding. A quick way to do this is to hit Ctrl + N (to open a new file in a new tab) and then Ctrl + V (to paste the text). I can then go back to the new tab later on and retrieve the text. This is safer than using the clipboard, because I don't want to accidentally blow it away by copying something else.
However, the ESLint extension for VSCode will automatically detect that I have pasted some JavaScript code into a new file and will immediately start linting it, even though it is a brand new & unsaved file. This clutters up the "Problems" pane with spurious errors.
How do I prevent this from happening?
The solution is to click on the language icon in the bottom right hand corner, and switch it to Plain Text (plaintext).
This will obviously disable the linter, because it won't be a JavaScript/TypeScript file anymore.
It's also probably possible to make a VSCode hotkey that will do this in one keystroke, but I don't really do this pattern often enough to justify making a custom hotkey for it.
Search preferences for "Format on paste" or in settings.json enter:
"editor.formatOnPaste": true

Can I see, and individually disable, keyboard shortcuts for extensions, such as the Sublime Text Keymap extension?

When I started using VS Code, I installed the "Sublime Text Keymap and Settings Importer" extension, to make it act more like Sublime, because that is what I was familiar with.
Now, I would like to use the default shortcuts. I want to switch gradually, maybe by disabling a few Sublime shortcuts at a time, or by at least knowing which shortcuts are coming from the Sublime extension, so I can train myself to stop using them.
Is there any easy way to see which shortcuts are coming from the Sublime extension, and ideally disable some, but not all, of them?
If I look at the "Keyboard Shortcuts" list, it shows the default shortcuts and the Sublime shortcuts mixed together, with no hint as to which is which, as far as I can tell. Example:
It shows both Command+P and Command+T as shortcuts for workbench.action.quickOpen, both with a source of "Default". But I know that Command+T is coming from the extension, because if I disable the extension, I don't see it (but I still see Command+P). Disabling the extension and restarting VS Code is kind of inconvenient, so I would like an easy way to see which shortcuts are coming from the extension.
You can see a comprehensive list of all keybindings the extension includes in the "Contributions" tab of the extension itself:
I'm not aware of any options to display this in the keyboard shortcuts UI directly. However, you could put the two tabs side-by-side for easy comparison:
Here is an updated and better method to filter the Keyboard Shortcuts editor to show which keybindings are contributed by a specific extension. See Specify which extension provides a specific keyboard shortcut. And here is an example where I search for one of my extensions, Toggle Line Comments to see if it contributes any keybindings.
And then it would be easy to disable or re-bind any of those keybindings.
Also you can click on the Extension gear icon in the Extensions list. That will bring up a menu with an Extension Keyboard Shortcuts option. Which will open the Keyboard Shortcuts editor with a search already completed for any keybindings contributed by that extension.
Keep an eye on this PR https://github.com/microsoft/vscode/pull/95713 (Show keybinding source in GUI). Looks like it may be included in vscode v1.45. It would allow you to filter the "Keyboard Shortcuts" by user-defined or extension. From the above link:
Filters examples:
#user - shows user defined keybindings
#default - shows default keybindings
#extensions - shows all extension contributed keybindings
#extensions:"${EXTENSION_NAME}" - shows keybindings contributed by
${EXTENSION_NAME}
#extensions:${EXTENSION_NAME} - same as above only without quotes
(spaces are invalid for this one)
Searching with filter and text also works:
#extensions:bookmarks list - shows keybindings from bookmarks
extension that contain the word "list"
And then with such a filtered list it would be easy to disable whichever commands you wished.

eclipse editor is not formatting code as specified

Although my eclipse html editor is configured to add indentation
it is not indenting my html file correctly. I am trying to use ctrl+shift+F and save action. Could some one please help me how to enable indentation on saving or formatting.
This might be the problem. Check the current formatter for HTML files in your machine. For example I have default Formatter for C/C++ source files. Its is named as K&R[built-in].
See below
Like this you can also check the formatter for HTML file and click on Edit button. New window will popup showing the all details of this formatter. Go to Indentation tab. In General settings group, change the tab policy option from Tab to Spaces then enter the indentation size, save and exit then check.