All of the tutorials on UA-cam 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!
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.
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! ⭐️⭐️⭐️⭐️⭐️
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!
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!
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`.
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 ...
@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.
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!
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!
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~
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
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).
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"
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.
@@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.
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🤦🏽♀️
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?
Hey! I am wondering if there is any reason we used a class for the WebView over having it as a function? I noticed that all of the examples that are provided by Microsoft also use a class too. I cant find anything that explains why and I'm just curious.
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
hi men, I made an audio player and run it in vscode panel sidebar. but when the sidebar panel is removed and moved to another sidebar panel, the audio being played immediately turns off. how do you make it so that when the vscode panel sidebar is not active, the audio that is being played continues to run?
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.
_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_
My VSCode decides to stop compiling the extension right after it confirms that webpack compiles successfully. It stays stuck on that indefinitely, any suggestions?
Hey Ben, can you explain a little more how you can add other things in setState. I am trying to do what you suggested at 3:29:20 with keeping track of the text in the input field if someone closes the view and comes back, but I am struggling to get it to work. What would be the syntax to keep track of multiple variables in setState? Do I need to follow this convention $: { tsvscode.setState({page}); } on multiple svelte files?
Thanks a lot man, I was able to use yours as base and do mine, which is almost finished now, but I'm having issues when creating the package. No errors prompt on my "run watch", but if I publish my extension and try to install and load on another computer, it gives me an error that it can't load my base css and js file, am I missing something?
I got this error while running the API, node:internal/modules/cjs/loader:936 throw err Cannot find module 'C:\...\api\index.js' [nodemon] app crashed - waiting for file changes before starting...
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.
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" }
Did anyone try deploying the extension..? My panels are not showing anything I think they are not able to load the svelte code! It is working fine in development mode.. This problem is coming after I deploy.. Help anyone? @benawad
Can you do a video on deploying please? When I create a .vsix file I can install it but the extension won't load. Commands are registered but i can't run them and the sidebar is showing but does not load :/
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.
All of the tutorials on UA-cam 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 ua-cam.com/video/I6ypD7qv3Z8/v-deo.html
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
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 tutorial is EVERYTHING YOU NEED to learn about vs code extensions! simply awesome
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. UA-cam 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
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!
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.
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`.
Finally, I've been waiting for this for so long. thanks 😊
Whoa!!! Always wanted a tutorial on this, thank you!
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.
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.
I guess I know what I'll be doing this new year's eve.
Staring at this video and trying this !
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 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.
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
full of energy young man. I don't even have patent to watch
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! 👍
thanks for the tutorial, youtube is littered with introductory tutorials, this one goes deep !
Thank you so much for such a detailed tutorial I couldn't find anywhere else this kind of information
OMG finally an actual course on vscode extension
Next up: "My channel got DDoSed"
GOLD
For UA-camrs, isn't that the dream... 🤣
It's not like their UA-cam page is going to crash.
@@SharatS Yeah two weeks ago Google Engeneeirs 🤐
@@SharatS google account authentication went down for 30 minutes earlier this month
Ben is the gift that keeps on giving
just awesome! many thanks for putting together this wonderful tutorial Ben!
This is what I was waiting for.
Your vids are actually starting to get interesting now ngl
Took me 3 days to finish but I learnt a lot :)
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 ;(
is this what you were doing after your last video? still thank you for your efforts
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.
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!!!!
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!
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~
Probably I won't need any information from this video, but I will leave a comment to promote this guy :)
I really like how you explain stuffs and steps, keep it up👍
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 😂
Now we can make a VS Eats extension so we can finally ditch door dash and Uber Eats
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).
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"
The Svelte Syntax looks so nice
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!
Very helpful, thank you man!
Very very informative and helpful. Pretty much learnt how to do it in a day. 👍👍👍
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
Me thinking this would be just a regular Ben Awad video but then I see it’s three hours
what command i have to add in package.json while publishing the extension
What's your iTerm2 color schema? Thanks!
Thank you for making this! So much more helpful than Microsoft's tutorials
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: ua-cam.com/video/4tk0Ak-dEjs/v-deo.html.
I've been looking for this tutorial for a while!
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😂😂
This video is awesome! thank you for sharing it with us,keep it up bro.
Me: took u long enough. *Looks at vid length*
Me 5 seconds later: HOLY S**T!
59:03 In case anyone is wondering why they are getting a CSS error/missing CSS file, Ben explained it here
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?
Thanks avad! Looking forward to be doing this
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
Hey! I am wondering if there is any reason we used a class for the WebView over having it as a function? I noticed that all of the examples that are provided by Microsoft also use a class too. I cant find anything that explains why and I'm just curious.
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
Hi Ben,
Thank you so much for the wonderfull tutorial which helped me alot, is there any video related to right-click context menu?
I am unable to see the "Hello World" after doing cmd+p in extension development host. Can you please let me know what I am missing
This guy is awesome 💕 really appreciated
hi men, I made an audio player and run it in vscode panel sidebar. but when the sidebar panel is removed and moved to another sidebar panel, the audio being played immediately turns off. how do you make it so that when the vscode panel sidebar is not active, the audio that is being played continues to run?
Quick question on 1:36:07 -- I got a "tsconfig.json" not found error. Could you help pointing me to the right direction? Thanks!
I have a question. Can you make personal extensions and themes using the yo package? Or is it only for release?
yeah you can use vsce to create a bundle that you can send to who ever wants the extension (or just yourself)
Thank you very much for sharing this, I enjoyed it very much.
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
I don't even use JS or VSCode, time to watch the whole thing.
yes xD
_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_
bruh, this guy can make whatever the fuck he wants.
at the beginning does someone else's command not work? the helloWorld command just doesn't show up for me at all to run
Thank you for this GOAT!
My VSCode decides to stop compiling the extension right after it confirms that webpack compiles successfully. It stays stuck on that indefinitely, any suggestions?
Best cs youtuber out there
Hey Ben, can you explain a little more how you can add other things in setState. I am trying to do what you suggested at 3:29:20 with keeping track of the text in the input field if someone closes the view and comes back, but I am struggling to get it to work. What would be the syntax to keep track of multiple variables in setState? Do I need to follow this convention $: { tsvscode.setState({page}); } on multiple svelte files?
1:08:18 -- "editor.acceptSuggestionOnCommitCharacter": false
Please pin this comment ! :)
My first thought before I realized its a tutorial was: "another extension? Again? Please have mercy and stop"
Thanks a lot man, I was able to use yours as base and do mine, which is almost finished now, but I'm having issues when creating the package. No errors prompt on my "run watch", but if I publish my extension and try to install and load on another computer, it gives me an error that it can't load my base css and js file, am I missing something?
I got this error while running the API, node:internal/modules/cjs/loader:936 throw err Cannot find module 'C:\...\api\index.js' [nodemon] app crashed - waiting for file changes before starting...
Had the same, did you figure out how to fix it?
Dude, you make programming look so cool!
Learnt a lot from the video!
what is this extension 3.58 that does the bracket scope highlight?
12:19 its coming as 'command not found' even after reloading the window.
The syntax highlighting looks cool what theme is that?
Yeah! Thanks for this!
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 🤞
To fix express and webpack use setting:
externals: {
express: "commonjs express",
vscode: "commonjs vscode",
}
Hey Ben. Quick question, what is the extension you are using to add intelliSense to the terminal?
fish shell
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"
}
Did anyone try deploying the extension..? My panels are not showing anything I think they are not able to load the svelte code! It is working fine in development mode..
This problem is coming after I deploy.. Help anyone? @benawad
Hey ben, How can i prevent a file from opening or close a opened file through my extension?
Hey can we use react for components?
if yes, then how, please help. Thanks In advance!!
Can you do a video on deploying please? When I create a .vsix file I can install it but the extension won't load. Commands are registered but i can't run them and the sidebar is showing but does not load :/
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.
Lmao i was thinking about learning this after Vsinder...my man back at ut again. ◉‿◉