I have a problem about code highlighting in Peek Definition window of Visual Studio Code.
When I peek any function or class code with Peek Definition, the entire code block, not only the function or class name, will be highlighted with bright orange background, so that it's hard to read the code for me.
I attached a sample image of the situation.
I'll appreciate your help.
Since no one officially answered your question, I figured I'll just post the solution (thanks #Alex for the hint!):
Open the settings menu
On Windows/Linux - File > Preferences > Settings
On macOS - Code > Preferences > Settings
Search for Color Customizations and click on Edit in settings.json
Insert your custom highlighting (peekViewEditor.matchHighlightBackground) in the right window:
"workbench.colorCustomizations": {
"[*Your Theme*]": {
"peekViewEditor.matchHighlightBackground": "*Your Chosen Color*"
}
}
If you'd like to make other changes to the peek editor, take a look at the official documentation.
Related
Code Text Colorless
When I code in Visual Studio, it doesn't show any colours in the code text. It shows blue and green colours only for the class and comments texts. Also, VS doesn't suggest me anything when I code. Apart from this, everything things run fine and if there are any errors it shows up in the problem section.
I am doing flutter/ dart
I would really appreciate it if anyone helps me sort it out.
Thank you :)
Happened to me today, hope it helps someone: in my case it was just a broken extension JavaScript and TypeScript Nightly from Microsoft. After uninstalling, everything went back to normal.
I think the issue is likely the VS Code theme you're using. Dark (Visual Studio) only shows limited colours - try changing it to Dark+ and you should see more colours.
Dark
Dark+
To Change This Settings;
Setting Icon > Color Theme > Select Dark+ Configuration;
This issue was fixed, once I updated VS code and restarted it. The text colour for every widget and class was back after that.
I am not using VS but you might try to add Flutter and Dart extension from marketplace.
In VS Code, open the Color Theme picker with File > Preferences > Color Theme. (Code > Preferences > Color Theme on macOS).
You can also use the keyboard shortcut Ctrl+K Ctrl+T to display the picker.
Use the cursor keys to preview the colors of the theme.
Select the theme you want and press Enter.
What worked for me was checking if I had any deprecated or problems with an extension. Go to extensions in vs code (or ctrl+shift+x) check if any of your installed extensions has a problem; a warning yellow sign should appear below if your extension is deprecated or has any other problem. Fix the faulty extensions.
You can try installing "Flutter Widget Snippets" for already written code snippets from VS code Extensions.
How come some of the text is not well seen?
This never happened previously and I searched for settings in the preferences menu, but am currently at a loss as to what the root issue is.
Any suggestion/help would be greatly appreciated.
You can customize your color scheme in the JSON format of VS Code Settings so that the text in the side bar can be seen more easily.
First, open Command Palette via Ctrl + Shift + P and type Preferences: Open Settings (JSON). Press enter such that the VS Code Settings JSON file would open.
Next, add the following code into the JSON file:
"workbench.colorCustomizations": {
"[your_color_scheme_name_here]": {
"sideBar.foreground": "#ffffff",
}
}
Replace the your_color_scheme_name_here with the name of your color scheme. For example, if my color scheme is called Monokai Pro, then I type "[Monokai Pro]": { in the second line of the code snippet. Next, replace the #ffffff color code with a color you wish to have. Save the JSON file and you should be able to see the changes immediately at the side bar.
You can learn more about what other color customizations you can make in the side bar in the official documentation here.
It seems to be a bug in VS Code, I ended up just restarting the application and the issue was fixed. Strange to say to least...
Edit:
This was caused by git decorations which changed the color of the text name depending on the file status (modified, added, staged, etc.).
Since I find this distracting rather than helpful, I simply did file > preferences > settings > searched "git decorations" > unchecked "Git > Decorations: Enabled"
I am currently using Flutter with Dart. How do I permanently disable this annoying "Run|Debug" line in vscode?
That Run | Debug is not built-in to vscode. It must be contributed by one of your extensions. These seem like likely culprits:
Dart: Show Main Code Lens
// Whether to show CodeLens actions in the editor for quick running/debugging scripts with main functions.
Dart: Show Test Code Lens
// Whether to show CodeLens actions in the editor for quick running/debugging tests.
In case people get here because there is a Debug or Run in their package.json, that is a separate issue and answer, see https://stackoverflow.com/questions/62358131/how-to-disable-debug-from-showing-in-package-json/62368407?r=SearchResults&s=1|57.9327#62368407
Just disable Enable Code Lens in jest plugin.
It's very annoying! When you write test code, small Debug text shows on top of a test (above it method) when it fails.
During programming, it constantly shows and hides, causing lines of code move up and down a bit. It's terrible experience. Fortunately, easy to disable.
After disabling it, we still have test status feedback:
In VSC settings, search for "Pester Code Lens".
You can disable the first option.
Disable Pester Code Lens
Add this line to your settings:
"editor.codeLens": false,
Or do this in settings:
For Java Extension paste this in your settings.json file
"java.debug.settings.enableRunDebugCodeLens": false
you just open your vs Code Setting -> Text Editor -> Code Lean [Check mark this Box]
I'm modifying a Visual Studio Code theme to my liking. However, I have problems in finding the correct element name from https://code.visualstudio.com/api/references/theme-color.
Is there an extension or other way to get the specific element to modify the color? Something like "Select the element in the page to inspect it (Ctrl+Shift+C)" in Google Chrome developer console?
To be more specific, I'm trying to find the element name for this purple line to change it to a bit less aggressive color:
Any help in finding the element name in general or in finding the name of that element?
I found the solution myself with this answer: https://stackoverflow.com/a/47970668/9810067
You can open a Chrome-like developer console (It's actually identical to Chrome) by typing "Developer: Toggle Developer Tools" into the command palette (Ctrl+Shift+P).
However, this didn't quite help me. While I was able to get the element class with "Select an element in the page to inspect it" (Ctrl+Shift+C)", I didn't manage to get the name that I could put into settings.json.
What did the trick for me was typing "Developer: Generate Color Theme From Current Settings" into the command palette. From there I managed to find "editorGroup.border", which was just the element of which I wanted to change the color.
Then I just opened my VSCode settings.json (determine settings scope with the help of this) and added there:
{
...
"workbench.colorCustomizations": {
...
"editorGroup.border": "#9fb3c0ad",
...
}
...
}
and there you have it.
language : c++
extension: "C/C++ ms-vscode.cpptools V0.9.3"
How can I setup highlighting of code that has been deactivated via a #ifdef in vs code.
vscode is not highlighting/greying-out by default and I can't find a way to activate it.
You can now do that! Feb 2018 update for C/C++ extension added that feature: https://devblogs.microsoft.com/cppblog/visual-studio-code-cc-extension-feb-2018-update/
in the visual studio go to extension details then go to setting of this extension ms-vscode.cpptools and enable setting for highlighting inactive section there are total 48 settings u can search for inactive.
If you have "C/C++" extension installed on VS Code, it inactivates unused regions in the code. To fix this, go to extensions (Ctrl + Shift + X) -> "C/C++" -> click on the gear (next to the extension description) -> extension settings.
A file will show up. Look for the option "Dim Inactive Regions" and uncheck it.
You're done.
You can't do that. Syntax highlighting in Visual Studio Code is currently performed exclusively by grammar files based on regular expressions.
In order to highlight deactivated code an extension needs to alter the text appearance based on your current setup. Unfortunately there is no API available for that.
You can vote for that feature here: Provide an API for advanced source highlighting