Vscode: [Suggestion] Smooth Cursor/Typing Animation (Like Microsoft Office)

[JeffreyCA]

I want to make a suggestion to add an option to have a smooth typing animation like the one in Office 2013 and 2016.

There is already such add-in for Visual Studio, but not for VSCode here.

[foisonocean]

+1

[akshayvinchurkar]

+1

[MayakoAelys]

I would LOVE either a plugin or a core feature that implement that. Smooth typing is life.

[westinrc-rp]

+1

[kingerking]

So is this feature planned to be implemented then? I would love to see this.

[IncognitoJam]

I would also really like to see something like this implemented in the future! 👍

[r33int]

+1

[bakapear]

+1

[zodiark23]

+1

[iammruni]

+1

[tuannvm]

+1

[vaxosv]

+1

[spikespaz]

+100

[MGRich]

+1

[akshayvinchurkar]

Any Updates on this feature?

[ge0rgecz]

In Atom editor, ony thing you need to achieve this effect is new css style _transition: all 80ms;_ to _atom-text-editor .cursor_ element ... Big challenge for VScode ?

[akshayvinchurkar]

@ge0rgecz ok so that means you apply that transition to all things in atom editor wow

[IncognitoJam]

.cursor {
    transition: all 80ms;
}

With this simple css the cursor can be animated to move smoothly. You can test this out by opening the developer tools in vscode and adding a new style rule.

Someone may be able to turn this into a simple extension.

[MayakoAelys]

That can even be a productive way to learn how to develop a VSCode extension. Thanks @IncognitoJam! 👍

[spikespaz]

@IncognitoJam Forgive my ignorance, I'm not used to Chromium developer tools. Where do I add new styles in the developer panel?

[IncognitoJam]

@spikespaz You should go to the Elements tab and look at the Styles tab in the bottom/second pane. Click the little + icon which says New style rule when you hover over it. You can now add CSS here. I don't think this is permanent though and you will have to re-add the style each time you open VS Code.

[JeffreyCA]

Thank you for the CSS hack, it works for me, but it's only temporary. If you look at these issues here and here, I don't think you can inject the CSS permanently unless you make your own theme (I don't even know if you can modify the .cursor property like that by theming?)

One of the guys from Microsoft (@bpasero) said this:

Thanks for this PR but we decided to not allow these kinds of modifications to our CSS directly. Rather, we think that our theming story should be evolved to allow more user configurations. See #26128, #26129 and #26130 for example.

The two main issues with this approach here is:

• basically this makes all of our CSS class names API (in the same way all of our themable colors have become API). we do not want to commit ourselves to keeping the CSS class names stable. rather we should find those styles that we want to make themable and then explicitly announce them as API (same as we did and do for colors)

*the other issue is that bug reports we receive will be harder to understand if users run with custom CSS changes that we are not aware of. we think that we should be in control of which user styles can be changed and provide explicit support for instead of opening the door to any CSS changes that are possible with this approach

In one of the issues there was a suggestion to use vscode-custom-css, which can make it somewhat permanent. However, it involves modifying VS Code core files, requires admin rights, and a reload is needed after every VS Code update. Use at your own risk.

If an Extension is not the way to go, maybe it's worth a try to implement it directly in the source code.

In the mean time, we have the Chromium Developer Tools method above (temporary) and the vscode-custom-css method ("semi-permanent").

[spikespaz]

On windows, I found a way to permanently do it.

Edit the file:
<install_path>\resources\app\out\vs\workbench\electron-browser\bootstrap\index.html

Add the style to the head element of the file:

<style>
  .cursor {
    transition: all 80ms;  // The duration that you want
  }
</style>

This change will persist through restarts. It may say that the installation is corrupt, I just clicked "Don't show this again."

You will likely have to apply this again after each update. It would be nice if this feature was integrated into the editor itself.

Maybe borrowing some code from that custom CSS extension to accomplish this would be helpful, but for now this will do.

[JeffreyCA]

I made a Pull Request in #51197! Thank you @IncognitoJam for the suggestion. I pretty much followed how the other cursor-related settings were implemented.

[spikespaz]

In the meantime, I made a very WIP extension for this. It will be buggy.

https://github.com/spikespaz/vscode-smoothtype

https://marketplace.visualstudio.com/items?itemName=spikespaz.vscode-smoothtype

[MayakoAelys]

Can't wait to have this setting built-in 😄

[deviantnasir]

Need this feature asap in next update as built-in feature.

[beastdestroyer]

Definitely! #55337 (Just thought I'd put my issue here)