Thanks to the Custom emmet snippets not working in vscode I figured out how to configure custom emmet snippets. It works good for the *.html files, but I can't achieve the same for the *.tsx files.
My snippet.json file looks like this: (you can see I tried every possible language id)
{
"typescript": {
"snippets": {
"fm": "FormattedMessage[id]"
}
},
"typescriptreact": {
"snippets": {
"fm": "FormattedMessage[id]"
}
},
"javascript": {
"snippets": {
"fm": "FormattedMessage[id]"
}
},
"javascriptreact": {
"snippets": {
"fm": "FormattedMessage[id]"
}
},
"html": {
"snippets": {
"fm": "FormattedMessage[id]"
}
}
}
Despite that I can only access fm snippet in *.html files.
What should I change to be able to use this snippet in *.tsx files?
You can go to File>Preferences>Configure User Snippets.
From there you can choose typescript.
Here is an example of my snippet:
{
"Create div with className": {
"prefix": ["c"],
"body": ["<div className={styles."],
"description": "Create div with className"
}
}
Related
I am writing a logic gate simulator and have decided to make a VSCode extension for the language it uses. So far, I have a folder named lgc that contains the extension. Inside that folder there are the following:
package.json:
{
"name": "Lgc",
"version": "0.1.0",
"engines": {
"vscode": ">=0.9.0-pre.1"
},
"publisher": "AwesomeCronk",
"contributes": {
"languages": [{
"id": "lgc",
"aliases": ["lgc", "Lgc", "LGC"],
"extensions": [".lgc",".ttb"]
}],
"grammars": [{
"language": "lgc",
"scopeName": "source.lgc",
"path": "./syntaxes/lgc.tmLanguage.json"
}]
}
}
syntaxes/lgc.tmLanguage.json:
{
"$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
"name": "Lgc",
"patterns": [
{
"include": "#keywords"
}
],
"repository":
{
"keywords":
{
"paterns":
[
{
"name:": "keyword.gate.lgc",
"match": "a"
}
]
}
},
"scopeName": "source.lgc"
}
This is a test that should highlight any instance of the letter a as keywords. When I copy this folder to $Home/.vscode/extensions/, and restart VSCode with a .lgc file open, it is not highlighted at all. All the text is white. The status bar shows lgc as the language, so I know VSCode is detecting the language properly. Why doesn't it highlight?
I think you have a typo in your syntaxes/lgc.tmLanguage.json file:
"paterns":
Should be:
"patterns":
Did you know if it's possible to write a vscode plugin to match only a given file?
My plugin already works but add snippets for all .json files. I wish to be able to add these snippets only if the current file is composer.json.
My current package.json (partial) is:
{
"contributes": {
"snippets": [
{
"language": "json",
"path": "./snippets/snippets.code-snippets"
}
]
}
}
The idea is to be able to having something like:
{
"contributes": {
"snippets": [
{
"filename": "composer.json", <-- JUST FOR ILLUSTRATION PURPOSE
"path": "./snippets/snippets.code-snippets"
}
]
}
}
Thanks.
I want for vscode to understand that the language in between <go> tags in a html file should be validated as golang code.
So given:
<go>
// I want to get intellisense and syntax highlighting for golang here
</go>
I currently have the following insides grammars in package.json:
{
"scopeName": "go.html.injection",
"path": "./syntaxes/go.tmLanguage.json",
"injectTo": [
"text.html"
],
"embeddedLanguages": {
"source.go": "go"
}
}
and in syntaxes/go.tmLanguage.json:
{
"scopeName": "go.html.injection",
"injectionSelector": "L:text.html",
"patterns": [
{
"include": "#go-tag"
}
],
"repository": {
"go-tag": {
"begin": "<go>",
"end": "<\/go>",
"name": "go"
}
}
}
Inspecting it using the debug gives it the name go as a textmate scope but the language is still set to html. How can I set the language of the match to golang:
Inspecting the content of script tags show the language set to javascript so this should be possible? I also realise that then the match includes the <go> tag so I understand I now need to add pattern matching and evaluation for that.
Update 20/02/20:
After referring to the vscode svelte extension I figured out how to get syntax highlighting for the tag and innerHTML using this inside syntaxes/go.tmLanguage.json (same package.json):
{
"scopeName": "go.html.injection",
"injectionSelector": "L:text.html",
"patterns": [
{
"include": "#go-tag"
}
],
"repository": {
"go-tag": {
"begin": "(<)(go)",
"beginCaptures": {
"1": {
"name": "punctuation.definition.tag.begin.html"
},
"2": {
"name": "entity.name.tag.html"
},
"3": {
"name": "punctuation.definition.tag.end.html"
}
},
"end": "(<\/)(go)(>)",
"endCaptures": {
"1": {
"name": "punctuation.definition.tag.begin.html"
},
"2": {
"name": "entity.name.tag.html"
},
"3": {
"name": "punctuation.definition.tag.end.html"
}
},
"patterns": [
{
"contentName": "source.go",
"begin": "(>)",
"beginCaptures": {
"1": {
"name": "punctuation.definition.tag.end.html"
}
},
"end": "(?=</go>)",
"patterns": [
{
"include": "source.go"
}
]
}
]
}
}
}
I can now see that vscode is correctly highlighting syntax for the tag and using the imported golang syntax tokens. However it is still displays the language as "html".
My goal is to create a collection of Snippets that will be available in the VSCode Marketplace. These snippets will be for 3 languages (html, css, and JS). This will be helpful for anyone who works on the specific framework, but especially my team.
I know that I can scope snippets (How can I add language-agnostic snippets in vscode?) to multiple languages. I also know that according to the docs I'm supposed to have a contributes object that has a snippets array in it. In my package.json for my vsc-extension the default is like the below:
"contributes": {
"snippets": [
{
"language": "markdown",
"path": "./snippets/markdown.json"
}
]
}
Is it correct for me to then update my package.json to something like:
"contributes": {
"snippets": [
{
"language": "html",
"path": "./snippets/snippets.json"
},
{
"language": "javacript",
"path": "./snippets/snippets.json"
}
]
}
and then have my snippets declare their own scope ("scope": "html")?
The way I went about this was to create a file for each type of snippet: php-snippets.json, js-snippets.json, etc. and then add those files to the snippets array.
"contributes": {
"snippets": [
{
"language": "php",
"path": "./snippets/php-snippets.json"
},
{
"language": "javascript",
"path": "./snippets/js-snippets.json"
}
]
}
One piece of information I left out from my question is that I used the Yo generator to create my snippet project. This was the recommended action in the documentation.
This worked. I added several languages to the snippets array in contributes as seen below.
"contributes": {
"snippets": [
{
"language": "html",
"path": "./snippets/snippets.json"
},
{
"language": "javacript",
"path": "./snippets/snippets.json"
}
,
{
"language": "scss",
"path": "./snippets/snippets.json"
}
]
}
Then inside snippets/snippets.json there is one large object that contains all of my snippets. You can see an example of that below. The key lines for each are "scope": "html and "scope": "scss".
"Each Helper": {
"scope": "html",
"prefix": "each",
"body": [
"{{#each $1}}",
" $2",
"{{/each}}"
],
"description": "Creates each helper -- handlebars"
},
"Break Point Small": {
"scope": "scss",
"prefix": "bps",
"body": [
"",
"#include breakpoint(\"small\") {// 551px and up",
" $1",
"}"
],
"description": "Tablet Break Point --Stencil"
},
I suppose I should have just tried it after not being able to find the answer here or in documentation.
How can I disable the "Copy" (but not cut / paste) functionality of the jsTree right click context menu?
This pretty much did the trick.
$("#housingTree").jstree({
"plugins": ["themes", "html_data", "ui", "crrm", "hotkeys", "contextmenu"],
"core": { "initially_open": ["phtml_1"] },
"contextmenu": {
"items": function ($node) {
return {
"Rename": {
"label": "Rename",
"action": function (obj) { this.rename(obj); }
},
"Create": {
"label": "Create",
"action": function (obj) { this.create(obj); }
},
"Delete": {
"label": "Delete",
"action": function (obj) { this.remove(obj); }
},
"Cut": {
"label": "Cut",
"action": function (obj) { this.cut(obj); }
},
"Paste": {
"label": "Paste",
"action": function (obj) { this.paste(obj); }
}
};
}
}
})
i dont know if the action functions are the default functions or custom functions, but that didnt work for me... anyway your post did set me in the right path! thanks!
this is how i did it, after finding another post:
"contextmenu": {
"items": function ($node) {
var tree = $("#html1Tree").jstree(true);
return {
"Rename": {
"label": "Rename",
"action": function (obj) {
tree.edit($node);
}
},
"Create": {
"label": "Create",
"action": function (obj) {
$node = tree.create_node($node);
tree.edit($node);
}
}
};
}
}
jsTree and Context Menu: modify items
The shorter approach could be
"contextmenu": {
"items": function(node) {
var defaultItems = $.jstree.defaults.contextmenu.items();
console.log("default items : "+JSON.stringify(defaultItems));
delete defaultItems.ccp.submenu.copy;
return defaultItems;
}
},
You can console.log(defaultItems). It wil print json representation of object. You can modify other properties also.
this is my easiest option.
All main code placed in "contextmenu.items" block.
$('#c-list').jstree({
"core": {
"themes": {"responsive": false},
"check_callback": true,
},
"types": {
"default": {
"icon": "fa fa-folder text-warning fa-lg"
},
"file": {
"icon": "fa fa-file text-warning fa-lg"
}
},
"contextmenu":{
'items' : function(node) {
var items = $.jstree.defaults.contextmenu.items();
items.ccp = false;
return items;
}
},
"plugins": ["contextmenu", "dnd", "types", "search", "wholerow","checkbox"]
});