DEV Community

Cover image for VSCode Extension - Doc Tab: edit the doc comments in a new tab
Vi Pro
Vi Pro

Posted on

VSCode Extension - Doc Tab: edit the doc comments in a new tab

"Doc Tab" is a Visual Studio Code extension that allows you to edit the doc comments in a new tab.

Cover

The Problem

Editors like VSCode support markdown preview for JSDoc / TSDoc, but it's often challenging to edit, format, and indent it within the comment block. This extension is designed to assist in editing doc comments in a new tab, providing the benefits of specific language features such as Markdown's syntax highlighting, intelligence, linting, and formatting.

Setup

You can install the VSCode extension from the Visual Studio Marketplace or check out the source code from my GitHub repository.

Usage

  1. Choose or position the cursor within the documentation comment block.
  2. Access the command palette:
    • Ctrl+Shift+P on Windows/Linux
    • Cmd+Shift+P on macOS
  3. Enter Doc Tab: Edit Comment In New Tab and hit Enter.
  4. Modify the documentation comment in the new tab.
  5. Close the tab without saving to discard any alterations.
  6. The changes will be applied to the documentation comment block. 🎉🎉

Recommended Workflow

  1. Format the code (using eslint, prettier, etc.).
  2. Edit the documentation comments in a new tab. It's advisable to preview while editing.
  3. Format the code in the new tab.
  4. Close the tab without saving.
  5. Format the code once again.
  6. Reformat the documentation comments (using Rewrap).

Recommended Extensions for Combined Use

Please feel free to file any issues or pull requests if you encounter any problems or have ideas. Thank you very much.

Top comments (0)