From 3d9ad5862f8643861543acb25aa6f97953ad4f0a Mon Sep 17 00:00:00 2001 From: Amin Bandali Date: Sun, 19 Jul 2020 14:54:42 -0400 Subject: 2019/talks/: import the remaining ones adding transcripts on-site when possible --- 2019/talks/31.md | 121 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 121 insertions(+) create mode 100644 2019/talks/31.md (limited to '2019/talks/31.md') diff --git a/2019/talks/31.md b/2019/talks/31.md new file mode 100644 index 00000000..8ff0be27 --- /dev/null +++ b/2019/talks/31.md @@ -0,0 +1,121 @@ +[[!meta title="Don't wait! Write your own (yas)snippet - Tony Aldon"]] +[[!meta copyright="Copyright © 2019 Tony Aldon"]] + +[[!template id=vid +src="https://mirror.csclub.uwaterloo.ca/emacsconf/2019/emacsconf-2019-31-dont-wait-write-your-own-yas-snippet--tony-aldon.webm" +type="video/webm"]] + +### Download + +- [Video](https://mirror.csclub.uwaterloo.ca/emacsconf/2019/emacsconf-2019-31-dont-wait-write-your-own-yas-snippet--tony-aldon.webm) (1080p) + +### Transcript + +```org +#+TITLE: Don't wait! Write your own (ya)snippets. +#+AUTHOR: Tony Aldon +LICENSE: CC BY-SA 4.0 + +* Init +Hey everybody, welcome to the emacsconf 2019, I'm TONY and I hope this +video will help you to get started with the yasnippet package. + +* Table of content +At first we'll have a look at some useful commands and variables +provide by yasnippet: yas-expand, yas-describe-tables, and +yas-snippet-dirs. + +Then we'll write a snippet for the js-mode using the command +yas-new-snippet which pops a new buffer for writing a snippet. + +Ready, OK, let's go!! + +* (1) yas-expand +In javascript, to consol.log some text we just type LOG and hit TAB to +expand the snippet. It moves the cursor between the parentheses. + +We can do the same with a if statment, and we move through the snippet +with the 'tab' key. + +* (2) yas-describe-tables +To display the available snippets of the buffer's mode, we use the +command yas-describe-tables. We scroll down. And we see that +'function' is a snippet and 'f' is the key. If we type 'f' and hit +'tab' it expands the snippet. + +* (3) snippet's description +Let's go back to the describe table, we scroll down. And with the +cursor on the snippet named 'function', we hit 'return'. Now in +another window we can inspect the snippet definition. + +The first line would tell emacs this is a snippet. The second and +third lines define the name and the key of the snippet. And after +this line, the snippet's body starts. + +The dollar sign indicates where the cursor is going to be, and The +numbers signify which order 'tab' is going to move you through the +snippet. + +The cursor will move first, before the open parenthese to let you fill +the function's name. Then, will move, after the open parenthese, to +let you fill the function's arguments. And finally the cursor will +end at 0. + +Now, we go back to the javascript file. + +* (4) yas-snippets-dirs +To know where our snippets are defined, let's see the variable +yas-snippet-dirs which lists the top-level snippet directories. + +We can see that some of my snippets are defined in this directory. +Let's have a look on it. + +Well, for instance, the available snippets for the latex mode are +defined in this directory 'latex dash mode' directory, and each file +defines exactly one snippet. + +* (5) express snippet +Now assume that you're using the framework 'express' to build APIs, +and, you want that APP to be the key of the snippet that looks like +this. For that, let's just call the command yas-new-snippet. + +It pops a new buffer for writing the snippet. We enter the name: +express app The key, which is: app. And for the organization in the +describe table, we add this snippet to the group: express. + +For testing, we enter: blabla. And we save it. And this will +automatically load the snippet. + +Let's go back to the javascript file. We hit 'tab', and it expands +it. Now we copy the text we want for the snippet. And we add the end +position of the cursor. + +We save it and go back to the javascript file. Now we hit 'tab' and +it expands it as this way. Ok, pretty cool. + +Now in the cycle of the cursor, we add two positions. First position +and second position. This allows us to write on the fly the 'method' +and the 'path' off the 'app' object. + +Let's back to the javascript file, we expand the snippet, and now we +can write the method and the path. + +Ok, to be more readable, we add placeholders for the first two +positions of the cursor. We add 'method' and we add 'path'. Let's +have a look on it. + +We go back to the javascript file. Now we expand it, we see the +placeholders. We replace it, the method and the path. + +Yeah!!! We did it. We've written the snippet 'express app', and it +works. + +For the end, we check in the describe table if the snippet appears. +We go back to the describe table, we scroll down, and there it is. + +Ok, now you can write your own snippets. + +* Thanks! +I hope you've enjoyed the video. I'm tony, Thank you for watching, +keep learning and stay alive. +``` -- cgit v1.2.3