Summary
I'm trying to figure out how to make HTML snippet with ATTRIBUTE typeahead (intellisense) as well. We have a web component and all Tags and attributes associated to tags are documented. What is the easiest way to implement this?
Example
We have a top level zing-grid tag. This tag has many attributes. For the following example I want typeahead for the caption attribute. The caption attribute should ONLY appear when I have a prefix of <zing-grid.
This issue is similar to How to insert html attribute snippet in jsx in vscode. In that example div has class intellisense. In this case I want the same typeahead implementation on my custom web component for the caption attribute.
Current POC snippet syntax
How do I make sure caption attribute is ONLY captured within the zing-grid tag
vue.code-snippets file
{
"zing-grid": {
"prefix": "<zing-grid",
"body": [
"<zing-grid \n\t$0></zing-grid>"
],
"description": "ZingGrid top level tag"
},
"zing-grid-caption": {
"prefix": "<zing-grid ",
"body": [
"<zing-grid \n\t caption=\"$1\"></zing-grid>"
],
"description": "Displays a grid with the caption attribute on the grid"
},
"caption": {
"prefix": "caption",
"body": [
"caption=\"Hello World\""
],
"description": "Displays a grid with the caption attribute on the grid"
}
}
Example Output
The following example output is from our own custom code editor implementation. We would ideally like this support for visual studio code as it is a much more powerful and complete IDE.
Cloud App Screen Recording
Another link since it is giving me trouble posting links https://duaw26jehqd4r.cloudfront.net/items/0E431n0Q1m261T3S1T03/Screen%20Recording%202019-02-07%20at%2003.35%20PM.mov?X-CloudApp-Visitor-Id=2965229
Updated
There have been new features in January 2019 documenting extended the HTML extension for users specifically for web components.
https://github.com/w3c/webcomponents/issues/776
That should lead you to their latest release in January 2019 here: https://code.visualstudio.com/updates/v1_31#_html-and-css-custom-data-support
Previous Answer
Answered by #heretic-monkey. I looked up implementing VSCode extensions and not snippets. Seems the solution is there. Clearly defined in their beginning text about the capabilities. Thanks for your time.
Related
How do I ignore this error. I have used the id attribute for some tags in order to reference them by id in javascript, but it shows this error:
CSS id selector '...' not found.
Please tell me how to ignore or disable this error.
maybe your css is not formatted properly.
try:
<style>
#phone {
your css here;
}
</style>
You need to make sure you mark the code with # to show that it's an id and not a class or something else.
Update: First section of answer no longer valid as of the lastest updates since original post which removed the css.validation option. see
If you are using the HTML CSS Support extension by ecmel, you can go to .vscode/settings.json and add
"css.validation": {
"id": false,
"class": false
}
This will turn off css validation for class name and id.
More information on this at the Visual Studio MarketPlace for this extension under Selector Validation here or the Github repository readme Selector Validation Section
Note:
1) Also don't forget to add a comma after the setting that comes before (as JSON format is comma separated).
Example:
{
"java.codeGeneration.generateComments": true,
"css.styleSheets": [
// (1)
"https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css",
"src/main/resources/static/css/styles.css"
],
"css.validation": {
"id": false,
"class": true
}
}
Sometimes you need to restart / close and reopen vscode after saving changed to the file for them take effect.
There is a way to configure styleSheets. This next bit is taken from their documentation see Additional Styles Section:
Additional Style Sheets
If it is not possible to specify local or remote styles in HTML or via
template inheritance, they can be specified in VS Code settings per
workspace folder in .vscode/settings.json and will suggest for all
HTML files within that workspace folder:
.vscode/settings.json
"css.styleSheets": [
// (1)
"https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css",
// (2)
"/site.css",
// (3)
"site.css",
// (4)
"./site.css"
]
There's weava highlighter extension which make it possible to highlights articles/pdf and store highlight on the server.
I can't understand how does it keep highlights after the page reloaded. What does need to be stored to find the highlighted section after the page reloaded? I can't store text, because text can be duplicated. CSS selectors not enough too, how does it work?
Tried to debug the extension, but the code is highly uglified and it's difficult to understand what's going on.
Actually, it stores enough text to describe the beginning and the end of the section to ensure uniqueness, found following traces in the console:
"-MI0L15LAX*************": {
"accessRight": {
"HZTU1cv32******************": "owner"
},
"createDate": 1600971612666,
"creator": "HZTU1cv32******************",
"favIconUrl": "https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196",
"highlights": {
"d1311a13-d334-467c-8915-5faf412a689f": {
"colorNum": 3,
"creator": "HZTU1cv32p******************",
"date": 1600972075045,
"endStr": "afterthepagereloaded?ican'tsto",
"startStr": "tobestoredtofindthehighlighted",
"text": "section"
}
},
"title": "html - How does weava highlighter extension works under the hood? - Stack Overflow",
"url": "https://stackoverflow.com/questions/64052135/how-does-weava-highlighter-extension-works-under-the-hood",
"version": "0.0.3"
}
It isn't perfect, and error-prone (I was able to trick it to highlight the wrong section), but it looks that there's enough for most people.
Another drawback of such an approach, if the article changed a little bit (typo, etc...) the highlights can be lost.
Just like it happens for standard HTML elements like div I'd like to write documentation for my own custom Angular components that gets displayed when hovering them in some other template (my rer-card component for example)
I tried adding
/**
* Test!!
*/
comments almost everywhere in the component but nothing happens.
Is it possible?
v1.31 has added some functionality to custom html and css, see custom html and css data support
Today, front-end developers often code in a superset of HTML/CSS:
Web
Components allow custom HTML elements such as .
PostCSS allows custom CSS properties such
as size and not-yet-standardized CSS features such as :any-link.
Various frameworks allow even greater flexibility in the source
HTML/CSS.
In this iteration, we improved the HTML custom data support
introduced in 1.30 and added CSS custom data support. Use
html.experimental.customData or css.experimental.customData to load
custom data. (html.experimental.custom.tags and
html.experimental.custom.attributes are removed.) Alternatively,
bundle the JSON into an extension with
contributes.html.experimental.customData or
contributes.css.experimental.customData.
Finally, if you are writing a
Language Server that uses vscode-html-languageservice or
vscode-css-languageservice, you can create the Language Service with
custom data. Custom data enhances VS Code's understanding of HTML/CSS.
For example, with these HTML/CSS JSON contributions, VS Code could
provide completion and hover for the custom HTML tag/attribute and CSS
property/pseudoClass:
{
"version": 1,
"tags": [{
"name": "my-button",
"description": "My button",
"attributes": [{
"name": "type",
"description": "My button type",
"values": [
{ "name": "alert" }
]
}]
}]
}
{
"version": 1,
"properties": [{
"name": "my-size",
"description": "Compiles down to `width` and `height`. See details at https://github.com/postcss/postcss-size."
}],
"pseudoClasses": [{
"name": ":my-link",
"description": ":any-link pseudo class. See details at https://preset-env.cssdb.org/features#any-link-pseudo-class."
}]
}
See the link at the top of this answer for more links on how to use this functionality.
Is there a way to extend Visual Studio Code syntax highlighting for specific items using the user settings (or similar methods not involving writing an extension)?
I am using a color theme but would like to change the syntax colouring for a specific namespace of HTML tags, e.g.
<div></div> uses standard colouring from theme
<ext:div></ext:div> uses a different color
No, there is nothing in VSCode proper (no extensions) that will highlight an arbitrary regex. (Well, there is the Search feature, but the highlighting from that is temporary.)
Short of writing an extension or using an existing one that does this, the most capable method of highlight customization is the textMateRules mechanism of editor.tokenCustomizations in settings.json.
Now, the built-in TextMate grammar simply classifies "ext:div" as unrecognized, so the best possible with this approach is to change the highlighting for all unrecognized tags. That would look like this:
// https://code.visualstudio.com/docs/getstarted/themes
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
"meta.tag.other entity.name.tag",
],
"settings": {
"foreground": "#080",
"fontStyle": "bold",
},
},
],
},
Screenshot:
See also this answer that goes through the process of adding textMateRules in a bit more detail.
If you don't find a better, more standard way to do this, the extension TODO Highlight would work for you. It is typically used to highlight special comments for yourself like "FIXME" but could be used in your case with a regex like:
"todohighlight.keywordsPattern": "\\s*<\\s*\\/{0,1}ext:.*\\s*>",
And then you can set the coloring any way you want:
"todohighlight.defaultStyle": {
"color": "red",
// "letterSpacing": "1px",
// "backgroundColor": "rgba(170,102,0,1)",
"backgroundColor": "transparent"
// "borderRadius": "4px",
"isWholeLine": false
},
I have been working on a small Chrome extension with a problem: I can't seem to get my head around and would appreciate someone to look at it with a fresh perspective.
The goal is to create a Chrome extension which enables you to select text on any given website and display an option to send the selection to another website for search using a contextmenu item.
My manifest.json (v2) looks like this:
{
"name": "simple ext",
"version": "0.0.1.0",
"description": "this is a test",
"background": {
"scripts": ["js/test.js"]
},
"default_locale": "en",
"manifest_version": 2
}
messages.json:
{
"contextMenuTitle": {
"message": "Search for '$searchStr$'"
"placeholders":{
"searchStr": {
"content": "$1"
}
}
}
}
And js/test.js:
chrome.contextMenus.create({
"title": chrome.i18n.getMessage("contextMenuTitle", "%s"),
"contexts": ["selection"],
"onclick" : function(e){
if(e.selectionText){
var searchURL = getSearchURL(e.selectionText);
chrome.tabs.create({"url": searchURL});
}
}});
The problem I have is when I select text like "science & technology" the context menu shows the text "Search for 'science technology'" but in the onclick event, I get the correct text (that is 'science & technology'). So my searches work properly. The problem is with the text being shown as the title in the context menu.
I had a look at this and you might want to report a bug at http://crbug.com/ if one doesn't exist allready (had a 'quick' look and couldn't find anything). This 'bug' seems to apply to both the localization and context menu title. Neither will display an ampersand if you only use one, to get one to show for either it seems you have to use two && and then it will show as & (in your bug report, mention that this isnt explained in the docs either). But as you cant change the contents of %s before its shown I don't know how your going to deal with that....Unless you didn't use the %s and updated the title yourself every time they selected something on the page.
Perhaps its being rendered as html?
Try "Science & Technology"