Read Time for Visual Studio Code

A Visual Studio Code extension ideal for writers who want an estimate for how long it may take to read your articles.

Install

1. Open Extensions sidebar panel in Visual Studio Code. View → Extensions
2. Search for Read Time
3. Click Install
4. Click Reload, if required

Features

Commands can be found in the command palette. Look for commands beginning with Read Time:

Features include:

• Display the estimated minutes to read your file in the status bar
• Hover over the status bar item to see the tooltip
• Enable/disable the read time calculation and status bar item
• Configure read time to display for other file types, beyond markdown
• Adjust the words per minute (wpm) from the default 200 wpm

Settings

fileTypes

Defaults to ["markdown"], but can be an array of any file types (languageId) that you want to estimate read time.

"readTime.fileTypes": [
  "markdown",
  "plaintext",
  "yaml"
]

wordsPerMinute

Defaults to 200, but can be any number representing the number of words per minute you wish to use in the calculation.

"readTime.wordsPerMinute": 200

Commands

FAQ

Why Isn't the Icon is Appearing in the Status Bar?

There is only so much room in the status bar and the Read Time status bar icon may have become a casualty and disappeared. You can test this by zooming out of your vs code a few times so the text is very small. This will also zoom out the status bar. If the status bar icon was a casualty, then it would reappear when you zoom out.

The Read Time icon is very slim (just an icon and a number). However if it is not appearing you can try to change your settings for other items in the status bar to make them disappear. In other word, clean up your status bar by hiding things you do not want to see. Here is one example where I hid a few things that were in my status bar.

  "workbench.statusBar.feedback.visible": false,
  "debug.showInStatusBar": "never",
  "azure.showSignedInEmail": false,
  "liveshare.showInStatusBar": "whileCollaborating",
  "spellright.statusBarIndicator": false

Roadmap

There are many features in the roadmap. Please refer to the issues list and feel free to grab one and contribute!

Changes

See the CHANGELOG for the latest changes.

Credits

Inspiration comes in many forms. These folks and teams have contributed either through ideas, issues, pull requests, or guidance. Thank you!

• The VS Code team and their incredibly helpful guide for creating extensions

• Here are some great examples for extensions from the VS Code team

Try the Code

If you want to try the extension out start by cloning this repo, cd into the folder, and then run npm install.

Then you can run the debugger for the launch configuration Run Extension. Set breakpoints, step through the code, and enjoy!

Resources

• Get VS Code
• Create your first VS Code extension
• VS Code Extension API
• Learn how to add WebPack bundles to your favorite extensions