Creating Code Snippets in Visual Studio Code
ฝัง
- เผยแพร่เมื่อ 15 ม.ค. 2025
- If you're interested in learning more about VS Code, check out the "Learn VS Code" course to learn everything you need to know!
learnvscode.com/
Defining code snippets can save you tons of time. They provide developers a way to generate a section of code by using a short code or keyword. In this video, we will cover how to create code snippets in Visual Studio Code.
Resources
code.visualstu...
manual.macroma...
vscode-docs.rea...
~-~~-~~~-~~-~
Please watch: "5 Ways To Improve Your Speed With Visual Studio Code"
• 5 Ways To Improve Deve...
~-~~-~~~-~~-~
i was looking for add another snippet for my css and i found it here, thanks a lot.
wow thanks alot because of you I could create snippets of c language of my own! really thank you!
Awesome!
very useful video, thanks
Very helpful video! Saved tons of time and it's fun these stuff
Glad you enjoyed it!
Awesome. Thanks for watching!
Really useful, thank you!
Thanks a lot bro this gonna help me
Really happy to hear that! Thanks for watching.
Great video
that looks awesome, I think I'm finally going to make the jump to vs code because of this. thanks
Yaaas! Do it and let me know how it goes!
@@JamesQQuick been playing around with vs code, I'm liking it so far...but I've been using dreamweaver for over a decade, so I just need to be patient with the change in workflow.
thanks again, keep up the good work!
@@zwiebec78 Itll take a little time, but hopefully in a month you'll be a power user!!
@@JamesQQuick hey man, not sure if you can help, but I'm having some issues with the 'auto completes'...
1. if I am writing content, ie. inside a or whatever, it seems like vs code always wants to keep suggesting things...it's very distracting - there must be a way to turn that off when trying to write content??
2. with php includes, it doesn't seem to know variables that I've set in a config file...for example I'll have something like $site_name that I could reuse, but vs code doesn't seem to get those...not a deal-breaker, but I'm just used to only needing 2 or 3 characters before I can just hit enter.
anyways, I know this isn't your "job" to help me here...but if you know off the top of your head how to solve these that would be great, I've looked around for a couple hours now...
thanks again!
@@zwiebec78 Hey! So you're saying Code is trying to provide suggestions when your just writing the text inside of a tag? Does that on mine also so seems like the default. I don't know right off hand how to fix it to your needs, but you can check out the "Customizing Intellisense" docs. Those might help...
code.visualstudio.com/docs/editor/intellisense#_customizing-intellisense
I'm not a PHP, can you explain how your properties are being pulled in from the config file? What's the name of the config file also?
how can I add an easy html-code to snippets? Everytime ther is a "xyz" it crashes the snippet.
Like in I need the "og:type" to be inserted with the snippet. Instead, it always creates new lines and kills what is between the " " ... please send help... ;__;
I just want to insert all the needed meta-descriptions with one snippet instead of typing them all again.
Can you share the snippet that you created?
@@JamesQQuick {
"metas Übersicht": {
"prefix": ["metas"],
"body": ["",
"",
"",
"",
""],
"description": "Meta Übersicht für Head"
}
}
This was my noob-idea which didn't work.
You’re going to have to switch out how you use quotations. You can’t use double quotes inside of a double quote. You can either escape the inner double quotes or use single quotes on the outside and double quotes inside
@@JamesQQuick thank you for your answer. I tried this
{
"metas Übersicht": {
"prefix": ["metas"],
"body": ['',
'',
'',
'',
''],
"description": "Meta Übersicht für Head"
}
}
is this what you have meant? the result was this
@@FarbcafeDe you might have to send a copy of the file so I can try it out myself
your video is excellent. Your video is very much useful to me, Many thanks for that. My warm regards to you.
Thank you :)
It's very useful. Thanks.
Great! I even backup the setting jason file with an other options to the github cloud by the VScode extension, that works on the github's API gists (without Git installed).
Awesome video thanks!!!
awesome video! THX
Thanks!
For anyone having issues getting it working: make sure that you choose the right language in the bottom-right corner of your editor and then reload VS Code
I wish we use snippets of regexps in the command palette.
how to publish it? I want to make some useful snippets and publish it so my friends can use it too?
You’ll have to do a bit of searching but you create an extension of type snippets and include the snippet file
@@JamesQQuick thanks! I will do that now
cacher.io - the best!
It doesn't work in:
Version 1.24.0-insider
Commit 2404210629c744e6237a14d7b5fa852e24c6e898
Datum 2018-05-04T08:10:40.288Z
Shell 1.7.12
Renderer 58.0.3029.110
Node 7.9.0
Architektur x64:
When I type "clog" the suggestion is "ChannelMergerNode".
But it works in Visual Studio Code Version 1.22.2.
Thank you for the video.
Thanks for watching! hmm I'm not sure about this. Maybe the latest insiders changed the precedence of intellisense options? Do you see "clog" at all or no? You might think about raising an issue on Github for them to track! github.com/Microsoft/vscode
What do you do with the javascript.json file? Where do you store it?
It's actually management by VS Code so you don't have to worry about it!
Thank you very much!
Thank you for watching!
Super useful, Thanks James
Glad you enjoyed it will!
thx bro
What happens when you have a file that has php, html and some mix of other items.
Not sure exactly what you're looking for. But if you write snippets for php files, you can create extensions that generate html, php, whatever you want. You can also create snippets that are global meaning they aren't associated with a specific file type if you need to. Does that help?
I think, for a mix code blended together, You could use the global type of the snipets languages (while selecting the snipped's language).
the problem is vscode detects based on file type and doesn’t show the suggested autocompletion options when mixed. Vue is a good example where mixed items exist
thanks dude :)
Sure thing!
very useful :)
Thanks!!
thanks
rohmat Mret thank you for watching!
2:30
lol thanks
top
Very nice!
With keyboard command you can use ${TM_SELECTED_TEXT} to wrap the selected text with a snippet, very useful.
I was wondering if I could restrict a "keybinding" only to one language, like php.
I tried using "langId" like you did:
"args": {
"langId": "php",
but it didn't work, the php snippet executes in other files like javascript.. Any clues how to make it execute only in php files?
Still, I'm happy to be able to do this kind of things, so nice.
Your code snippets can be defined in the appropriate snippets file to only be used in a given language