VS Code emmet custom snippets in .vue file - javascript

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.

Related

VS code snippets for salesforce

I am trying to create some vs code snippets for aura and LWC(Salesforce specific languages) so I created one snippet file for javascript now it works in both the languages but is there a way I can restrict JS and html snippets to LWC only or also can someone please confirm how to create snippets for .cmp and .app files to be used on aura HTML, below is my js snippet which works in all sorts of js files and I and trying to restrict it to just lwc
"Print to console": {
"scope": "javascript",
"prefix": "gss",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
I tried using when
"when": "editorTextFocus && !editorReadonly && resourceExtname =~ /\\.cmp/"
But it says
Property when is not allowed.

nuxt.config.js not loading .css files

I am attempting to include my meta information (mostly visible in the static .css and .js files) to my Nuxt application by adding them into nuxt.config.js. I am expecting all of my global meta tags (charset, keywords, etc) as well as my CSS to be loaded when I reload the project on the page I'm testing on, however only using the local vue-meta section gives these desired results. I would like to be able to have most of my meta in the configuration file, so while leaving everything in each page is an option,it is not the one I would like to take.
I get no warnings or errors when loading the page, which makes me believe that it's not a problem, but I have just started using this file and would like to know if it is something trivial
The head I am trying to implement in nuxt.config.js is below. All file paths are valid (since they are what I use in the individual pages and they work just fine.
module.export = {
head:{
meta: [
{charset: 'utf-8'},
{
name: 'keywords', content: '~some keywords~'
},
],
link: [
{ rel: 'stylesheet', href: '/css/style.css' },
{ rel:'stylesheet', href:'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'},
{ rel:'canonical', href:'https://www.self.com' }
],
script: [
{src: 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'},
{src: 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js'},
{src: 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js'},
]
},
//...
}
I also have a similar body in my css: section, however that produced no results as well.
I believe you are missing a period ( . ) in your CSS link href, try:
href: './css/style.css'
Also you can try adding CSS as a property of your head object:
head {
link: [...],
css: ["./css/style.css"],
script: [...]
}/*end of head*/
If you try the second option then remove the CSS ref from your link array.
Good luck!

How to force single quotes in VSC

Maybe this problem is stupid but I really don't know what's going on. In my .eslintrc I added this rule:
"quotes": [1, "single"]
and everytime I save file it changes every " to '. And that's nice. BUT. Every time I restart my Visual studio code. Or make commit using Sourcetree ALL quotes in my project are changed to double ones. Does anybody know what's causing this?
Maybe it's because vscode doesnt know the exact location of your .eslintrc.json, so add the following to your vscode settings json file and reload vscode :
{
"eslint.options": { "configFile": "C:/mydirectory/.eslintrc.json" }
}
also I believe the right way to provide single quotes(even for strings) is like so :
"rules": {
"quotes": [2, "single", { "avoidEscape": true }]
}

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

Grunt Concat same file multiple times

I'd like to use grunt-contrib-concat for application frontend HTML templating purposes and this would be useful for me.
I'd like to define page partials and and concatenate them inside an output file that is going to be compiled by handlebars.
I've got everything set up, however Concat doesn't allow me to use the same file more than once.
Basically concat is filtering the sources so they don't occur more than once. The second partial1.hbs will not be concatenated.
pageconcat: {
src: [
'app/templates/partial1.hbs',
'app/templates/partial2.hbs',
'app/templates/partial1.hbs'
],
dest: 'app/result.hbs'
}
Is there any way to do this?
Update 1
After playing around with grunt's console output function, I was able to debug (of some sort) the concat plugin. Here's what I found out: The input array is deduplicated by grunt for some reason.
Update 2
The deduplication occurs in the foreach file loop that grunt uses. I've managed to bypass that (see answer). I do not know how reliable my solution is but it's a workaround and it works well if you don't put the wrong input.
You may be able to use the file array format to set up two different source sets. Something like this:
{
"files": [{
"src": [
"app/templates/partial1.hbs",
"app/templates/partial2.hbs"
],
"dest": "app/result.hbs"
}, {
"src": [
"app/result.hbs",
"app/templates/partial1.hbs"
],
"dest": "app/result.hbs"
}]
}
added "app/result.hbs" to second source set, as was pointed out in the comments.
Thanks.
Solution
After some debugging I came up with a solution. Certainly not the best, but it works fine, as it should.
I edited the concat.js plugin file inside the node_modules folder the following way:
grunt.registerMultiTask('concat', ...){
var self = this;
//several lines of code
//...
//replace f.src.filter(..) wtih
self.data.src.filter(..);
}

Categories