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
Related
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.
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.
On VS Code, I installed the prettier extensions, and since it doesn't support EJS, I added"prettier.disableLanguages": [ "ejs", ".ejs" ] to the setting.json file. This also shows up in the regular settings under Prettier: Disable Languages. Despite this, prettier keeps on re-formatting my EJS, which is super frustrating. How do I stop prettier from modifying a certain language besides this method?
Since Prettier knows nothing about EJS, it doesn't understand what you wrote in prettier.disableLanguages. Also VS Code considers .ejs files HTML. This not exactly accurate conclusion is passed to the Prettier extension, which in turn passes it to Prettier, so Prettier tries to format your files as pure HTML.
Try adding *.ejs to the .prettierignore file. You can read more about it here: https://prettier.io/docs/en/ignore.html
Your can add this
"[html]": { "editor.formatOnSave": false },
in your settings.json file in VSCode it will prevent auto formating html files, prettier still not have any ignore for .ejs files.
As .ejs files are still taken as html files by prettier.
When I'm opening settings using Preferences: Open Settings (JSON) I'm getting screen like this:
But in VSCode videos/tutorials I see people somehow have splitted window, with default settings on the left and user/workspace setting on the right:
How I can enable it?
===========================
EDIT:
I found "workbench.settings.openDefaultSettings" option and set it to true, but still my UI is different from desired on screenshot above ( I don't see search box for searching settings, also I don't see the message Place your settings in the right ... to override):
As mentioned #Juraj Kocan in comments, it happens after last VS Code updates.
This is Github issue related to this new "feature"
This one helped me:
"workbench.settings.useSplitJSON": true,
"workbench.settings.editor": "json",
How to Get to the JSON settings in Newer Versions of VS Code
In the latest versions of VS Code, you can convert back to the split JSON settings editor by changing the following settings in the (now standard) UI settings editor:
Workbench > Settings: Editor
Change from UI to json
Workbench > Settings: Use Split JSON
Checkmark to enable the option
after making this change, VS Code will open its settings as a JSON file, like in older versions of the application, rather than in the new UI. This allows you to make the changes that other answers provide, directly in the JSON (if you can find the right place and file to make them in..)
NOTE: Whether or not you actually want to use the JSON settings is a different question. Most of the time, the settings search function allows finding the same settings in the new UI. Sometimes it is difficult to get search to work though, especially if the settings are worded differently in the new UI style. There may also be cases where extensions haven't been updated to accommodate the new UI setting style, and so there is no option but to enter the JSON directly.
Not sure what do you mean by "Default".
steps to open setting by keyboard are:
press Ctrl+p (an input command line would appear at the top.)
press >
A List will appear like that in image. (search preference for all vs code settings)
I just installed a beautify extension for vs code
I want to have my code beautified whenever I save a file, but can't figure out how to configure it that way.
It says
Beautify on save will be enabled when "editor.formatOnSave" is true.
But i have no idea where to put it exactly as I cannot find the default option in any of the files.
I'm trying to switch to VS code and figure things out.
For Windows click on 'File' -> Preferences -> Settings. Then search for editor.formatOnSave, and put "true" instead of "false"
For Mac click on 'Code' (top left of screen, to the left of 'File', 'Edit', and 'View') -> Preferences -> Settings -> enter the term 'editor.formatOnSave' in the search settings box at the top of the page. Click on the tick to mark it as true.
Go to file--> preferences --> settings
In search type formatter and in default formatter select : prettier code formatter as shown in below screenshot.
I visited this question because my beautify was not working in VS code
And Adding the above mentioned setting fixed my issue but if you want your beautify to solve linting issue as well then you gonna have to added the below setting along with the above like this : (Hope this helps anyone)
{
"editor.formatOnSave": true,
"tslint.autoFixOnSave": true
}
My setup for Javascript relies on ESlint and Prettifier.
I got the autoformat/autofix configuring:
"editor.codeActionsOnSaveTimeout": 2000,
"editor.codeActionsOnSave": {
"source.fixAll": true
}
In addition to the other answers, it may be that you have to override or replace your defaultFormatter settings in your settings.json file if you use other formatters.
When I installed Prettier, for example, it installed as the default formatter for several different languages, including HTML, which is broken for Django HTML templates.
Open settings.json file (SO guide if you get stuck
In my case, prettier had installed as default as follows, but you might have another formatter instead:
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
If you remove esbenp.prettier-vscode and start typing a few characters, VScode will highlight in red you have entered an invalid formatter and suggest valid values. Once you have installed Beautify, you can replace this entry with: HookyQR.beautify
And make sure to follow the other answers on this post.