See the following snippet:
"srcPath":{
"prefix": "getSrcPath",
"body": [
"$TM_FILEPATH",
"${1:${TM_FILEPATH/(.*)src.(.*)/${2}/i}}",
"${TM_FILEPATH/[\\\\]/./g}"
]
},
The output of lines 1-3 is :
D:\root\src\view\test.lua
view\test.lua
D:.root.src.view.test.lua
How can I get output like 'view/test.lua'?
Try this snippet:
"srcPath":{
"prefix": "getSrcPath",
"body": [
"$TM_FILEPATH",
"${TM_FILEPATH/.*src.|(\\\\)/${1:+/}/g}",
"${TM_FILEPATH/[\\\\]/\\//g}"
]
}
.*src.|(\\\\) will match everything up to and including the ...src\ path information. We don't save it in a capture group because we aren't using it in the replacement part of the transform.
The (\\\\) matches any \ in the rest of the path - need the g flag to get them all.
Replace: ${1:+/} which means if there is a capture group 1 in .*src.|(\\\\) then replace it with a /. Note we don't match the rest of the path after src\ only the \'s that might follow it. So, not matching those other path parts just allows them to remain in the result.
You were close on this one:
"${TM_FILEPATH/[\\\\]/\\//g}" just replace any \\\\ with \\/.
With the extension File Templates you can insert a "snippet" that contains a variable and multiple find-replace operations.
With a key binding:
{
"key": "ctrl+alt+f", // or any other combo
"command": "templates.pasteTemplate",
"args": {
"text": [
"${relativeFile#find=.*?src/(.*)#replace=$1#find=[\\\\/]#flags=g#replace=.#}"
]
}
}
At the moment only possible with a key binding or via multi command (or similar). Will add an issue to also make it possible by prefix.
Also some of the standard variables are missing.
I am trying to create a snippet using vs code (javascript.json) to do the following code.
const [click, setClick] = useState(false)
I have created the following snippet which sort of works.
"My Custom useState": {
"prefix": "myus",
"body": [
"const [${1:name}, set${1:name}] = useState(${2|true,false|})"
],
"description": "My Custom useState"
}
But in the example, I want to try and find a way to capitalise the second word. So the above snippet output is
const [click, setclick] = useState(false)
Currently, I go back into the code and change to a capital letter by hand, but it has reduced the amount of code I write.
Try this as the body:
"const [${1:name}, set${1/(.)/${1:/capitalize}/}] = useState(${2|true,false|})"
That will "transform" the first letter (.) of that capture group 1 into a capital letter ${1:/capitalize}.
In your case ${1:/upcase} would do the same thing since the capture group only contains the first letter. Normally, ${1:/upcase} will capitalize the entire capture group, not just the first letter like ${1:/capitalize} does.
What will not work is set${1:name/(.)/${1:/capitalize}/} where the default :name is used. You cannot transform a default. See https://github.com/microsoft/vscode/issues/56703
I want to create VSCode snippet to quickly use React's useState. E.g. for a state open
const [open, setOpen] = useState()
I'm currently using
"const [ ${1}, set$1 ] = useState()"
But this gives me const [open, setopen] = useState(). Note the lack of caps on open.
I want to be able to just enter the state name open, and have the snippet sort out the capitalization for setOpen. I know I could use 2 variables, but I don't want to type it out twice since it'll always follow the pattern [foo, setFoo]
I know I can do transforms like ${1:/upcase}, but this capitalizes the entire variable, not just the first letter.
This should work:
"const [ ${1}, set${1/(.*)/${1:/capitalize}/} ] = useState()"
In Sublime Text, multi-line code snippets can be defined with white-spaces in a snippet file.
But as far as I know, VS-Code needs a JSON entry. These require either:
Hard-breaks into a list of double-quoted strings, or
Soft-break a long string using line-breaks \n
This is inconvenient compared to the WYSIWYG approaches other IDEs provide out of the box.
Are there better ways for defining long-blocks of code?
You can define the body of your snippet as an array of strings, each beginning on a new line.
Like this:
"Create for loop":{
"prefix": "mkfor",
"body":[
"for(int i = 0; i < 3; i++)",
"{",
" //code goes here",
"}"
],
"description": "Creates a for loop"
}
or if you install Easy Snippet Maker extension, you can create your snippets by highlighting texts.
You can check out this video for a quick short tutorial
https://youtu.be/g1ouTcFxQSU
Go to File --> Preferences --> User Snippets. Select your preferred language.
Now type the following code to make a for loop snippet:
"Create for loop":{
"prefix": "for",
"body":[
"for(int i = 0; i < 10; i++)",
"{",
" //code goes here",
"}"
],
"description": "Creates a for loop"
}
You are done.
Type "for" in the editor and use the first prediction.
SHORTCUT--
install Snippet-creator extension.
Highlight the code that you need to make snippet.
press ctrl+shift+P and type "Create snippet" on the command palette and
press ENTER.
select language for which you want to create snippet(eg:-CPP), then type
snippet name, type snippet shortcut and then type snippet description.
You are now good to go.
Type the snippet shortcut in the editor that you entered in step 4, and select the prediction (if no prediction comes press ctrl+space) that comes first.
Hope this helps :)
Note: goto File->Preferences->User Snippets. Then select the language in which youcreated the snippet. You will find the snippet there.
I cannot find a good way to create multi-line snippets either. It's probably one of the features I'd like to see improved the most. As another answer suggested, there are a couple extensions out there to help with Snippet creation (like this and this). However, they don't escape literal dollar signs and indentation isn't great.
When browsing for answers to this, I stumbled across a Pen by Denis Malinochkin (linked from this issue). However, it also did not escape dollar signs properly, so I forked it and added this line to handle literal dollar signs. Here it is: https://codepen.io/cbejensen/pen/WXLxaE
Hope that helps!
P.S. - This is the line I added:
line = line.replace(new RegExp(/\$/, 'g'), '\\$');
I've created an extension to store snippets in a markdown file:
https://marketplace.visualstudio.com/items?itemName=usernamehw.snippets-in-markdown
Hit cmd+shift+p on mac machine, and search for "Configure User Snippets" then create a file and paste below json code.
provide prefix, Body, and description.
Reference: https://code.visualstudio.com/docs/editor/userdefinedsnippets
{
"forLoop": {
"prefix": "forLoop",
"body": [
"for (const ${2:element} of ${1:array}) {",
"\t$0",
"}"
],
"description": "For Loop"
},
"reactClass": {
"prefix": "reactClass",
"body": [
"import React from 'react';",
"class ${1:ComponentName} extends React.Component {",
"\t$0constructor(props) {",
"\t$0\t$0super(props)",
"",
"render() {",
"return (<div> ${2:Component} </div>)",
"}",
"export default ${3:ComponentName}"
],
"description": "For React Component class"
},
"function": {
"scope": "javascript,typescript",
"prefix": "function",
"body": [
"import React from 'react';",
"import withStyles from '#material-ui/core/styles/withStyles';",
"import { makeStyles } from '#material-ui/core/styles';",
"",
"import Styles from './style.js';",
"",
"const useStyles = makeStyles(Styles);",
"",
"function $1(props){",
"const classes = useStyles();",
"\treturn (",
"\t\t<React.Fragment>",
"\t\t\t<div className={classes.root}>",
"\t\t\t\t$1",
"\t\t\t</div>",
"\t\t</React.Fragment>",
"\t)",
"}",
"export default withStyles(useStyles)($1);"
],
"description": "react class"
}
}
I use this JSON Escape formatter(?) to process a large amount of HTML into a snippet:
https://www.freeformatter.com/json-escape.html
(The result of this process should be added in quotes "..." into the "body" part of the JSON object.
I've written a script which you can create your own complex snippets. just using the file you'd like. so you dont' need to write the source code in a string or string array.
https://github.com/banxi1988/vscode-snippets-ext-template
I am trying to understand how Ember.CollectionView works and I am having a basic issue with displaying the content of my ArrayController in the DOM. Here is my little jsfiddle experiment so you can see for yourself. Here is the coffeescript:
window.App = Ember.Application.create()
window.App.initialize()
App.Item = Em.View.create
tagName:'li'
willInsertElement: () ->
console.log "I **WILL** indert the element", this.$()
didInsertElement: () ->
console.log "I **DID** insert the element", this.$()
template: Ember.Handlebars.compile("~~ {{view.content.title}} ~~")
App.items = Em.ArrayController.create()
App.items.set('content',[
Em.Object.create({title:"AN"}),
Em.Object.create({title:"Epic"}),
Em.Object.create({title:"View"})
])
App.epicView = Ember.CollectionView.create
classNames: ['epic-view']
contentBinding: 'App.items'
itemViewClass: 'App.Item'
App.epicView.appendTo('body')
As you can see in the output of that fiddle, I have not been able to figure out how to access and display the title of objects in the list. When I append the view to body using the call to App.epicView.appendTo('body') it seems to iterate over the three objects but does not print anything.
Any ideas what am I missing here?
ps: I am using Ember 1.0pre
I would simply do something like this: http://jsfiddle.net/Sly7/nevW2/67/
Declare your views (with extend) instead of instantiate them (with create)