DEV Community

loading...
Cover image for Change Cursor Style and Animation in VS Code

Change Cursor Style and Animation in VS Code

rajeshroyal profile image Rajesh Royal ・1 min read

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,

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

Discussion (0)

pic
Editor guide