<p>We have 4 types of cursor animations in VS Code editor.
<code>phase</code>, <code>smooth</code>, <code>expand</code> and <code>solid</code>.</p>
<p>To set a particular animation for the cursor in VS Code you need to add a cursor animation setting to your <code>settings.json</code> file.</p>
<p>Open <code>settings.json</code> =&gt; <code>ctrl + shift + P</code> and search for setting.json, add a new setting:</p>
<p><code>"editor.cursorBlinking": "smooth"</code>,</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1647440005789/QYi-QRFHJ.png" alt="Screenshot 2022-03-16 194259.png" /></p>
<p><strong># To Change cursor width and Style:</strong></p>
<pre><code><span class="hljs-string">"editor.cursorStyle"</span>: <span class="hljs-string">"line"</span>,
<span class="hljs-string">"editor.cursorWidth"</span>: <span class="hljs-number">6</span>,
</code></pre><p><strong># we have 6 styles of cursor in VS Code:</strong></p>
<p><code>block</code>, <code>block-outline</code>, <code>line</code>, <code>line-thin</code>, <code>underline</code>, <code>underline-thin</code></p>
<hr />

<blockquote>
<h2 id="heading-animation-demos"><strong>Animation Demos:</strong></h2>
</blockquote>
<h3 id="heading-smooth"><strong>Smooth 🙂</strong></h3>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1647545861616/0uvb_oHGc.gif" alt="smooth.gif" /></p>
<hr />

<h3 id="heading-phase"><strong>Phase 🥱</strong></h3>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1647545975986/pCVTkA7pl.gif" alt="phase.gif" /></p>
<hr />

<h3 id="heading-expand"><strong>Expand 💝</strong></h3>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1647546006287/u11jH4250.gif" alt="expand.gif" /></p>
<hr />

<h3 id="heading-solid"><strong>Solid 😑</strong></h3>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1647546016313/de3DIkySG.gif" alt="solid.gif" /></p>
<hr />

<p>This could be a little configuration but you will enjoy It.</p>
<p>I will share my complete VS Code setup in next post, you may follow to get notified.</p>
<hr />

<blockquote>
<p>If you ❤️ My Content! Connect with me on <a target="_blank" href="https://twitter.com/abhinav_jha07">Twitter</a> (abhinav_jha07)</p>
</blockquote>
<hr />
<h2 id="heading-show-your-support-by-buying-me-a-coffee">Show your support by buying me a coffee</h2>
<p><a target="_blank" href="https://www.buymeacoffee.com/abhinavjha07"><img src="https://cdn.buymeacoffee.com/buttons/default-violet.png" alt="Buy Me A Coffee" class="image--center mx-auto" /></a></p>
<hr />
<blockquote>
<h2 id="heading-my-other-digital-presence">My other digital presence:</h2>
<ul>
<li><p>Mail: <a target="_blank" href="mailto:x3vgi9xr@duck.com">x3vgi9xr@duck.com</a></p>
</li>
<li><p>GitHub: <a target="_blank" href="https://github.com/akj0712">akj0712</a></p>
</li>
<li><p>LinkedIn: <a target="_blank" href="https://www.linkedin.com/in/abhinavjha07/">abhinavjha07</a></p>
</li>
<li><p>Telegram: <a target="_blank" href="https://t.me/abhinav_kumar_jha">abhinav_kumar_jha</a></p>
</li>
</ul>
</blockquote>
<hr />
<blockquote>
<p>More Content at <a target="_blank" href="https://abhinavjha07.hashnode.dev/">abhinavjha07.hashnode.dev/</a></p>
</blockquote>
<hr />
<blockquote>
<p>Your feedback is more than welcome</p>
</blockquote>


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"`,


![Screenshot 2022-03-16 194259.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1647440005789/QYi-QRFHJ.png)

**\# 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`

<hr>

> ## **Animation Demos:**

### **Smooth 🙂**

![smooth.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1647545861616/0uvb_oHGc.gif)

<hr>

### **Phase 🥱**

![phase.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1647545975986/pCVTkA7pl.gif)

<hr>

### **Expand 💝** 

![expand.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1647546006287/u11jH4250.gif)

<hr>

### **Solid 😑** 

![solid.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1647546016313/de3DIkySG.gif)

<hr>

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.

<hr>

> If you ❤️ My Content! Connect with me on [Twitter](https://twitter.com/abhinav_jha07) (abhinav_jha07)

---

## Show your support by buying me a coffee

[![Buy Me A Coffee](https://cdn.buymeacoffee.com/buttons/default-violet.png align="center")](https://www.buymeacoffee.com/abhinavjha07)

---

> ## My other digital presence:

> * Mail: [x3vgi9xr@duck.com](mailto:x3vgi9xr@duck.com)
>
> * GitHub: [akj0712](https://github.com/akj0712)
>
> * LinkedIn: [abhinavjha07](https://www.linkedin.com/in/abhinavjha07/)
>
> * Telegram: [abhinav_kumar_jha](https://t.me/abhinav_kumar_jha)
>

---

> More Content at [abhinavjha07.hashnode.dev/](https://abhinavjha07.hashnode.dev/)

---

> Your feedback is more than welcome

Change Cursor Style and Animation in VS Code

Animation Demos:

Smooth 🙂

Phase 🥱

Expand 💝

Solid 😑

Show your support by buying me a coffee

My other digital presence:

It's your attitude, more than your aptitude, that will determine your altitude.
