The Coolest VS Code Cursor Effect You Don't Want to Miss!

Do you want this effect on  your cursor inside of VS Code? Let's see how we can do that. Alright everybody, welcome back to another video and in today's video I am going to talk about how you can achieve this cool  looking effect inside of VS Code and it's not just an extension you have to deal with a little bit more but I'm going to make it easy for you. Let's talk about the source. So I was just scrolling through Reddit and I saw this post by someone who made this extension not an extension but this script which modifies the cursor a little bit and it looks pretty cool, right? You can also check out this post I'll put this link in the description below give it an upvote, give it a comment and let's see how we can  set this up in our VS Code. Alright, so the first step is  to go on to this post on Reddit and what you can do is you can just open the dot file repository of theirs. So if I just click on this this is their dot file repository and this is where the script lives and they also have mentioned the steps to do this. First off there is this DOM modding API now this is a VS Code extension if I just open this up in a new tab basically all this extension does is it allows you to add CSS and JavaScript custom CSS and JavaScript inside of VS Code. Now if you didn't know already VS Code is built with Electron and Electron is a JavaScript framework so VS Code is essentially a browser if I go to help and if I just click on toggle DevTools what you'll see is an actual  DevTools window open up so it's just HTML, CSS, JS so you can also add JS inside of here. Getting back to the point all you need to do is just install this extension I'm just going to copy this I'm going to go inside of extensions and we'll search and this is the extension now I already have this installed just click the install button and that's it. Now once that is installed all you have to do is just go ahead and copy the trail effect dot file now if you just open this index.js file so I'm just going to open  this up in a new tab again let's close this one so this is all the code that will run inside of VS Code and that will modify VS Code a little bit now all I'm going to do is just copy all of this code so let's do that real quick now you have to pick a location to save this file somewhere so inside of my C drive now if you are on Linux or Mac you might save it somewhere else on Windows in the C drive all I'm going to do is I'm just going to create a new folder I'll just call it VSC scripts you can call it anything you want and then go inside of that folder and once the VSC scripts this folder is created what I'm going to do is I'm just going to right click and show more options and I'll open this up in VS Code and right over here I'll just trust the authors and I'll just say I'll just create a new file and I'm going to call this cursor.js you can call it anything you want now the code that we copied earlier I'm just going to paste all of the code and now is the time so you can just change the  cursor color if you want this is where the color is stored this is the default color I'll keep it default for now and then you can also modify a lot more things if you are comfortable with JavaScript if you're not then better not mess with all this so hit save and once this file is saved let's go ahead and close this now going back inside of this readme what you have to do is you have to just add this setting inside of a settings.json file so if you don't know already our settings that we change right from VS Code are stored inside of a file right, so if you just go ahead and open settings you'll find this button up top that will allow you to open the json file so let's click that now don't get scared by seeing all this code right over here this doesn't really matter all you have to do is just copy this code let's copy this and go inside of here and just paste this right over here now this is where you have to pass in the path of your file so where your file lives so right over here what I'm going to suggest is keep the file and then triple slashes and just take this out and then just give the path to your file so right now our file is stored inside of the C drive inside the C drive we have the vsc scripts folder and inside of that we have the cursor.js let's just rename this to cursor.js hit save and this points to our file once that is done what you can do is just go ahead and open the command palette with ctrl shift p and you can just run reload custom css let's just reload custom css and js hit enter now that will show you a pop up that you have to restart your VS Code let's do that and once it's done you'll see this effect works now you'll see another pop up when you do it so this is how the pop up looks like but what you have to do is you just have to go ahead and right click in the settings in the cog icon just tell it to don't show again so that it does not bother you again and again nothing has been changed inside of VS Code we just added one script that modifies everything now what if you want to change the color so right now what I'm going to do is I'm just going to pick the color for this cursor so let me just open my color picker and I'll just quickly pick this up I'll just copy this and now what you can do is you can just ctrl click to open this file once more and just paste in the color that you copied let's just get this out of the way hit save now this is where you change the color and now you want to see the changes in action so what you can do is you can just open the ctrl shift p again and then reload this one more time so let's restart VS Code again and you'll see that it works just fine now these are the recommended settings that you have to enable if you want it to look as good as this looks like so if I just open up settings normally first setting is the cursor style set it to block all this does is it makes your cursor block so if I just go ahead and search for style or cursor style I'll get these settings if I change it to line which is the default one you'll see that this is how it looks like it looks kind of weird but if you're okay with it then roll with it but I'm going to change it to block next up we have the cursor blinking which is going to be phase now if I just go ahead and search for cursor blink what you'll see is phase that's what I have set but if I change it to blink which is the default one this is how it looks like so basically this is how it blinks the cursor blinks last but not the least this is the setting which is the smooth caret animation now this is kind of important if you go back in here I'll just search for smooth caret animation and I'll just turn it off all it does is it allows your cursor to move smoothly right now if you see the cursor moves instantaneously but if I want to move it smoothly I'll just add I'll just make this on and you'll see the cursor moves a lot more smoother one more thing that I'd like to do is I'll just go ahead and change the color back to what it was before and now this is how it looks like I hope you enjoyed this video all the links will be in the description below and make sure to check this reddit post again comment below if you have any questions and let me know what is your point of view on this effect looks really cool to me but it might be distracting to some people so if you like it keep it if you don't let me know what you think about it in the comments below finally if you enjoyed this video leave a like subscribe to the channel let me know in the comments if you want more videos like these thanks for watching

Channel: Max Programming

Views: 3,055

Keywords: javascript, typescript, react, js, web development, node js, nodejs, javascript tutorial, javascript for beginners, javascript tutorial for beginners, vscode, vs code, vs code effect, vscode cursor effect, vs code customization, vs code animation, vscode tricks, vscode tips and tricks, vs code cool extensions, vscode color themes, vscode cursor animation, vscode cursor tricks, vs code cursor blink, vs code cursor style, vscode cursor, visual studio code, vscode shortcuts

Id: fe_OtrSLAs0

Length: 7min 13sec (433 seconds)

Published: Thu Mar 02 2023