DEV Community

Cover image for Change Cursor Style and Animation in VS Code
Rajesh Royal
Rajesh Royal

Posted on

Change Cursor Style and Animation in VS Code

We have 4 types of cursor animations in VS Code editor.
phase, smooth, expand and solid.

To set a particular animation for the cursor in VS Code you need to add a cursor animation setting to your settings.json file.

Open settings.json => ctrl + shift + P and search for setting.json, add a new setting:

"editor.cursorBlinking": "smooth",

Here is a screen-shot of settings.json

Alt vs code editor cursor setting json file screenshot

To Change cursor width and Style:

"editor.cursorStyle": "line",
"editor.cursorWidth": 6,
Enter fullscreen mode Exit fullscreen mode

we have 6 styles of cursor in VS Code:

block, block-outline, line, line-thin, underline, underline-thin.

Animation Demos:

Smooth

Alt smooth cursor animation vs code setting JSON file screenshot

phase

Alt phase cursor animation vs code setting JSON file screenshot

Expand ❀️❀️

Alt Expand cursor animation vs code setting JSON file screenshot

Solid 😐😐

Alt solid cursor animation vs code setting JSON file screenshot

This could be a little configuration but you will enjoy It.

I will share my complete VS Code setup in next post, you may follow to get notified.

Your feedbacks are more than welcome πŸ˜‰πŸ˜‰

You may like:

Extended Html5 Boilerplate for VS Code

GitHub logo Rajesh-Royal / extended-html5-boilerplate-vscode

This is a Visual Studio Code snippet extension for generating extended HTML 5 boilerplate code | most used meta tags, seo boilerplate, bootstrap blocks snippet

Top comments (7)

Collapse
 
3chospirits profile image
3chospirits •

You can also adjust these settings by using the built in VSCode settings UI. I made a step-by-step tutorial here if anyone is interested!
youtube.com/watch?v=PWCkrHHyvjE

Collapse
 
vagnersantosaraujo profile image
Vagner Santos de AraΓΊjo •

Thank you very much, can you tell me how to adjust the cursor in the terminal?

Collapse
 
rajeshroyal profile image
Rajesh Royal •

VS code docs may have guide for this.

Collapse
 
mikixit profile image
MikixIT - Michael •

Thank you for sharing!

Collapse
 
jay206programmer profile image
Jay206-Programmer •

Thanks! Can you also tell me which font & theme are you using?

Collapse
 
rajeshroyal profile image
Rajesh Royal •

Theme:-
Name: Cobalt2 Theme Official
Publisher: Wes Bos
VS Marketplace Link: marketplace.visualstudio.com/items...

Font:-
"editor.fontFamily": "Dank Mono, Menlo, Monaco, 'Courier New', monospace"

You have to install "Dank Mono" Font.

Collapse
 
rifatnext profile image
RK •

Awesome