How can I easily toggle display of problem underlining in VS Code editor panels? - visual-studio-code

I'm using VS Code with a number of different programming languages, which all have some form of problem validation provided via an extension. While these problem underlines are generally useful, I find them very annoying while I'm writing a particular piece of code, and only useful once I'm mostly done typing. I often think while writing code and I also tend to hit Ctrl+S very often, so there is no way that my IDE can "debounce" properly, as it wouldn't be able to tell if I'm done writing code or not.
How can I disable all lints from being displayed, regardless of the programming language used, until I re-enable them (or restart Code or whatever)?
I'm not looking for a always-hidden solution that permanently changes my settings. More for something that I can toggle with a keyboard shortcut or similar.
While I am most interested in a solution that works regardless of where the lints come from, the two extensions that'd be responsible for most of my lints are rust-analyzer and Kotlin, but I also have clangd and TexLab installed and also use TypeScript whenever I can't avoid it but currently I don't have any extension for it installed.

I don't think the exact thing you are looking for exists at the time of this writing.
I am not aware of any "global" (programming-language-agnostic) setting that toggles showing underlines for problems in the editor view. There is a setting that toggles showing decorations for problems in the files/folders view (problems.decorations.enabled), but that's not what you're looking for.
As shown by the answers to How to disable error highlighting in VS Code?, there are settings on a per-language basis to disable validation (such as css.validate, php.validate.enable, html.validate.*, json.validate.enable, etc. Note that language extensions may not follow that pattern of naming their settings fields)
In terms of getting a keyboard shortcut to toggle such a setting (whether the currently-non-existent-(I-think) programming-language-agnostic setting, or an individual programming-language-specific setting), see this Q&A: VSCode: Keyboard shortcuts for modifying user settings, where #matt-bierner points to the rebornix.toggle extension, which allows configuring keyboard shortcuts to toggle individual bi-state settings fields.
As for feature-requests and possible future features to VS Code, see this issue on the VS Code GitHub repo: Toggle problem visibility in Editor #166797. You can show your support for the feature reuqest by giving a thumbs up reaction to the issue. But please don't make a "me too" comment. "me too" comments generally come off as annoying to repo maintainers because they clutter up discussion and don't contribute anything of significant value.

Override theme colors in settings.json
{
"workbench.colorCustomizations": {
"[Visual Studio Light]": {
"editorError.foreground": "#00000000"
},
"editorError.foreground": "#00ff00"
}
}
will make errors transparent while using "Visual Studio Light" theme
and lightgreen while using any other theme, for example
Source: https://youtu.be/vR2y4VoCZg4?t=97

with the extension When File you can make the squiggles transparent when the file is dirty.
Add this to your settings.json file (global or workspace/folder)
"whenFile.change": {
"whenDirty": {
"editorError.foreground": "#ff000020",
"editorWarning.foreground": "#ff000020",
"editorInfo.foreground": "#ff000020"
}
}

File add a new line css. Lint dot empty rules and assign the value of ignore.

Related

Prevent ctrl-B from setting bold font while working with md files with the Markdown All in One extension

In VS Code, when you are working with a markdown file with the "Markdown All in One" extension active, ctrl-B sets the selected text to bold by surrounding it with **
The problem is that I use the ctrl-B keyboard shortcut all the time to show/hide the side bar.
Is there any way to disable that emboldening shortcut (or define an alternative one) when working with Markdown files, and to use it for hiding the side bar?
edit: the problem was that I had the 'Markdown All in One' installed
I don't think this can currently be done without uninstalling / deactivating your "Markdown All in One" extension. If you look at the list of keybinding actions it offers (see those that start with markdown.extension.editor.toggle), there are ones for toggling code spans, blocks, math, lists, but none for toggling bold and italics, which I find strange. No dice either searching for suggestions in the keybindings.json with "markdown.extensionbold".
So either I'm missing something, or you need to make a feature-request on their GitHub. If you do, post a link in the comments here for posterity.
As a last resort to get a fix right now, you could just remap your toggle-side-bar keybinding to something else.

can I remove dimmed-colored properties in settings.json file in VSCode?

There are dimmed properties in my settings.json file. Are they dimmed because they are not being used? Can I safely remove them?
Answer:
Yes, it is safe to delete settings that have a dimmed-out color. Just to be sure you can check if you have the Git and Prettier extensions installed/uninstalled as it seems those extensions have dimmed-out settings.json file.
Reasoning:
Well in your case, and as #j D3V mentioned, you've disabled or uninstalled the git extension. This means that any settings related to or needed by the extension will be dimmed-out and are no longer required.
I was surfing the web and testing out stuff in my VSCode, and I found a setting in my settings.json file that too, was dimmed out:
The dimmed out setting is "color-highlight.markerType": "dot-before",. This is because I no longer have the extension that used this setting, the extension was named 'Color Highlight':
In the image above, you can see I no longer have the installed extension, however, I once did. Basically, the settings are dimmed-out because they were related to an extension you no longer have installed. Thus it is safe to delete them. If you keep the settings, that's perfectly fine too!
I seen this question when you first posted it, but something was odd.
So the Properties that are Dimmed, Should Be interpreted as "Unreachable by the Control-flow"
In other words, the are unnecessary, and VS Code cannot make use of them.
The editor can be configured to change how dim — or "how opaque" — the code that is "unnecessary" renders. Its a theme property that changes the dimness. I included the configuration to use in your settings.json file below.
NOTE: _The setting uses a base-16 color format, much like you often will see in CSS, or SVG, however, it must have an 8 or 4 digit hex-color as to properly set the transparency. If an eight digit number is used, the first 6 digits are ignored, if a 4 digit is used then the first 3 are ignored. Below is an example of a properly configured configuration for changing how dim "Unreachable Code" renders (aka "unnecessary code").
{
"workbench.colorCustomizations": {
"editorUnnecessaryCode.opacity": "#00000080"
}
}
Its Important to Know Why Code isn't Being Reached
These types of details should always be obvious, if not, something might be wrong, and it is worth investigating. When I first took a look at the image you included (of your settings.json file) I immediately noticed something was off. There were settings that were part of the core, fundamental features that are built-in to VS Code. The settings are contributed through "built-in extensions". The only way they could be dim, is if you disabled one or more built-in extension.
First Let me state, you should never disable VS Codes core extensions that are built-into the editor. If you do, you can't expect the official VS Code Docs to pertain to your editor, you can't expect that other questions on stack overflow will work as the authors intend for them to work, you will also loose many of the features and abilities that make VS Code such a powerful tool.
You should enable the built-in extensions that you disabled.

