VS Code: Change Cursor Color, Style & Animation

I think customizing the cursor can make your coding experience more enjoyable and efficient.

That’s why in this post I’m going to show you how to customize the cursor in VS Code.

We’ll be changing the cursor in both the editor and the terminal.

Let’s get started!

Change cursor color

To change the color of the cursor in VS Code:

1. Press CTRL + SHIFT + P (or Command + SHIFT + P on macOS)
2. Type settings.json
3. Select Preferences: Open Current Profile Settings (JSON)

1. Set the following properties under the workbench.colorCustomizations object:

🎥 Would you prefer a video version of this post? Check this out:

Change cursor style & animation

Let’s see how to customize the cursor style & animation in the Settings panel.

1. Press CTRL + , (comma) (or Command + , on macOS) to open the Settings
2. Type cursor style

Here we have a bunch of settings we can play around with.

The Editor: Cursor Blinking is used to control the editor cursor animation style and holds the following values:

• blink (by default)
• smooth
• phase
• expand
• solid

To see an example of how each option would look, check out this video.

The Editor: Cursor Style is used to control the editor cursor style and holds the following values:

• line (by default)
• block
• underline
• line-thin
• block outline
• underline-thin

The Terminal > Integrated: Cursor Style is used to control the style of the terminal cursor and holds the following values:

• block (default)
• line
• underline

To change the animation of the terminal cursor, search for terminal cursor style in the same Settings panel.

The Terminal > Integrated: Cursor Style holds the following values:

• block (by default)
• line
• underline

That’s all for this article! Happy coding! 😊

Comments