microsoft / vscode-custom-data Goto Github PK
View Code? Open in Web Editor NEWDocumentation and sample for using VS Code custom data format
License: MIT License
Documentation and sample for using VS Code custom data format
License: MIT License
Does this issue occur when all extensions are disabled?: Yes
Version: 1.89.1 (Universal)
Darwin arm64 23.4.0
Version: 1.89.1 (Universal)
Commit: dc96b837cf6bb4af9cd736aa3af08cf8279f7685
Date: 2024-05-07T05:14:24.611Z (3 wks ago)
Electron: 28.2.8
ElectronBuildId: 27744544
Chromium: 120.0.6099.291
Node.js: 18.18.2
V8: 12.0.267.19-electron.0
OS: Darwin arm64 23.4.0
Steps to Reproduce:
.css
fileoverflow-wrap
anywhere
value is not in the possible values.anywhere
value when manually typed either.According to MDN the value is supported by all type of browsers so it should be in the list and recognized.
Webref contains machine readable contents extracted from web browser specifications, including descriptions
https://github.com/w3c/webref
https://www.npmjs.com/package/@webref/css
So I'm trying to create auto completion snippets with custom data by putting snippets tab stops in the "name" and this is working fine until I reach a attribute that can have multiple values. First I should mention that this isn't a normal use case as for the CMS I'm adding customData for makes use of different functionalities for single quotes vs double quotes vs no quotes. So for attributes in order to work around how custom data works, put a valueSet as 'v' and then have the name of the attribute contain the snippet with all possible values. This way if I have attributes that dont have a "name" or attributes with a "name" but must have single quotes or no quotes at all in the value I can do this. What I'm requesting here is how with defining a snippet with multi values eg:
${1|one,two,three|}
You are unable to put another tab stop in those values.
What I would like to do would be
${1|value,${2:'$3'}|}
Here's a real world use case:
{
"name": "cms:folders",
"description": "```html \n <cms:folders masterpage='news.php'><cms:show k_folder_title /> <br></cms:folders> \n ```\n=======\n\n\nThe **folders** tag can be used to enumerate the virtual folders that have been defined for a template.\n\n\nPlease see [**Core Concepts - Folders**](../concepts/using-folders.html) for an in-depth discussion of this tag.\n\n\nParameters\n----------\n\n\n\n\n* masterpage\n\n* root\n\n* childof\n\n* hierarchical\n\n* depth\n\n* orderby\n\n* order\n\n* exclude\n\n* extended_info\n\n\n\n### masterpage\n\n\nThis parameter can be used to specify the template the folders of which are to be enumerated. If skipped, the template this tag is being used from is used.\n\n\n### root\n\n\nOnly a sub-section of the folders tree can be enumerated by specifying a folder as this parameter. The folder specified as the root is returned along with all its children.\n\n\n### childof\n\n\nOnly a sub-section of the folders tree can be enumerated by specifying a folder as this parameter. Only the children of the specified folder are returned.\n\n\n### hierarchical\n\n\nBy setting this parameter the **folders** tag can be made to enumerate the folders in their hierarchical order. If skipped, the folders are enumerated in the alphabetical order of their names.\n\n\n### depth\n\n\nThis parameter can be set to specify the maximum level in hierarchy (i.e. depth) that will be reached during enumeration. This can be used, for example, to list only the top folders in the tree by setting the depth to 1. A depth of 0 means unlimited depth.\n\n\n### orderby\n\n\nThis parameter can be set to order the enumerated folders according to the following- *name*, *title*, *id*, *count* or *weight*. If skipped, *name* is used as default.\n\n\n### order\n\n\nCan be set to specify whether the enumerated folders are ordered in the ascending order or in descending order. Valid values are *asc* and *desc*. Default is *asc*.\n\n\n### exclude\n\n\nFolders can be excluded from being enumerated by specifying them with this parameter. If an excluded folder has children, they are excluded too. \n\nIf multiple folders are to be excluded, separate them with comma.\n\n\n### extended_info\n\n\nIf this parameter is set, additional variables get set to report the changes in hierarchy encountered by the **folders** tag, as it traverses through the folder tree. Please see the **Variables** section below.\n\n\nVariables\n---------\n\n\nThe following variables are set to provide information about each folder that gets enumerated\n\n\n\n\n* k_folder_id\n\n* k_folder_name\n\n* k_folder_title\n\n* k_folder_desc\n\n* k_folder_link\n\n* k_folder_pagecount\n\n* k_folder_totalpagecount\n\n* k_level\n\n\n\nIf the *hierarchical* parameter is set to '1', the following variables also get set to indicate the current position in the hierarchy as this tag enumerates the folders -\n\n\n\n\n* k_level_start\n\n* k_element_start\n\n* k_element_end\n\n* k_level_end\n\n\n\nYou can use these variables to easily create HTML ordered or unordered lists. Please see **Folders** in **Core Concepts**.\n\n\nRelated Tags\n------------\n\n\n\n\n* [folder](folder.html)\n\n* [listfolders](listfolders.html)\n\n* [dropdownfolders](dropdownfolders.html)\n\n* [parentfolders](parentfolders.html)\n\n* [is_ancestor](is_ancestor.html)\n\n* [breadcrumbs](breadcrumbs.html)\n\n* [pages](pages.html)\n\n* [archives](archives.html)\n\n* [templates](templates.html)\n\n* [comments](comments.html)\n\n\n\n'",
"attributes": [
{
"name": "${masterpage:masterpage}=${1|k_template_name,${2:'$3'}|} ", //this line
"description": "Pick either k_template_name or fill in the second tab place, not both. This parameter can be used to specify the template the folders of which are to be enumerated. If skipped, the template this tag is being used from is used.\n\n",
"valueSet": "v"
},
{
"name": "${root:root}=${1|k_template_name, ${2:'$3'}|} ", //this line
"description": "Pick either k_template_name or fill in the second tab place, not both. Only a sub-section of the folders tree can be enumerated by specifying a folder as this parameter. The folder specified as the root is returned along with all its children.\n\n",
"valueSet": "v"
},
{
"name": "${childof:childof}=${1|k_template_name,${2:'$3'}|} ", //this line
"description": "Pick either k_template_name or fill in the second tab place, not both. Only a sub-section of the folders tree can be enumerated by specifying a folder as this parameter. Only the children of the specified folder are returned.\n\n",
"valueSet": "v"
},
{
"name": "${hierarchical:hierarchical}='${1|0,1|}' ",
"description": "By setting this parameter the **folders** tag can be made to enumerate the folders in their hierarchical order. If skipped, the folders are enumerated in the alphabetical order of their names.\n\n",
"valueSet":"v"
},
{
"name": "${depth:depth}='$1",
"description": "This parameter can be set to specify the maximum level in hierarchy (i.e. depth) that will be reached during enumeration. This can be used, for example, to list only the top folders in the tree by setting the depth to 1. A depth of 0 means unlimited depth.\n\n",
"valueSet": "V"
},
{
"name": "${orderby:orderby}='${1|name,title,id,weight,count|}' ",
"description": "This parameter can be set to order the enumerated folders according to the following- *name*, *title*, *id*, *count* or *weight*. If skipped, *name* is used as default.\n\n",
"valueSet": "v"
},
{
"name": "${order:order}='${1|asc,desc|}' ",
"description": "Can be set to specify whether the enumerated folders are ordered in the ascending order or in descending order. Valid values are *asc* and *desc*. Default is *asc*.\n\n",
"valueSet": "v"
},
{
"name": "${exclude:exclude}='${1:folder_name}${2:, another_folder}'",
"description": "Folders can be excluded from being enumerated by specifying them with this parameter. If an excluded folder has children, they are excluded too. \n If multiple folders are to be excluded, separate them with comma.\n\n",
"valueSet": "v"
},
{
"name": "${extended_info:extended_info}='${1|0,1|}'",
"description": "If this parameter is set, additional variables get set to report the changes in hierarchy encountered by the **folders** tag, as it traverses through the folder tree. Please see the **Variables** section below.\n\nVariables\n---------\n\nThe following variables are set to provide information about each folder that gets enumerated\n\n\n * k_folder_id\n * k_folder_name\n * k_folder_title\n * k_folder_desc\n * k_folder_link\n * k_folder_pagecount\n * k_folder_totalpagecount\n * k_level\n \nIf the *hierarchical* parameter is set to '1', the following variables also get set to indicate the current position in the hierarchy as this tag enumerates the folders -\n\n\n * k_level_start\n * k_element_start\n * k_element_end\n * k_level_end\n \nYou can use these variables to easily create HTML ordered or unordered lists. Please see **Folders** in **Core Concepts**.\n\nRelated Tags\n------------\n\n\n * [folder](folder.html)\n * [listfolders](listfolders.html)\n * [dropdownfolders](dropdownfolders.html)\n * [parentfolders](parentfolders.html)\n * [is_ancestor](is_ancestor.html)\n * [breadcrumbs](breadcrumbs.html)\n * [pages](pages.html)\n * [archives](archives.html)\n * [templates](templates.html)\n * [comments](comments.html)\n \n",
"valueSet": "v"
}
]
},
The lines to be looking where I'd be using this feature are commented with //this line
Now I'm not sure if this is a customData feature or if its another part of the HTML language server, but since I'm using customData for this I posted this here.
I've looked through the information here and several other sites and JSON documents, and the one thing I cannot find an answer to, is how to define a property for only certain tags. For example, NativeScript supports a placeholder-color property on the TextField tag, but VSCode does not recognize it. I've added it as a property to a CSS custom data file as described, but that makes the property available to ALL tags -- not just the TextField tag. If this is indeed new functionality, then I suggest that the property object contain a tags property which would be an array of strings.
{
"version": 1.1,
"properties": [
{
"name": "placeholder-color",
"description": "Color of the placeholder text.",
"tags": ["TextField", "Button"]
}
]
}
On the other hand, if this is already supported in some way, could you please make it more clear in your documents?
Thanks!
Eric
Type: Bug
Enter the white-space
property in a CSS file, but no suggestions are triggered.
With the Trigger Suggest keyboard shortcut, there are only some common values.
Values such as nowrap
and pre
disappear.
Expect like this:
VS Code version: Code 1.72.2 (d045a5eda657f4d7b676dedbfa7aab8207f8a075, 2022-10-12T22:15:18.074Z)
OS version: Windows_NT x64 10.0.22621
Modes:
Sandboxed: No
Item | Value |
---|---|
CPUs | Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz (8 x 2112) |
GPU Status | 2d_canvas: enabled canvas_oop_rasterization: disabled_off direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok skia_renderer: enabled_on video_decode: enabled video_encode: enabled vulkan: disabled_off webgl: enabled webgl2: enabled webgpu: disabled_off |
Load (avg) | undefined |
Memory (System) | 11.80GB (5.14GB free) |
Process Argv | --crash-reporter-id 76088c10-0186-42e8-9434-fc9aba83ae2a --crash-reporter-id 76088c10-0186-42e8-9434-fc9aba83ae2a |
Screen Reader | no |
VM | 0% |
Extension | Author (truncated) | Version |
---|---|---|
vscode-language-pack-zh-hans | MS- | 1.72.10121008 |
vsliv368cf:30146710
vsreu685:30147344
python383:30185418
vspor879:30202332
vspor708:30202333
vspor363:30204092
vswsl492:30256859
vslsvsres303:30308271
pythonvspyl392:30443607
vserr242cf:30382550
pythontb:30283811
vsjup518:30340749
pythonptprofiler:30281270
vshan820:30294714
vstes263cf:30335440
pythondataviewer:30285071
vscod805:30301674
binariesv615:30325510
bridge0708:30335490
bridge0723:30353136
cmake_vspar411:30581797
vsaa593:30376534
pythonvs932:30410667
cppdebug:30492333
vsclangdf:30486550
c4g48928:30535728
dsvsc012:30540252
azure-dev_surveyone:30548225
vscccc:30566498
pyindex848:30577860
nodejswelcome1:30587005
fc301958:30595537
2e4cg342:30596373
For example, :has
and :is
are functions, please consider to add ()
to the name.
Here is a list I found need ()
:
:dir()
:has()
:is()
:nth-col()
:where()
::part()
::slotted()
I see that there is a mix of content and licenses in various parts of this repository (depending on their originating source, which makes total sense to me).
I wanted to inquire specifically about the web-data
package/directory, and the data
folder within. These don't seem to have a specific license applied, I'm not sure if the license from the root of the project applies, and so I wonder how they are licensed according to you?
Appreciate your help figuring this out.
Currently, an attribute can take the following schema (this is an example that illustrates all the possible items that can be included in an attribute):
{
"name": "onclick",
"description": {
"kind": "markdown",
"value": "# Hello World"
},
"valueSet": "x",
"values": [{
"name": "test",
"description": "test test test",
"references": [{
"name": "example",
"url": "https://example.com"
}]
}],
"references": [{
"name": "example",
"url": "https://example.com"
}]
}
There currently is no way to suggest that an attribute may contain something other than a string. For instance, the above attribute, onclick
, takes a JavaScript expression. Thus, the attribute should format its contents as JavaScript, not as plaintext.
Since onclick
is a supported attribute, JavaScript syntax highlighting within it is already supported:
It would be great if we could extend this to custom attributes using a new property such as 'contentType' that would allow one to opt in to different content types. For instance, Alpine.js has a custom attribute called @click
that would be styled as plain text when using custom data, but should be styled as JavaScript.
I have contributed new custom editor and I am opening multiple custom editors of same type for a single document(single file)(based on cursor position).
I want to differentiate these custom editor as all editor/WebView panels will have same name as file name(example.cscratch).
I tried to update WebView panel's title variable at resolveCustomTextEditor method of CustomTextEditorProvider, but WebView panel name was not renamed in vscode UI.
I can see that tittle variable of WebView panel object updated but WebView panel's UI still contains file name as title.
If we create Webview panel using vscode.window.createWebviewPanel() API, then we can rename WebView panel just by updating title variable but same thing is not working for custom editor's WebView Panel.
Working for normal WebView panel:
this._panel.title = 'NewName.extension';
https://github.com/microsoft/vscode-extension-samples/blob/133fa26af64ba8760559c5a06299953673d60763/webview-sample/src/extension.ts#L165
Not working for custom editor's Webview panel:
Steps to reproduce:
Expected output: Custom editor of example.cscratch should contain title as 'exampleNew.cscratch' as we have update title of WebView panel in the resolveCustomTextEditor method.
Actual output: Custom editor of example.cscratch contain title as 'exampleNew.cscratch' even though we update title.
Any other way to update custom editor's WebView panel title?
Type: Bug
Enter the backdrop-filter
property in a CSS file, but no suggestions are triggered.
However, filter
property works fine.
values listed in the mdn.
https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
none
| <filter-function-list>
backdrop-filter =
none |
<filter-value-list>
<filter-value-list> =
[ <filter-function> | <url> ]+
<filter-function> =
<blur()> |
<brightness()> |
<contrast()> |
<drop-shadow()> |
<grayscale()> |
<hue-rotate()> |
<invert()> |
<opacity()> |
<sepia()> |
<saturate()>
<url> =
url( <string> <url-modifier>* ) |
src( <string> <url-modifier>* )
<blur()> =
blur( <length>? )
<brightness()> =
brightness( [ <number> | <percentage> ]? )
<contrast()> =
contrast( [ <number> | <percentage> ]? )
<drop-shadow()> =
drop-shadow( [ <color>? && <length>{2,3} ] )
<grayscale()> =
grayscale( [ <number> | <percentage> ]? )
<hue-rotate()> =
hue-rotate( [ <angle> | <zero> ]? )
<invert()> =
invert( [ <number> | <percentage> ]? )
<opacity()> =
opacity( [ <number> | <percentage> ]? )
<sepia()> =
sepia( [ <number> | <percentage> ]? )
<saturate()> =
saturate( [ <number> | <percentage> ]? )
My last issue #55 is fixed.
However, if you proceed to this step as shown in the image below,
then press TAB key, the suggestion list will NOT show automatically unless you press the shortcut (default is Ctrl + Space) manually.
But if you spell the white-space
completely and type a colon, it will work again.
VS Code version: Code 1.74.2 (e8a3071ea4344d9d48ef8a4df2c097372b0c5161, 2022-12-20T10:29:14.590Z)
OS version: Windows_NT x64 10.0.22621
Modes:
Sandboxed: No
Item | Value |
---|---|
CPUs | Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz (8 x 2112) |
GPU Status | 2d_canvas: enabled canvas_oop_rasterization: disabled_off direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok skia_renderer: enabled_on video_decode: enabled video_encode: enabled vulkan: disabled_off webgl: enabled webgl2: enabled webgpu: disabled_off |
Load (avg) | undefined |
Memory (System) | 11.80GB (3.85GB free) |
Process Argv | --crash-reporter-id 76088c10-0186-42e8-9434-fc9aba83ae2a |
Screen Reader | no |
VM | 0% |
vsliv368cf:30146710
vsreu685:30147344
python383:30185418
vspor879:30202332
vspor708:30202333
vspor363:30204092
vswsl492:30256859
vslsvsres303:30308271
pythonvspyl392:30443607
vserr242cf:30382550
pythontb:30283811
vsjup518:30340749
pythonptprofiler:30281270
vshan820:30294714
vstes263cf:30335440
pythondataviewer:30285071
vscod805:30301674
binariesv615:30325510
bridge0708:30335490
bridge0723:30353136
cmake_vspar411:30581797
vsaa593:30376534
pythonvs932:30410667
cppdebug:30492333
vsclangdf:30486550
c4g48928:30535728
dsvsc012:30540252
azure-dev_surveyone:30548225
vscccc:30610679
pyindex848:30577860
nodejswelcome1:30587005
2e4cg342:30602488
gswce1:30612156
3d0df643:30613357
f6dab269:30613381
fim-prod:30623723
vscsbc:30628655
Regression of #55.
https://github.com/microsoft/vscode-custom-data/pull/56/files#diff-f0bbe48b1fb24ff03380a7b65cd9212a4e93584c37867b3201809db34b1fb40bR122 no longer works because the syntax for white-space
is now normal | pre | nowrap | pre-wrap | pre-line | break-spaces | [ <'white-space-collapse'> || <'text-wrap'> || <'white-space-trim'> ]
(||
causes it to not match I think).
I havepostcss
selected as syntax for *.css
files and I found I'm unable to use autocomplete values defined in css.css-data.json
until I choose css
syntax for those files which obviously disables other language features.
How do I configure customData so whatever I define in css.css-data.json
will work with postcss
syntax?
I tried postcss.customData
without any luck
Thanks in advance
Question or idea: Can tags suggest/ auto-complete only the attributes / valueset that have been specified in the tag definition of the HTML Custom Data json file? Because I would like certain tags to be very limited in suggestion/auto-complete, without being populated by other global attributes? They shouldn't suggest any other attribute/values than the defined in the custom data directive. It could be set as a tag directive... Something like:
{ "tags": [ { "name": "foo", "description": "The foo element", "suggestOnlyPrivatAttr": true, "attributes": [ { "name": "bar" }, { "name": "baz", "values": [ { "name": "baz-val-1" } ] } ] } ] }
Don't know if this is even possible. Would be nice to have.
The logical properties 'block-size' and 'inline-size' have their help-text switched around. According to the spec for a default ltr ttb layout the block-size attribute corresponds to the height attribute. For 'inline-size' it corresponds to the width attribute.
vscode-custom-data/web-data/css/css-schema.xml
Lines 1100 to 1101 in 454cf77
vscode-custom-data/web-data/css/css-schema.xml
Lines 3691 to 3692 in 454cf77
This CSS feature is deprecated 1. There's no indication of that in the intellisense.
vscode-custom-data/web-data/css/css-schema.xml
Lines 1827 to 1829 in 044bb7a
The impact of this support would be much larger should HTMLModules ship, and the necessary adjustments for that context be made.
Unlike more design-oriented editors like WebStorm, DreamWeaver (and Visual Studio's deprecated editor), VSCode doesn't seem to exhibit any awareness between the DOM and Script.
For example, suppose you are editing an HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id=myButton></button>
<my-custom-element id=myCustomElement></my-custom-element>
<script>
myButton.title = 'hello';
myCustomElement.addEventListener()
myCustomElement.myProp=
</script>
</body>
</html>
VSCode doesn't recognize that myButton is an HTMLButtonElement, and myCustomElement is a my-custom-element. Adding support for this kind of synergy between the two expression types (HTML, JavaScript) would (obviously) make editor support for properties and events meaningful.
Support for an extended schema might also help with JSX and tagged template libraries as well, I assume?
And of course it would quite helpful for the (admittedly minority of) developers who edit HTML files.
Currently, when adding new properties via a properties
field, they're added without any values.
At least, we should have a way to add an array of potential values, both for existing properties, and for our custom properties.
Ideally, it would be awesome if we could define a syntax for the property to use โย I see that the mdn-data-importer already has some utilities that could be used to parse it โย why not allow this as a part of the css-data?
Right now developers have to use custom extensions when they want to provide custom values to their projects, having an ability to do this via css-data seems like the most straightforward way if it was possible, with an ability to generate such css-data.json files from existing design-tokens definitions and so on.
If this is something the team would be interested in and could provide guidance in how to best implement this โย I would be happy to help.
Some definitions of HTML tags can be defined inline in same html file source. Either as from inline script
tag with custom element class or from HTML markup as Declarative Custom Element.
In both cases the custom tag is
Inline DCE sample, there are about a dozen of other implementations, each need the plugin example to follow.
Code assistance is not complete. For some properties it shows all available values, for some just half, for some nothing.
Does this issue occur when all extensions are disabled?: Yes
I have disabled all extensions manualy and removed all configurations from settings.json
. Also tried Start Extension Bisect
, it shows CODE issue.
Steps to Reproduce:
.scss
file with some styles.white-space
property, there will be no one useful.align-items
property, there will be just some incomplete list of values, no start
, end
, etc related to grids.overflow
property, there will be all properties available.Screenshots
Any way to define css.customData
& html.customData
globally?
With the new emergence of htmx, no extension currently handles perfectly the htmx
data extension on VSCode because the customData
field is not extendable on those templating languages, even though we are writing a lot of HTML inside.
In a package.json
, I would expect this to work:
"contributes": {
"html": {
"customData": [
"./html.htmx-data.json"
]
},
"gohtml": {
"customData": [
"./html.htmx-data.json"
]
}
}
Empirical tests on my fork of a fully working extension for html files: otovo/htmx-tags@main...grouville:htmx-tags:main show that it does not
With html.customData
I can add custom tags, but I didn't find any similar for css.customData
. Is it possible?
In light of microsoft/vscode#85610 and microsoft/vscode-html-languageservice#75, we should give these value sets more descriptive names, so others could reuse them.
@aeschli fyi
Does this issue occur when all extensions are disabled?: Yes
Steps to Reproduce:
white-space
propertyHover text then shows:
Shorthand property for the 'white-space-collapsing' and 'text-wrap' properties.
I can't find any information about these properties, except some old discussions that say they don't exist.
Also, the source of this hover text is pretty opaque; I can't find it on GitHub. If someone points me to a more appropriate repository, I'll open the issue there.
I am on Windows 10 and using Visual Studio Code 1.43.1
I downloaded the zip file and exactly following the instructions. I don't see anything happening when I type <my- or hover.
Do I need to edit this syntax?
"html.customData": ["./html.html-data.json"],
I ultimately want to edit the settings.json at %AppData%\Code\User with a custom filename.html-data.json for distribution.
So I'm current;y writing an extension to bring CouchCMS custom html tag support into VSCode with hover and auto completion with snippet style attributes. All is going well until I got to this tag
<cms:excerptHTML />
I wrote the customData as I did for every other tag before, literally almost exactly the same as the tag that came before it,
<cms:excerpt />
went to test it to make sure I didn't have any typos and the auto completion "attributes" didn't show at the top of the auto completion list when triggered via "Ctrl + Space". Played around with the tag and found if I remove the uppercase from the tag and make it lower case it works as expected. Here is what I have in the customData file for that tag:
{
"name": "cms:excerptHTML",
"description": "```html \n <cms:excerptHTML count='130' ignore='img'> \n ```\n===========\n\n\nThe **excerptHTML** tag can be used to create an excerpt of any HTML content that is enclosed within its opening and closing tags. \n\nUnlike the **excerpt** tag, excerptHTML preserves the HTML formatting of the truncated contents (except for the HTML tags specified in its *ignore* parameter).\n\n\nExamples -\n\n\n\n ```html \n<cms:excerptHTML><cms:show content /></cms:excerptHTML>\n\n ``` \n\n ```html \n<cms:excerptHTML count='130' ignore='img'>\n <cms:show content />\n</cms:excerptHTML>\n\n ``` \nThe snippets are outputting an excerpt of the value contained within the *content* variable.\n\n\nParameters\n----------\n\n\n\n\n* count\n\n* ignore\n\n* trail\n\n\n\n### count\n\n\nThe maximum number of words that the excerpt can contain. The default value is 50 words.\n\n\n### ignore\n\n\nThe HTML elements to weed out of the excerpt. For example, you might not want to have any images in the excerpt. \n\nIf you wish to ignore multiple tags, separate the tagnames by using comma e.g.\n\n\n\n ```html \nignore='img, table'\n\n ``` \n### trail\n\n\nBy default the produced excerpt is appended with '...' (three ellipses). You can change this by using this parameter.\n\n\n\n ```html \n<cms:excerptHTML trail=\" (<a href=\"<cms:show k_page_link />\">read more..</a>)\"><cms:show blog_content /></cms:excerptHTML>\n\n ``` \nThe snippet above will append a '*read more..*' link leading to the page-view of the item being shown in excerpted form.\n\n\nVariables\n---------\n\n\nThis tag does not set any variables of its own.\n\n\nRelated Tags\n------------\n\n\n\n\n* [excerpt](excerpt.html)\n\n\n\n'",
"attributes": [
{
"name": "${count:count}='${1:50}'",
"description": "The maximum number of words/characters that the excerpt can contain. The default value is 50. \n By default, this parameter is applied to the number of words in the excerpt. \n By setting the 'truncate_chars' parameter (see below) to '1', it can be made to apply to the number of characters in the excerpt instead.\n\n",
"valueSet": "v"
},
{
"name": "${ignore:ignore}='${1:table, span, img}'",
"description": "The HTML elements to weed out of the excerpt. For example, you might not want to have any images in the excerpt. \n If you wish to ignore multiple tags, separate the tagnames by using comma e.g.\n\n\n ```html \nignore='img, table' \n ``` \n",
"valueSet": "v"
},
{
"name": "${trail:trail}='${1:...}'",
"description": "By default the produced excerpt is appended with '...' (three ellipses). You can change this by using this parameter.\n\n\n ```html \n<cms:excerptHTML trail=\" (<a href=\"<cms:show k_page_link />\">read more..</a>)\"><cms:show blog_content /></cms:excerptHTML> \n ``` \nThe snippet above will append a '*read more..*' link leading to the page-view of the item being shown in excerpted form.\n\nVariables\n---------\n\nThis tag does not set any variables of its own.",
"valueSet": "v"
}
]
},
Is there any way to make the uppercase work? The tag is case sensitive so I cant just make it lowercase.
Thanks.
I've been working on a VS Code extension for Ecmarkup, which is an HTML-based dialect. However, there is a case where I've run into issues with the html language service and have spent far too much time trying to build a custom embedded language service just to work around. In Ecmarkup, there is a tag that is essentially treated like RAWTEXT in the same way that a <style>
or <script>
tag might be parsed: <emu-grammar>
. The contents of this tag are essentially a different language mode with custom syntax based on Grammarkdown.
Unfortunately, there's no way to indicate such a tag should be parsed in this way, and as a result I've had to essentially fork the html language service and implement a custom parser to work around this case.
I'd imagine something like this:
{
"tags": [
{ "name": "style", "content": "rawtext", ... }
]
}
npm i @vscode/web-custom-data
Some HTML tags are only relevant inside of other HTML elements (i.e., <tr>
should be inside of a <table>
, <thead>
, <tfoot>
, or <tbody>
). Currently there is no way to control when a tag should appear in the auto-suggest list.
I would suggest adding a mechanism to either limit or prioritize specific auto-complete elements using attributes such as:
"show": ["tag"]
- Indicates the tags to show or prioritize as children of the current tag definition. Allows custom tags"showIn": ["tag"]
- Indicates this element should be shown or prioritized as a child of a specified tag definition. AllowsAs an example:
{
"tags": [
{ "name": "table", "show": ["colgroup", "col", "thead", "tbody", "tfoot", "tr"], ... },
{ "name": "tr", "showIn": ["table", "thead", "tbody", "tfoot"], ... }
]
}
This would be helpful for the VSCode extension for Ecmarkup extension I've been working on periodically over the last few years, as certain elements only have meaning as children of other elements (i.e., an <emu-nt>
should be the child of an <emu-rhs>
and doesn't make sense elsewhere.
Issue Type: Bug
<img src='#' draggable="false" />
draggable
and click on the "Drag and Drop API" text in the tooltip.VS Code version: Code 1.51.1 (e5a624b788d92b8d34d1392e4c4d9789406efe8f, 2020-11-10T23:34:32.027Z)
OS version: Windows_NT x64 10.0.18363
Hi, is it possible to overwrite the default attribute description? In html.html-data.json, I define my custom tag with the attribute "id" and a description for that attribute. Now I want vs-code to display my id attribute description when I enter it in the html file, but instead vs-code displays the description provided by MDN. Is it possible for my custom description to override the one provided by MDN?
Even if VSCode's lack of support for interplay between the HTML DOM and JavaScript means that there might be no pressing need to support events and properties (except for supporting JSX / tagged template literal libraries?), supporting an enhanced schema, as is being discussed here and being tested out here, as the default schema, would make editing such JSON files by hand easier.
Admittedly, there might not yet be a consensus on a single schema yet, so maybe this is a bit early.
Extending this proposal:
Look for an entry in package.json called "customElements".
If the value is a string, first search for a file relative to the root of the package.
For example:
"customElements": "./custom-elements.json"
Also support searching for a folder:
"customElements": "./custom-elements/"
If it points to a folder, look for a file within that folder with name most closely aligned with the language preference. For example, for Algerian Arabic:
"custom-elements/custom-elements.ar-DZ.json"
If no match found, try:
"custom-elements/custom-elements.ar.json"
If that's not found, try:
"custom-elements/custom-elements.json"
If instead of a string, the value of custom elements is an array:
"customElements": ["./src/my-button/my-button.json", "./src/my-input/my-input.json"]
Apply the same rules as above, for each item
All these files would apply to HTML editing, incorporated into /web-data
I am currently working on an Angular project where I created a custom-elements.json
and then defined the corresponding html.Data
in .vscode/settings.json.
The thing is, every time I modify my JSON file and then go to my HTML, the clues on hover are not showing updated.
I saw issue #67750 and it says it has been fixed. Do I need to do some special configuration to it?
I saw the post here of:
https://github.com/microsoft/vscode-custom-data/tree/master/samples/webcomponents
about a month back, and it seems to have re-introduced experimental.custom.tags and attributes again? I thought it was all now html.customData rather than back to last Nov's custom.tags?
The following code should be valid as per spec from SVG2.0:
https://www.w3.org/TR/SVG/geometry.html#RProperty
.vertex {
filter: drop-shadow(rgba(207, 171, 255, 0.9) 0px 0px 20px);
fill: #b082ee;
r: 20;
stroke: 5;
}
Unknown property: 'r' lit-plugin(no-invalid-css)
I'm happy to do a PR, but unclear what's the process and pipeline to add it correctly.
{
"html.customData": ["./.vscode/data-token.json"]
}
{
"version": 1.1,
"globalAttributes": [
{
"name": "data-token",
"description": "def token for submit"
}
]
}
html.customData
configuration work in vue files?Not sure if this is the correct location to place this, saw another user was directed here after submitting their issue directly to VSCode repo.
Essentially right now the 'customData' fields defined in VSCode are ignored when used inside a <workspace-name>.code-workspace
file under the settings
property however it does work when creating a .vscode/settings.json
file.
This is somewhat confusing as the documentation states specifically it only currently works in workspace settings and I would expect the code-workspace
files to be supported.
VSCode Version: 1.45.1
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.