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 (6)

Collapse
 
mikixit profile image
Michael | MikixIT

Thank you for sharing!

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
 
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.