We Keep Coding

VS Code emmet custom snippets in .vue file

I'm loving the power of Emmet snippets in VS Code as I am new to this IDE. I have a question that I can't seem to google to get an answer. So I figured out how to add emmet snippets into my .vue files by adding the following into my VS code settings.json:
"emmet.syntaxProfiles": {
"vue-html":"html",
"vue":"html",
}
And that works well, but I wanted to add a couple custom snippets, so I added this entry as well:
"emmet.extensionsPath": [
"C:\\CodeSnippets"
],
The relevant code in one of those snippet files is the following:
{
"html": {
"snippets": {
"ull": "ul>li[id=${1} class=${2}]*2{ Will work with html, pug, haml and slim }",
"oll": "<ol><li id=${1} class=${2}> Will only work in html </ol>",
"vgc": "{ Wrap plain text in curly braces }",
"ig": "{import ${1} from './${2:components}/${1}.vue'}"
}
},
"css": {
"snippets": {
}
}
}
Now when I'm inside of a '.html' file I can type oll and it will add the snippet as seen in screenshot .
But when inside of the .vue file I type the same thing and nothing happens. Now I know Emmet is working in my .vue file because I can do other emmet stuff in there as seen in screen shot below:
I'm sure I'm missing some type of configuration but can't figure it out. Any ideas?

What you're looking for is probably
> Snippets: Configure User Snippets
Then selecting
vue-html.json
With this example JSON
{
"test snippet": {
"prefix": "vvtest",
"body": [
"some ${1:test}"
],
"description": "some random test snippet for the template part of Vue"
}
}
Press tab and you'll get the following
PS: note that the ${1:test} part will make that test is highlighted so that it can be quickly overridden. You can also cycle towards a number 2, 3, etc...with other $2 ... with tab.
Here is the official page for this feature.

Emmet JS snippets in VS Code

Has anyone ever succeeded in getting Emmet JS snippets to work in VS Code or even in Sublime?
The solution from https://stackoverflow.com/a/16943996/2012407 did not work for me.
These are my settings:
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue-html": "html",
"plaintext": "html"
},
This is my snippets.json:
{
"javascript": {
"abbreviations": {
"cl": "console.log",
"va": "var"
},
"snippets": {
"cl": "console.log",
"va": "var"
}
},
"css": {
"snippets": {
"cb": "color: black",
"bsd": "border: 1px solid ${1:red}"
}
}
}
There's no problem with CSS, SCSS, HTML, and all the rest - only JS. I've tried abbreviations or snippets, but the Emmet expansion puts HTML tags around what I write: cl becomes <cl> in Javascript & javascriptreact files.
I also tried js and javascriptreact in the snippets definition for the language with no luck.

No need to add JS snippets in Emmet: the new concept of Emmet 2.0 (already available in VS Code; v2.0 in beta and not publicly released yet) works as autocomplete provider so you can simply use native VS Code snippets instead

So I will put an example here for the built-in VS Code snippets, which are still not my favorite.
Open the command prompt with cmd+shift+p and type user snippets. There is already an example in there. Uncomment it, save, and you can use it straight away by typing the prefix.
I had to create the same snippet file named javascriptreact.json as well for it to work in most of my JS files - Javascript React (babel)
Ex:
{
"Test": {
"prefix": "ts",
"body": [
"console.log('test')",
"$1"
],
"description": "Prints test"
}
}
Now I have Emmet mapped to ctrl+e and having the built-in snippets limited to the intellisense is not great. I'd like a key binding like ctrl+e, and I am a big fan of Emmet.
I am still keen on having it working with Emmet using the same key binding if anyone knows.

This article solve issue in my case
https://medium.com/#eshwaren/enable-emmet-support-for-jsx-in-visual-studio-code-react-f1f5dfe8809c

Convert yaml to json using javascript [duplicate]

This question already has answers here:
JavaScript YAML Parser [closed]
(4 answers)
Closed 6 years ago.
I got this yaml file:
description:
is_a: AnnotationProperty
labelEN: description
labelPT: descrição
relevance:
is_a: AnnotationProperty
domain: Indicator
labelEN: relevance
labelPT: relevância
title:
is_a: AnnotationProperty
labelPT: título
labelEN: title
range: Literal
and I need to convert it to json, so I can get something like this:
{
"description": {
"is_a": "AnnotationProperty",
"labelEN": "description",
"labelPT": "descrição"
},
"relevance": {
"is_a": "AnnotationProperty",
"domain": "Indicator",
"labelEN": "relevance",
"labelPT": "relevância"
},
"title": {
"is_a": "AnnotationProperty",
"labelPT": "título",
"labelEN": "title",
"range": "Literal"
}
}
and save it in a js variable...
So, how can I do this?
Hey, please check link below for YAML to JSON converter
https://www.yamlonline.com/

You can solve that with a simple javascript script running on node.
install node.js
install the js-yaml package: npm install js-yaml -g
Then save this script into a file, and run it with node.js:
var inputfile = 'input.yml',
outputfile = 'output.json',
yaml = require('js-yaml'),
fs = require('fs'),
obj = yaml.load(fs.readFileSync(inputfile, {encoding: 'utf-8'}));
// this code if you want to save
fs.writeFileSync(outputfile, JSON.stringify(obj, null, 2));

There is—unfortunately—nothing in the standard library in JavaScript that will do this for you.
It's possible to build your own, but it's a lot of work. You would have to build a parser and there are likely a lot of edge cases that you would have to solve for. It might be worth considering using a third-party module.

Node-Red Editor and Library dependencies?

I'm in the process to create my first Node-RED contribution. The node will clean an incoming object based on a sample object provided in the editor. I'm using the RED.editor and the RED.library.
I'm wondering if I need to declare a dependency in my package file. Currently it looks like this:
{
"name" : "node-red-contrib-objectcleaner",
"version" : "0.0.1",
"description" : "Removes properties from incoming (payload) object, that are not in a template object",
"dependencies": { /*Do I need anything here? */
},
"keywords": [ "node-red", "validation", "flow" ],
"node-red" : {
"nodes": {
"objectcleaner": "objectcleaner/objectcleaner.js"
}
}
}
What, if anything, goes into the dependencies? I know I will put node.js dependencies there, but do I need to list the editor/library?

You'll probably do better asking questions like this on the mailing list here:
https://groups.google.com/forum/#!forum/node-red
You shouldn't need to list Node-RED in the dependencies as this will just pull in another copy into the node_modules tree.
You should be fine just using the reference to RED object that is passed in when the node is initialised

Trying to create a Meteor Package

I've been trying to create a Smart Package for the SkelJS framework.
The file is being loaded by the browser but when I try and access the object it exports it says its undefined. I'm using the following code in package.js:
Package.describe({
summary: "SkelJS for Meteor"
});
Package.on_use(function (api) {
api.use('jquery', 'client');
api.add_files(['skel.js'], 'client');
api.export('skel', 'client');
});
Also trying to access Package.skeljs.skel returns undefined as well.
In smart.json I'm using:
{
"name": "skeljs",
"description": "SkelJS for Meteor",
"homepage": "",
"author": "Giles Butler (http://giles.io)",
"version": "0.1.0",
"git": ""
}
I know SkelJS has been loaded because it logs to the console no configuration detected, waiting for manual init but then when I try and run skel.init() it returns undefined.
Any help or tips would be really appreciated.
Thanks
Giles

You also need to modify the first line of skel.min.js/skel.js
Within packages variable scoping still applies so you have to remove the var keyword if you want the file to let other files (such as package.js for api.export) access its variables.
The fix would be to change:
var skel=function() ....
to
skel=function() ....