Hi guys I'm using VScode and trying to get some user snippets to work.
I've tried adding them to both the javascriptreact.json file and the javascript.json file... and even the html.json file but with no success.
I know VSCode uses Emmet, and am confused as to whether user snippets work with emmet rather than intellisense, and if so am I putting this in the wrong file?
Cheers in advance for any help!
I am trying to overwrite the default div. span. img. etc. by adding the following snippets:
"Expand ReactQL Div": {
"prefix: "div.",
"body": [
"<div className={css.:1}>:2</div>;"
],
"description": "expand div"
},
"Expand ReactQL img": {
"prefix: "img.",
"body": [
"<img src={:1} alt=":2" className={css.:3} />;"
],
"description": "expand img"
},
"Expand ReactQL span": {
"prefix: "span.",
"body": [
"<span className={css.1:}>:2</span>;"
],
"description": "expand span"
}
I'd imagine you have solved this one, but for anyone else,
There a few issues with your snippets:
Missing " within your prefix definition, the : is also enclosed in quotes.
{css.:1} syntax works like so ${1:css}
An example:
"Expand ReactQL Div": {
"prefix": "div.",
"body": [
"<div className=${1:css}>${2}</div>"
],
"description": "expand div"
},
Demo of snippet in action
Related
I have a file named "Card.styled.js"
I want to create a snippet to write easier the styled component:
"styled": {
"prefix": "styled",
"body": [
"import styled from \"styled-components\"",
"",
"export const ${1:${TM_FILENAME_BASE}} = styled.$2`",
"",
"${3}",
"`"
]
}
But ${1:${TM_FILENAME_BASE}} is returning me Card.styled.
I want to return only Card in this case.
Card.styled is the correct TM_FILENAME_BASE of Card.styled.js. You will have to modify it further.
You want something like this:
"styled": {
"prefix": "styled",
"body": [
"import styled from \"styled-components\"",
"",
"export const ${1:${TM_FILENAME_BASE/(.*?)\\..*/$1/}} = styled.$2`",
"",
"${3}",
"`"
]
}
(.*?)\\..* get everything before the first . into capture group 1
Match the entire filename_base and replace it with only capture group 1 .
I have a file with the name KEY - My text with spaces.md and what to split that filename as a Visual Studio Code (vscode) Snippet. The Goal: Split the file name in KEY and in My text with spaces and drop the splitter -.
I was able to get the last part (value) in the correct way. But I am failing with the first part (key).
Q1: How can I get the key part?
Q2: Is there a better way to get the value part?
markdown.code-snippets file
{
"Add new acronym":{
"prefix": "kw-new-acronym",
"scope": "markdown",
"body": [
"key : \"${TM_FILENAME_BASE/[^0-9^a-z]//gi}\"",
"value: \"${TM_FILENAME_BASE/\\w* - //gi}\""
],
"description": "Add new acronym"
}
}
Some Links:
VScode Snippets
Stackoverflow Search
I found a solution for Q1 and Q2, it is quiet easy :-)
markdown.code-snippets file
{
"Add new acronym":{
"prefix": "kw-new-acronym",
"scope": "markdown",
"body": [
"key : \"${TM_FILENAME_BASE/(.*) - (.*)/$1/}\"",
"value: \"${TM_FILENAME_BASE/(.*) - (.*)/$2/}\""
],
"description": "Add new acronym"
}
}
Like, say I have a snippet:
"Script with vue-property-decorator": {
"prefix": "script",
"body": [
"<script lang='ts'>",
"import {",
" Vue,",
" Component,",
"} from 'vue-property-decorator';",
"",
"#Component",
"export default class $1 extends Vue {",
"",
"}",
"</script>",
],
},
And I want to make a sort of 'meta-snippet' for an entire .vue file -- does VSCode have the capability to call a snippet within another snippet?
I apologize if this has been asked before. A cursory google search turned up nothing.
My initial solution was just to copy-paste the snippet contents into my new snippet and add onto it.
How do I enable snippet completion within JSX tags to add tag attributes:
<View style={styles.styleName}>
I am trying to make this snippet work but it only seems to work outside the tags:
"style": {
"scope": "javascript,typescript,jsx,html",
"prefix": "rs",
"body": ["style={ styles.${1} }"],
"description": "RN style"
},
(Untested) If you're not opposed to using keyboard shortcuts to insert snippets - assign keybindings may work.
VSCode added in "javascriptreact" for jsx files. (no need to install anything from the market place)
for example, if you want to write a fetch shortcut
{
"fetch": {
"scope": "javascriptreact,javascript",
"prefix": "fetch",
"body": [
"fetch('$1', {",
"\tmethod: '$2',",
"\tcredentials: 'same-origin',",
"\theaders: new Headers({",
"\t\t'X-CSRF-Token': this.state.form_token,"
"\t\t'Content-Type': 'application/json',",
"\t\t'Accept': 'application/json'",
"\t}),",
"\tbody: JSON.stringify(body)",
"\t}).then(res => res.json()).then(",
"\t(result) => {$3},",
"\t(error) => {$4}",
");"
]
}
}
After adding this to your code-snippets file the short cut is ready for use.
Addressing the original question. Snippets work in in a jsx tag
VSCode Version:1.20.1
OS Version:windows 10 1709
Steps to Reproduce:
1.When I input fun and press tab,this code will show.
function name(params) {
}
2.I don't like this snippet.I want to change it, but I can not find a file about this snippet.
What should I do?
It is a default snippet but you can overwrite it. So assuming javascript, try this in your javascript.json file:
"Function no name": {
"prefix": "fun",
"body": [
"function () {",
"",
"}"
],
"description": "Function no name or parameters"
},
Gear icon/User Snippets/choose your language.