AICHE +

W

Webstorm Integration

The short answer: open WebStorm, position your cursor in a JSDoc block, comment, or markdown file, press ⌃+⌥+R (Mac) or Ctrl+Alt+R (Windows/Linux), speak your documentation for 30-60 seconds, and AICHE inserts formatted text at your cursor.

WebStorm users pay for a premium IDE because they want the best JavaScript and TypeScript tooling available. Intelligent refactoring, deep framework support, built-in debugging. But WebStorm cannot write your documentation for you. JSDoc comments, package.json descriptions, README sections, and commit messages still require manual typing. That is where the bottleneck sits - not in writing code, but in explaining code to the humans who will maintain it.

1. Open WebStorm with your JavaScript or TypeScript project.
2. Position your cursor where you need documentation - above a function, component, or module export.
3. Type /** to start a JSDoc block, then press Enter to create the comment body.
4. Press ⌃+⌥+R (Mac) or Ctrl+Alt+R (Windows/Linux) to start recording.
5. Speak your complete explanation: what the function does, its parameters, return value, side effects, and any edge cases.
6. Press the hotkey again. AICHE transcribes and inserts the text inside your comment block.
7. Add JSDoc tags (@param, @returns, @throws, @example) manually. WebStorm's autocomplete will suggest tag names.

Heads-up: After voice dictation inserts text, WebStorm's IntelliSense picks up on parameter names and types mentioned in your comments. Comprehensive JSDoc actually improves WebStorm's code completion accuracy for JavaScript files that lack TypeScript type annotations.

JSDoc and TypeScript Documentation

Documenting React Components

React components in WebStorm benefit from detailed prop documentation, especially in larger teams. Position cursor above your component, start a JSDoc block, then dictate. Describe each prop, its type, whether it is required, its default value, and what happens when it changes.

For hooks, explain the purpose, accepted arguments, returned values, and cleanup behavior. Speaking naturally about a custom hook ("this hook manages WebSocket connections, accepts a URL and options object, returns connection state and a send function, reconnects automatically on disconnect with exponential backoff, and cleans up the socket on unmount") produces documentation that covers the details developers skip when typing because it feels tedious.

Interface and Type Descriptions

TypeScript interfaces and types in WebStorm deserve documentation too. Position cursor above an interface definition and dictate what each property represents, valid value ranges, and relationships between properties. WebStorm displays this documentation in hover tooltips throughout your project, making your dictated explanations visible exactly where team members need them.

Commit Messages in WebStorm's Git Panel

WebStorm's built-in Git tools (Alt+9 or Cmd+9 to open the Git panel) keep version control inside the IDE. When you are ready to commit, click into the commit message field at the top of the Commit panel, press ⌃+⌥+R, and dictate what changed and why.

WebStorm shows the diff right next to the commit message field. Scan through the changed files on the left while speaking your commit message. This produces detailed, accurate messages because you are looking at the actual changes while describing them.

For multi-file commits, mention the key files and the relationship between changes. Say "updated the user service to handle pagination, added corresponding tests in user service spec, and modified the API route to pass page and limit parameters from query string." That level of detail takes 15 seconds to speak and over a minute to type.

Code Review Comments

Reviewing Pull Requests from WebStorm

WebStorm integrates with GitHub and GitLab pull requests directly in the IDE. When reviewing code, right-click a line and add a review comment. Press your hotkey and dictate your feedback: what concerns you, what the alternative approach would be, and whether it is a blocking issue or a suggestion.

Spoken code review feedback tends to be more constructive than typed feedback. When typing, developers abbreviate and sound curt. When speaking, the natural cadence of explanation adds context and nuance that makes reviews more useful and less adversarial.

Package and Project Descriptions

The description field in package.json, the project README, and CONTRIBUTING.md files are all text that lives in WebStorm. Open any of these files and dictate content directly. For package.json, click into the description string value and dictate a clear one-sentence summary of what the package does.

WebStorm-Specific Tips

• Built-in terminal. WebStorm's terminal (Alt+F12) works with AICHE for commit messages, npm script documentation, and shell commands. Everything stays in one window.
• Live Templates after dictation. Use WebStorm's Live Templates to add JSDoc structure quickly, then fill the descriptive content with voice. Type /** + Tab to expand the template, then dictate the body.
• Scratch files. WebStorm's scratch files (Ctrl+Alt+Shift+Insert) are perfect for quick dictated notes during debugging. Open a scratch markdown file, dictate your findings, and they persist without cluttering your project.
• No plugin needed. AICHE runs as a standalone desktop app. No JetBrains marketplace plugin to install, no compatibility concerns with WebStorm updates.

The pro-tip: When documenting a module with multiple exported functions, dictate all the documentation in a single session. Open the file, move to each function in sequence, and dictate one after another. Batch documentation is faster than context-switching back to voice for each individual function.

Result: JSDoc comments that cover parameters, return types, edge cases, and examples. Commit messages in WebStorm's Git panel that explain the "why" behind changes. Code review feedback that is thorough without being exhausting to write.

Do this now: Open WebStorm, navigate to your most complex React component or utility function, add a JSDoc block above it, press ⌃+⌥+R, and explain what it does as if you are onboarding a new team member.