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.
Related
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.
I have a lot of javascript files in a particular path. Every file has a lot of functions. As per my requirement, I've to document all function names in an excel sheet. So is there any way to automate these using any scripts or tools?
Expected output
Format-> Filename - Function name
Sample -> samplejs.js - Test
The solution I found is -Show Functions VS Code Extension
Modified setting.json of this extension to get the JS files functions.
{
"extensions": [
".ts",
".php",
".js"
],
"native": "/(?:^|\\s)function\\s+\\w+\\(/mg",
"display": "/\\s*function\\s+(\\w+)/1",
"sort": 0
},
Vue single file components enable to create custom blocks (apart from the well-known script, template and style). Official docs: https://vue-loader.vuejs.org/guide/custom-blocks.html#example But is there a way to get syntax highligting to work inside such a custom block? I tried inserting JS code as well as other lang types but there is no syntax highlighting.
Vetur supports syntax highlighting in a custom block:
Vetur provides a setting vetur.grammar.customBlocks that defaults to:
"vetur.grammar.customBlocks": {
"docs": "md",
"i18n": "json"
}
You can
Change vetur.grammar.customBlocks, for example:
"vetur.grammar.customBlocks": {
"docs": "md",
"i18n": "json",
"page-query": "graphql",
"static-query": "graphql"
}
Run the command Vetur: Generate grammar from vetur.grammar.customBlocks (via the Command Palette)
Restart VS Code to get syntax highlighting for custom > blocks.
Valid language value for custom blocks:
All lang values in the support table.
md | yaml | json | php | graphql
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
I am trying to write plugins for sublime text 2 in javascript, using the v8 plugin. There is a demo javascript file called test.js, which seems to be a complete test plugin, but I can not figure out how to activate it.
Has anyone managed to write a plugin for sublime text 2 using javascript?
Is there another way to approach this? I mostly want to send text to javascript to be processed by my various libraries and then send text back.
EDIT:
I am using this project to get v8 working with sublime: https://github.com/akira-cn/sublime-v8
You can try this plugin https://github.com/akira-cn/SublimeJS
Follow example:
/** package.json **/
{
"name": "JSDemo",
"description": "demo plugin powered by SublimeJS",
"version": "0.1.0",
"author": {
"name": "akira-cn",
"email": "akira.cn#gmail.com"
},
"main": "index.js",
"licenses": [{
"type": "The MIT License",
"url": "http://www.opensource.org/licenses/mit-license.php"
}]
}
/** index.js **/
defineCommand("Hello", require("hello.command"));
/** hello.command.js **/
module.exports = function(view, edit) {
view.insert(edit, 0, "HelloWorld");
}
You can do that with node.js. Simple python wrapper should do the trick.
An example of plugin build with node.js: Sublime-HTMLPrettify