How to put tap space in my code while using prettier in vscode

Prettier is useful in most times. But, sometimes I want to put tap space in my code for enhanced reading of the code. Is there any way for put tap space in my code intentionally while using Prettier?
I think you mean tab spaces with a b not a p. if that's correct, then no, in general prettier does not allow for discretionary tabs, because it is what is known as an opinionated formatter, meaning that it has its own opinions about the way code should look.
If you want more control over your formatting, you can uninstall prettier and choose a different formatting extension instead, like beautify - or even just use the built-in VS code language features, which provide formatting and are fairly customizable.
In the settings section of VS code, you can search for terms like tab and white space to customize the behavior.

How do you determine which formatter is being used for VS Code?

If you have multiple extensions installed how do you determine which formatter is running on your document?
For instance I have a couple of HTML extensions that may format HTML but I'm not sure which one is actually formatting, or if multiple are. I'm not even sure which extensions may be contributing to the formatting honestly. Recently auto formatting in HTML and CSS have changed how they're formatting in ways that I do not care for, and I would like to know which extension is doing this so I may be able to change configuration or disable the extension. Currently I have something like 80-90 extensions so going through one by one is a ridiculously timely process that I would like to stay away from if there is a programmatic way of determining this. It seems that extensions have to register with the formatting service so that they can do their auto formatting, but I'm not sure if there's a way to debug, hook, or view those.
Starting with the 1.33 release (March 2019), attempting to format a file for which there are multiple formatters registered results in a popup like this:
Note that the notification is "silent" if formatting happened implicitly via "format on save" or "format on paste", meaning that you need to click the bell in the lower right for it to show up:
The Configure... menu then lists all the formatters available for the current language. One of them can be selected as a default formatter for Format Document and Format Selection:
Picking for instance "Prettier" here results in this being added to the global settings.json:
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
There are also two new commands for formatting a file with a specific formatter, Format Document With... and Format Selection With.... This can be useful for formatting a specific file with a formatter that's not set as the default formatter. The former is also available from the context menu:
In addition to the answer given by Gama11
You can got to settings.json on below given path
C:\Users\<username>\AppData\Roaming\Code\User\settings.json
I am using "prettier" formatter for my html files,
also you can find the formatter been used for other extensions if configured.
Look at https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
ctrl-shift-p > search "open json"
Add
{
"editor.defaultFormatter": null,
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
}
The default-level formater mentioned in rofrol's answer will soon be better managed, from issue 126187
It should be deprecated and banished for the sanity of developers everywhere.
Few days ago I ventured off the path of JS/TS/CSS/HTML/JSON and thought I try VScode with something new, ReScript.
I installed the plugin https://marketplace.visualstudio.com/items?itemName=chenglou92.rescript-vscode
But the formatting didn’t work.
Tried the same with a python formatter plugin, same problem.
After a little investigation I found that I had this configured at the top level of my settings.json. It also has a nice GUI pulldown.
"editor.defaultFormatter": "esbenp.prettier-vscode",
And this was apparently overriding the ReScript and python plugins.
It might have been overriding ALL plugins, even for languages that prettier is not even registered to use, which is a diabolical thing to do.
After some googling I found that I could add this and fix my problem
"[rescript]": {
"editor.defaultFormatter": "chenglou92.rescript-vscode"
}
Or I could just set defaultFormatter back to null and let the plugins take over.
But I was wondering how many users have had this same problem? And how many plugins have to deal with this? And why did I think adding a defaultFormatter to the top level was a good idea?
Well, with VSCode 1.61 (Sept. 2021), this will now show a modal dialog.
The "Configure" action will make you configure a default formatter for that specific language, not for all languages.
See commit afc8ab1

Visual Studio Code editor: Disable IntelliSense for CSS files?

I am using VS Code to write some CSS for an exercise. When I attempt certain Emmet shortcuts, for example many two letter ones like mt - margin-top, the IntelliSense prompt overrides Emmet. I could dismiss the prompt, but I'm trying to reduce keystrokes here.
Is there a way to disable IntelliSense for particular files or even files types? Or perhaps another solution I have not thought of?
I don't know if it's too late but I found the answer:
Put this in your settings.json:
"[css]": {
"editor.quickSuggestions": false
}
Normaly now, you wont get intelliSense suggestions in your .css files.