Visual Studio Code, one setting for multiple language - visual-studio-code

Is there a way to include CSS in HTML as one line, so lets say if i want to change the tabSize i will only need to do it once for both HTML and CSS
Currently looks like this:
"[html]": {
"editor.tabSize": 2,
},
"[css]": {
"editor.tabSize": 2
}
But i want something like this:
"[html, css]": {
"editor.tabSize": 2,
},

See the end of file-type specific settings issue. Multiple language keys in one setting are brought up (and earlier in the thread) but it is stated that there are no plans to support that (as of May, 2017).
So is later support of multiple langauges per key/entry something planned for the future?
Is there a sep[a]rate issue to track that?
[Response:] Its not yet planned.. Feel free to file an issue for that. Thanks.

Related

Is "prettyhtml" the same thing as "prettier" in VS Code?

I have a Vue project. When I go into my VS Code settings, I see an extension called "Vetur". I believe Vetur is what takes care of all code formatting for me. Under settings, when I click into Vetur, it gives me a list of different formatters for JS, CSS, HTML, etc. as they appear within Vue files. Here's a picture:
Picture of Vetur settings
The default formatter set for most things is something called prettier.
However, when I go into settings (which takes me to a file called settings.json), I don't see the word "prettier" there at all! Instead, I see a bunch of settings for other formatters that weren't selected (such as js-beautify-html), and the closest thing to the word "prettier" is the word "prettyhtml".
In the dropdown list for HTML, I do see an option for "prettyhtml", but it warns me that it's deprecated. Here's a screenshot: prettyhtml shown as a dropdown option but says it's deprecated.
When I go into this settings.json, I see this part:
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-expand-multiline"
},
"prettyhtml": {
"printWidth": 100,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": false
}
}
Is "prettyhtml" the same thing as "prettier"?
If not, then why doesn't anything appear in settings.json for "prettier"? There are exactly zero string matches for the word "prettier" in settings.json.
This is all very confusing! Thanks.

outline for a custom document format

The same way HTML and JSON (but not YAML?) already have their navigable Outline, I would like to add the same ability for my custom format, to help me navigate thru lengthy text.
Where I can find documentation for doing so?
I have found "how to add a grammar for highlighting" which is partially useful, (https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide), but not sure following this guide will provide me an Outline, again, YAML for ex. is highlighted, but doesn't appear in Outline.
Admittedly, I haven't read the entirety of the above link, but the word "Outline" doesn't appear, and I have trouble to filter search engine results.
Example below:
{
"doc1": {
"key": 12,
"a": [
1,
2,
3
]
}
}

Background color customization for Strings in VSCode

Is it possible to have background color changed in visual studio code but only for few programmatic tokens like classes and strings in Java and Python.
I'm able to change color but not background color for a particular theme.
"editor.semanticTokenColorCustomizations": {
"[Monokai Dimmed]": {
"enabled": true,
"rules": {
"module": "#943535",
"class": {"foreground": "#943535", "bold": true}
}
}
},
Maybe this is more like a function of highlight? This way you can install some extensions of that type.
Besides, during your code, I still remember some settings in official document.
In the part of Editor syntax highlighting, there are something like:
"editor.tokenColorCustomizations"
It can tune the editor's syntax highlighting colors('comments', 'strings', ...).
But I'm not sure this is what you want. You can see this for more information. Hope helpful.
enter link description here

How to make VSCode snippets that trigger only in double quote

I want to create a small VSCode plugin that has autocomplete function for the Bootstrap classes.
I would like this autocomplete to work only when the cursor is between double quotation marks.
Is it possible to restrict the display of the auto-complete list only for this range?
I tried something like this:
"BTN": {
"scope": "string.quoted.double.html",
"prefix": "work-btn",
"body": [
"test-class;",
],
"description": "BS4"
}
but not working
It isn't possible to use syntax scopes in a snippet, see the discussion at
https://github.com/microsoft/vscode/issues/71187
I was going to suggest upvoting that issue but it has been locked. The functionality seems like it would be useful for various reasons, but might be cpu-intensive.

Extending vscode intellisense

I have a custom js-doc attribute which contains the path to the dependency file.
eg: #dependency {import('loadash/somefile')}
Since this is simple string and error prone, I am looking for a way to extend vs-code import intellisense to this custom js-doc attribute. Vscode supports intellisense for standard js-doc attributes #type, #param and #typedef, would be great if there is a way to extend this behavior to my custom attribute.
example of the intellisense for #type attribute
I looked at few extensions related to this, but none offer the rich experience vscode offers. Any pointers in this regard would be really helpful.
Thank you for your time.
You could write a snippet for a quick and dirty solution. A snippet will show the intellisense menu and insert a piece of code based on a prefix you enter. They are saved in a JSON file in your settings directory ~/.vscode and would look something like this:
{
"deprecated": {
"scope": "javascript",
"prefix": "#D",
"body": "#Deprecated {import('${1:path}')}"
}
}