All of the tutorials on RUclips to make a VSCode extension just make a snippet extension. This is the tutorial on how to make a real VsCode extension. Grt job Ben 👍
@@jerrywang1480 no it's more like I have no plan to build any extension at the moment. Also, I am kind of learning some other stuff these days so no time for this.
Took me almost 2 weeks but finally got through it all. Thank you so much for the tutorial! It is super helpful that you talk aloud and explain things when you are troubleshooting and also that you keep in good spirits! Troubleshooting and setting up coding workspaces can be frustrating, but you are always so calm and down to earth when it happens. Please keep the videos coming :)
This is an amazing tutorial that combines vscode extension api/rest/svelte/typeorm/express/typescript and many other technologies to build a visual studio code todo app. It's been three years since this video was posted but yet I was able to make it to the end with a working todo list. I had to deal with version updates (change logs were super helpful) but the changes were minor but at times impactful. The biggest change was the typeorm which required converting connection to DataSource. Throughout the tutorial Ben provides ample insight into the logic, nuances, and how things play together at the component level and language level. I can't praise Ben enough for this outstanding tutorial.
Just did this video and your 14 hour Fullstack React GraphQL TypeScript Tutorial both are well worth the time. So appreciate your showing the problem, cause and resolution. So worth the extra video length. Love your presentation style too!
Honestly this and Tech with Tim have gotten me farther than any other coding youtuber. I’m in data science but all of this has become so interesting to me!
Ben, this video was AMAZING! I’ve been wanting to learn how to create a VS Code extension that made heavy use of web views, but all the other resources I found came nowhere near delivering what you do in this video. Dude, this is a masterpiece! THANK YOU! ⭐️⭐️⭐️⭐️⭐️
This is great! I used your previous tutorial to create my own extension that aligns all the text in a block of code based on delimiters you pick. It's called OCDetailer if anyone's interested. You're really good at explaining complicated topics. Keep it up.
Nice video so far! Haven't finished yet but I love your straightforward delivery and explaining everything as you go. One note for us future time travelers: extension activation is implicit with contributed commands and views now, so you don't need to specify `activationEvents`.
@Ben Awad, thanks for going over this :) I many not have a lot to offer but what i do... When you were installing all the packages you need might suggest doing this, i'm on windoZe so your commands on the Mac may vary a bit. When you want to select all the packages i would.... Press Alt+LButton at the beginning of each package you want to install. This should anchor the cursor an we will get one anchor for each of the packages you want to install... Once you get all the anchor points then press 'Shift-End', this should select all the text from the anchor to the end of the line, ah but we don't want the ending ';', so after pressing shift end don't let up on the 'shift' key, and use the left arrow. Should now have all the text you want selected. Now press Ctrl-C to copy. Close but not done yet. Find a place to paste the text. Now just fix up the text for the command then copy and paste that.... All done :) How you find this useful.
I've been following you for a while, and I gotta say, 12 minutes into this, it's a gem. Your channel, and this tutorial, is such a cool find. Can't wait to get through the whole thing and create some cool extensions for my coworkers xD Hoping for more awesome content in 2021. Cheers, Ben!
thank you! This course is so intuitive. Far better than any Udemy courses. Anytime that I have a question in my head, you would answer that 5 seconds later lol ...
Btw if anyone is having any difficulties with rollup when adding the style tag in svelte, you will need to install the roll-up-plugin-css-only package and then update the rollup.config.js like so ```import css from "rollup-plugin-css-only"; plugins: [ svelte({ // enable run-time checks when not in production dev: !production, preprocess: sveltePreprocess(), emitCss: true, }), css({ output: name + ".css" }),```
This man is national treasure for putting content like this. A while back I was trying to get my extension going with webviews, and nothing was on the internet as far as tutorials. Keep up the good work! 👍
At around 28:10 (Vanilla JavaScript), the reason your button text didn't change was that you didn't assign an ID to your your HTML button. Add an ID and use that same ID in your JavaScript and it will work. Great work!
HECK YEAH SVELTE it’s SOOO GOOD RIGHT!? I absolutely love it. Thanks for this tutorial! I’ve made extensions in the past but like this would’ve been quite nice to have ahahah~
28:00 just in case anyone is wondering, that part doesn't work because he didn't give that button the id="button" attribute. Cannot do getElementById with an id that doesn't exist on any HTML element.
I've to say that Ben has done a great job, though it might be hard to follow sometime cause Ben just jumps around real quick 🤣. One just need to read some doc and do some error searching on Google to get through it. So thankful for this tutorial, have really learnt the basic concepts through it!
thenable is any object with a .then() function, having a .then() allows you to use async await. In a sense, you can think of Promise as a class that extends or implements "Thenable"
Fyi, at 10:30 you repeated the push code; however, it takes in a rest param (any num of elements) to add into the array. Therefore, you can just include each event in the push function (separated by a comma).
Great video once again.Need to tell us how you remember these things. As I see ,you are dealing with a lot of configs and boilerplates ,so coming up with a tutorial must have been really hard.If I had coded this,I would have taken the same time to build it again given how non native and abstract most of the things are
36:02 I'm getting error for import - "Cannot find module '../components/HelloWorld.svelte' or its corresponding type declarations.ts(2307)" Checked spelling multiple times. Not getting what could be the issue.
Great video 👍🏽✨ Funny how I thought about coding an extension today and then bam....this notification comes up. I’m stuck with the Baader-Meinhof thing🤦🏽♀️
@@eliseumds Svelte is not a package. Svelte compiles your svelte component down to regular javascript, and the compiled javascript is used by the extension. In other words there's no virtual dom. Also svelte is a lot nicer, because you don't have to learn tons of concepts to get going. With basic html, css, and js, you can start building components. In react there's a little bit of overhead in learning and concepts.
_Half jokingly and with light-hearted intentions:_ I've avoided making Code extensions for years because it smells too much like front-end (or more precisely, back-end using front-end tools), although I just ran across a typescript project that inspired me. For the first few seconds, I thought it was python, mostly because of the way the source code was structured, I guess. Anyway, I got a wild hair and decided to watch a quick video on the subject, and guess what I happened to click on? In the first 30 seconds, I hear.. "...and so I'm going to use a web view to..." AAAAAAAAAAAAAAAAAHHHHHHHHHHHHHHHHHHHHHH!!!!!! _Just kidding. I was looking for something a bit different, but I am glad I found this all the same! Great presentation, great flow, great video. ...p.s. There is no way I'm sitting through the whole thing though. XD_
I'm working through this now. I figure I'll update this comment with my progress, commentary, and critique. 20:09 I got stuck for a minute because I didn't write export in front of that getNonce() function. Solved, moving on. 25:22 My button and textfield are different widths, unlike in the video. Not worried about it, just pointing it out. 45:00 My prettier config has stopped working in the middle of following this. Stuck, troubleshooting... edit: My error was caused by an extension conflict. The svelte plugin didn't play nice with my npm autocomplete plugin, causing other extensions, like prettier and bracket colorizer to stop working. Not sure why, but hopefully this helps someone. 53:18 **A note for Ben**. It is tiring to move through these various github repos. Looking for chunks of code to copy and paste could be made much easier by using clickable annotations, like in the top right of the video. Even just a pastebin or scratch file with the chunks of code needing to be copied all in one place would make this process noticeably easier. That's not to say anything bad about the video. Just a suggestion to potentially make things better. I've currently stopped working on this tutorial because a FAANG company has reached out about an interview, so I'm directing all my free time to studying algs. I will return one day. tbc...
I finally just got an email today asking me what department I want to work in at Amazon. It's not an offer, but they told me I passed the technical bar basically. I don't want to get excited too early, but I think I might get it! So I might not come back to this tutorial actually.
Awesome tutorial. I noticed that you keep moving to the opening quote to change the content of a string (e.g. at 11:43). Just use ci" or ci' depending double/single quote anywhere in the string to change the whole thing. Got to save those precious keystrokes.
It would have been nice if you would have created a playlist of 20-30 minutes videos on each topics. This looks good yet still I needed to get through a lot of back and forth when referring to the video again.
Hi Ben, I followed your tutorial and it is really awesome and attempted to build a VS Code extension. However, after publishing and installing the sidebar, I noticed that it isn't displaying any functionality or UI. Can you please assist me with this issue?
33:25 gives me the error @tsconfig/svelte/tsconfig.json not found Path to base configuration file to inherit from. Requires TypeScript version 2.1 or later Cani get any help plz
I'm trying to package my extension too, did you get a fix for it? I am having an issue where the built extension is trying to find the css files which can't be found.
The watch command normally uses a web socket to tell the browser to reload after a change. It is not that complicated to use the same logic to reload the view or sidebar or whatever
I'm having an issue at 40:15 in the HelloWorld.svelte file. "Cannot find module '../components/HelloWorld.svelte' or its corresponding type declarations." which I think is why when I run it also seems to be stuck on "Building" and never opens the Extension Development window. Does anyone know how to fix this issue?
It's working now. I think the problem was that concurrently wasn't installed correctly so it was stuck on rollup watching and never actually compiled the extension. After installing using "npm install concurrently --save" it works now.
@@tanmaybairagi7227 I think I just installed the concurrently package and it worked. And then make sure your package.json has the correct script for watch: "scripts": { "vscode:prepublish": "npm run compile", "compile": "rollup -c && tsc -p ./", "watch": "concurrently \"rollup -c -w\" \"tsc -watch -p ./\"", "pretest": "npm run compile && npm run lint", "lint": "eslint src --ext ts", "test": "node ./out/test/runTest.js" } And you can also check your dev dependencies in the package.json I might have some extra ones in there because I've adapted this extension for my own needs, but I think for this part of the tutorial you just want to check specifically for the ones that mention rollup and concurrently. "devDependencies": { "@rollup/plugin-commonjs": "^19.0.0", "@rollup/plugin-node-resolve": "^13.0.0", "@rollup/plugin-typescript": "^8.2.1", "@tsconfig/svelte": "^2.0.1", "@types/glob": "^7.1.3", "@types/mocha": "^8.0.4", "@types/node": "^12.11.7", "@types/polka": "^0.5.2", "@types/vscode": "^1.52.0", "@typescript-eslint/eslint-plugin": "^4.9.0", "@typescript-eslint/parser": "^4.9.0", "concurrently": "^6.2.0", "eslint": "^7.15.0", "glob": "^7.1.6", "mocha": "^8.1.3", "rollup": "^2.51.2", "rollup-plugin-css-only": "^3.1.0", "rollup-plugin-svelte": "^6.1.1", "rollup-plugin-terser": "^7.0.2", "svelte": "^3.38.2", "svelte-check": "^2.1.0", "svelte-preprocess": "^4.7.3", "typescript": "^4.1.2", "vscode-test": "^1.4.1" }
All of the tutorials on RUclips to make a VSCode extension just make a snippet extension. This is the tutorial on how to make a real VsCode extension. Grt job Ben 👍
Hi saini
damn, dude just created a freakin course. I will watch it soon.
*Adds the video to Watch Later and never open it again*
@@jerrywang1480 the 3418 videos in my watch later playlist tend to agree.
@@jerrywang1480 no it's more like I have no plan to build any extension at the moment. Also, I am kind of learning some other stuff these days so no time for this.
@Zia Ahmad, so did you watch it?
@@greaper3180 nope, i am learning react these days
Took me almost 2 weeks but finally got through it all. Thank you so much for the tutorial! It is super helpful that you talk aloud and explain things when you are troubleshooting and also that you keep in good spirits! Troubleshooting and setting up coding workspaces can be frustrating, but you are always so calm and down to earth when it happens. Please keep the videos coming :)
This is an amazing tutorial that combines vscode extension api/rest/svelte/typeorm/express/typescript and many other technologies to build a visual studio code todo app. It's been three years since this video was posted but yet I was able to make it to the end with a working todo list. I had to deal with version updates (change logs were super helpful) but the changes were minor but at times impactful. The biggest change was the typeorm which required converting connection to DataSource. Throughout the tutorial Ben provides ample insight into the logic, nuances, and how things play together at the component level and language level. I can't praise Ben enough for this outstanding tutorial.
Just did this video and your 14 hour Fullstack React GraphQL TypeScript Tutorial both are well worth the time. So appreciate your showing the problem, cause and resolution. So worth the extra video length. Love your presentation style too!
can you please give me the link to the Fullstack you are talking about, I can't find that? thanks in advance.
@@adityaagarwal1650 ruclips.net/video/I6ypD7qv3Z8/видео.html
Honestly this and Tech with Tim have gotten me farther than any other coding youtuber. I’m in data science but all of this has become so interesting to me!
this tutorial is EVERYTHING YOU NEED to learn about vs code extensions! simply awesome
Ben, this video was AMAZING! I’ve been wanting to learn how to create a VS Code extension that made heavy use of web views, but all the other resources I found came nowhere near delivering what you do in this video. Dude, this is a masterpiece! THANK YOU! ⭐️⭐️⭐️⭐️⭐️
This is great! I used your previous tutorial to create my own extension that aligns all the text in a block of code based on delimiters you pick. It's called OCDetailer if anyone's interested.
You're really good at explaining complicated topics. Keep it up.
Hi, I'm interested - Care to share your repo link with me?
great extensiont, i tried it it's really cool
Finally, I've been waiting for this for so long. thanks 😊
What I want to watch: How to build a vs extension? VS The first thing I watch on every coding channel: Algoexpert ad😭
try ublock origin
@@meghdutmandal9212 doesn't work on phone sadly
@@antoninjacob2232 there are ways. RUclips Vanced or Firefox with ublock origin on mobile since it supports extensions in it's mobile browser.
@@rand0mtv660 yeah of course, but I was talking about the original youtube app. Most of users won't go to a browser to watch youtube
@@antoninjacob2232 I know, but there are options is what I'm saying
Nice video so far!
Haven't finished yet but I love your straightforward delivery and explaining everything as you go.
One note for us future time travelers: extension activation is implicit with contributed commands and views now, so you don't need to specify `activationEvents`.
Ben Awad, not the hero we deserve, but the hero we need!
I'll subscribe cause if someone takes 3 hours to share a so cool skill, man, I want to see the next videos. Congratulations.
Whoa!!! Always wanted a tutorial on this, thank you!
@Ben Awad, thanks for going over this :) I many not have a lot to offer but what i do... When you were installing all the packages you need might suggest doing this, i'm on windoZe so your commands on the Mac may vary a bit. When you want to select all the packages i would.... Press Alt+LButton at the beginning of each package you want to install. This should anchor the cursor an we will get one anchor for each of the packages you want to install... Once you get all the anchor points then press 'Shift-End', this should select all the text from the anchor to the end of the line, ah but we don't want the ending ';', so after pressing shift end don't let up on the 'shift' key, and use the left arrow. Should now have all the text you want selected. Now press Ctrl-C to copy. Close but not done yet. Find a place to paste the text. Now just fix up the text for the command then copy and paste that.... All done :) How you find this useful.
full of energy young man. I don't even have patent to watch
I've been following you for a while, and I gotta say, 12 minutes into this, it's a gem. Your channel, and this tutorial, is such a cool find. Can't wait to get through the whole thing and create some cool extensions for my coworkers xD Hoping for more awesome content in 2021. Cheers, Ben!
Okay, so I'm back. I just finished! It was awesome. Will look into the deployment links now.
thanks man for this! I spent hours and hours trying to troubleshoot my extension. went to your git and all I had to do was to set my view type.
I guess I know what I'll be doing this new year's eve.
Staring at this video and trying this !
OMG finally an actual course on vscode extension
thanks for the tutorial, youtube is littered with introductory tutorials, this one goes deep !
thank you! This course is so intuitive. Far better than any Udemy courses. Anytime that I have a question in my head, you would answer that 5 seconds later lol ...
is that u who sang 11 years ago? ur voice is sweet!!
chị người Việt Nam à :))
Ben is the gift that keeps on giving
This is what I was waiting for.
Your vids are actually starting to get interesting now ngl
Probably I won't need any information from this video, but I will leave a comment to promote this guy :)
Btw if anyone is having any difficulties with rollup when adding the style tag in svelte, you will need to install the roll-up-plugin-css-only package and then update the rollup.config.js like so ```import css from "rollup-plugin-css-only";
plugins: [
svelte({
// enable run-time checks when not in production
dev: !production,
preprocess: sveltePreprocess(),
emitCss: true,
}),
css({ output: name + ".css" }),```
... and don't forget to add one line with import:
>>> import css from "rollup-plugin-css-only";
Thank you random dude from 2 years ago, you just saved my career
Next up: "My channel got DDoSed"
GOLD
For RUclipsrs, isn't that the dream... 🤣
It's not like their RUclips page is going to crash.
@@SharatS Yeah two weeks ago Google Engeneeirs 🤐
@@SharatS google account authentication went down for 30 minutes earlier this month
Thank you so much for such a detailed tutorial I couldn't find anywhere else this kind of information
This man is national treasure for putting content like this. A while back I was trying to get my extension going with webviews, and nothing was on the internet as far as tutorials. Keep up the good work! 👍
At around 28:10 (Vanilla JavaScript), the reason your button text didn't change was that you didn't assign an ID to your your HTML button. Add an ID and use that same ID in your JavaScript and it will work. Great work!
I added id to the button yet it still didn't work ;(
HECK YEAH SVELTE it’s SOOO GOOD RIGHT!?
I absolutely love it. Thanks for this tutorial! I’ve made extensions in the past but like this would’ve been quite nice to have ahahah~
just awesome! many thanks for putting together this wonderful tutorial Ben!
Took me 3 days to finish but I learnt a lot :)
Thank you for making this! So much more helpful than Microsoft's tutorials
28:00 just in case anyone is wondering, that part doesn't work because he didn't give that button the id="button" attribute. Cannot do getElementById with an id that doesn't exist on any HTML element.
Now we can make a VS Eats extension so we can finally ditch door dash and Uber Eats
I've to say that Ben has done a great job, though it might be hard to follow sometime cause Ben just jumps around real quick 🤣. One just need to read some doc and do some error searching on Google to get through it. So thankful for this tutorial, have really learnt the basic concepts through it!
thenable is any object with a .then() function, having a .then() allows you to use async await. In a sense, you can think of Promise as a class that extends or implements "Thenable"
I really like how you explain stuffs and steps, keep it up👍
Fyi, at 10:30 you repeated the push code; however, it takes in a rest param (any num of elements) to add into the array. Therefore, you can just include each event in the push function (separated by a comma).
Me thinking this would be just a regular Ben Awad video but then I see it’s three hours
This was a nice short video tutorial, but I wish they were a little longer, at least 40 hours...
The best memes aren't on Reddit, THEY'RE HERE!!!!
is this what you were doing after your last video? still thank you for your efforts
The Svelte Syntax looks so nice
Very very informative and helpful. Pretty much learnt how to do it in a day. 👍👍👍
This video is awesome! thank you for sharing it with us,keep it up bro.
Great video once again.Need to tell us how you remember these things. As I see ,you are dealing with a lot of configs and boilerplates ,so coming up with a tutorial must have been really hard.If I had coded this,I would have taken the same time to build it again given how non native and abstract most of the things are
The configs are many, imma lose interest if it were me 😂
Very helpful, thank you man!
I've been looking for this tutorial for a while!
59:03 In case anyone is wondering why they are getting a CSS error/missing CSS file, Ben explained it here
36:02 I'm getting error for import - "Cannot find module '../components/HelloWorld.svelte' or its corresponding type declarations.ts(2307)"
Checked spelling multiple times. Not getting what could be the issue.
Same man, let me know if you find a fix
In webviews tsconfig.json add:
"compilerOptions": {
"strict": true,
"types": ["node", "svelte"],
},
@@jaimealvarez5653 Worked! Thank you so much!
@@jaimealvarez5653 It worked thanks. A small explanation would be helpful as I'm new to this enviroment.
@@jaimealvarez5653 thank you! This had me for ages!
I don't even use JS or VSCode, time to watch the whole thing.
yes xD
Awesome, Loved it. I will try my first extension 🙂 Thankyou somuch.
Big ups for all your well thought out content.. But we have missed your angular videos😂😂
Great video 👍🏽✨ Funny how I thought about coding an extension today and then bam....this notification comes up. I’m stuck with the Baader-Meinhof thing🤦🏽♀️
Same. I was even watching the last video that he made on this: ruclips.net/video/4tk0Ak-dEjs/видео.html.
Best cs youtuber out there
Thanks avad! Looking forward to be doing this
bruh, this guy can make whatever the fuck he wants.
Any particular reason to go with Svelte instead of React for making the extensions?
Lighter? Now I wonder if different extensions are able to share the same Svelte package, probably not :(
@@eliseumds Svelte is not a package. Svelte compiles your svelte component down to regular javascript, and the compiled javascript is used by the extension. In other words there's no virtual dom.
Also svelte is a lot nicer, because you don't have to learn tons of concepts to get going. With basic html, css, and js, you can start building components. In react there's a little bit of overhead in learning and concepts.
@@nobytes2 Svelte has runtime packages as well, albeit small.
@@eliseumds Right, but extensions are compiled and I don't think code is shareable within vscode extensions.
yeah the main advantage is its light weight
This guy is awesome 💕 really appreciated
Thank you very much for sharing this, I enjoyed it very much.
_Half jokingly and with light-hearted intentions:_
I've avoided making Code extensions for years because it smells too much like front-end (or more precisely, back-end using front-end tools), although I just ran across a typescript project that inspired me. For the first few seconds, I thought it was python, mostly because of the way the source code was structured, I guess.
Anyway, I got a wild hair and decided to watch a quick video on the subject, and guess what I happened to click on?
In the first 30 seconds, I hear..
"...and so I'm going to use a web view to..."
AAAAAAAAAAAAAAAAAHHHHHHHHHHHHHHHHHHHHHH!!!!!!
_Just kidding. I was looking for something a bit different, but I am glad I found this all the same! Great presentation, great flow, great video. ...p.s. There is no way I'm sitting through the whole thing though. XD_
Lmao i was thinking about learning this after Vsinder...my man back at ut again. ◉‿◉
Dude, you make programming look so cool!
what command i have to add in package.json while publishing the extension
I'm working through this now. I figure I'll update this comment with my progress, commentary, and critique.
20:09 I got stuck for a minute because I didn't write export in front of that getNonce() function. Solved, moving on.
25:22 My button and textfield are different widths, unlike in the video. Not worried about it, just pointing it out.
45:00 My prettier config has stopped working in the middle of following this. Stuck, troubleshooting... edit: My error was caused by an extension conflict. The svelte plugin didn't play nice with my npm autocomplete plugin, causing other extensions, like prettier and bracket colorizer to stop working. Not sure why, but hopefully this helps someone.
53:18 **A note for Ben**. It is tiring to move through these various github repos. Looking for chunks of code to copy and paste could be made much easier by using clickable annotations, like in the top right of the video. Even just a pastebin or scratch file with the chunks of code needing to be copied all in one place would make this process noticeably easier. That's not to say anything bad about the video. Just a suggestion to potentially make things better.
I've currently stopped working on this tutorial because a FAANG company has reached out about an interview, so I'm directing all my free time to studying algs. I will return one day.
tbc...
UPDATE?😂
@@thunderbolt8632 Interview at Amazon tomorrow. I'll post results 👌
@@ChessFlix and? lol
I finally just got an email today asking me what department I want to work in at Amazon. It's not an offer, but they told me I passed the technical bar basically. I don't want to get excited too early, but I think I might get it! So I might not come back to this tutorial actually.
@@ChessFlix good luck 🤞
28:15 - you simply forgot to add an id to your button, lmao.
Thank you for this GOAT!
My first thought before I realized its a tutorial was: "another extension? Again? Please have mercy and stop"
Who else paused on 3:35 to see his recent opened projects/files? :)
i am getting blank sidebar and panel after building the extension the svelte code is not getting loaded into final build
removing /out from vsignore is the fix
1:08:18 -- "editor.acceptSuggestionOnCommitCharacter": false
Please pin this comment ! :)
Yeah! Thanks for this!
Learnt a lot from the video!
What's your iTerm2 color schema? Thanks!
Me: took u long enough. *Looks at vid length*
Me 5 seconds later: HOLY S**T!
Awesome tutorial. I noticed that you keep moving to the opening quote to change the content of a string (e.g. at 11:43). Just use ci" or ci' depending double/single quote anywhere in the string to change the whole thing. Got to save those precious keystrokes.
Respect
It would have been nice if you would have created a playlist of 20-30 minutes videos on each topics. This looks good yet still I needed to get through a lot of back and forth when referring to the video again.
PS: we can also press F1 to open command palette in VS Code 🌹
thank for the amazing tutorial.
Thanks so much for this man, cheers!
To fix express and webpack use setting:
externals: {
express: "commonjs express",
vscode: "commonjs vscode",
}
Totally great tutorial. Thanks 😀
I hope he starts adding (as a thousandaire) for 2021...
This is great
O Pai tá On
Hi Ben, I followed your tutorial and it is really awesome and attempted to build a VS Code extension. However, after publishing and installing the sidebar, I noticed that it isn't displaying any functionality or UI. Can you please assist me with this issue?
Hi Ben,
Thank you so much for the wonderfull tutorial which helped me alot, is there any video related to right-click context menu?
really wanted this video
Just what I was looking for...
33:25 gives me the error @tsconfig/svelte/tsconfig.json not found
Path to base configuration file to inherit from. Requires TypeScript version 2.1 or later
Cani get any help plz
Question, do i have to add rollup command while publishing the extension
I'm trying to package my extension too, did you get a fix for it? I am having an issue where the built extension is trying to find the css files which can't be found.
@@jyrocaptain removing /out from extensionIgonre was the fix for me
The watch command normally uses a web socket to tell the browser to reload after a change. It is not that complicated to use the same logic to reload the view or sidebar or whatever
I want this
22 minutes in, and only now did I realise this is 3+ hours long.
Great solid video
Now we can make our own VSTinder 🙈😜
VSBumble?
Great Tutorial!
I'm having an issue at 40:15 in the HelloWorld.svelte file. "Cannot find module '../components/HelloWorld.svelte' or its corresponding type declarations." which I think is why when I run it also seems to be stuck on "Building" and never opens the Extension Development window. Does anyone know how to fix this issue?
It's working now. I think the problem was that concurrently wasn't installed correctly so it was stuck on rollup watching and never actually compiled the extension. After installing using "npm install concurrently --save" it works now.
How did you get this resolved? Can you please let us know?
@@tanmaybairagi7227 I think I just installed the concurrently package and it worked. And then make sure your package.json has the correct script for watch:
"scripts": {
"vscode:prepublish": "npm run compile",
"compile": "rollup -c && tsc -p ./",
"watch": "concurrently \"rollup -c -w\" \"tsc -watch -p ./\"",
"pretest": "npm run compile && npm run lint",
"lint": "eslint src --ext ts",
"test": "node ./out/test/runTest.js"
}
And you can also check your dev dependencies in the package.json I might have some extra ones in there because I've adapted this extension for my own needs, but I think for this part of the tutorial you just want to check specifically for the ones that mention rollup and concurrently.
"devDependencies": {
"@rollup/plugin-commonjs": "^19.0.0",
"@rollup/plugin-node-resolve": "^13.0.0",
"@rollup/plugin-typescript": "^8.2.1",
"@tsconfig/svelte": "^2.0.1",
"@types/glob": "^7.1.3",
"@types/mocha": "^8.0.4",
"@types/node": "^12.11.7",
"@types/polka": "^0.5.2",
"@types/vscode": "^1.52.0",
"@typescript-eslint/eslint-plugin": "^4.9.0",
"@typescript-eslint/parser": "^4.9.0",
"concurrently": "^6.2.0",
"eslint": "^7.15.0",
"glob": "^7.1.6",
"mocha": "^8.1.3",
"rollup": "^2.51.2",
"rollup-plugin-css-only": "^3.1.0",
"rollup-plugin-svelte": "^6.1.1",
"rollup-plugin-terser": "^7.0.2",
"svelte": "^3.38.2",
"svelte-check": "^2.1.0",
"svelte-preprocess": "^4.7.3",
"typescript": "^4.1.2",
"vscode-test": "^1.4.1"
}