Web Spell & Grammar Check

Intelligent spelling and grammar checking for web projects — right inside VS Code!

This extension uses LanguageTool to smartly check only natural language text in your files:

• HTML: text outside <script> and <style> tags
• JavaScript / TypeScript / PHP: comments and string literals
• Markdown, plain text, and more

It underlines misspellings in red and grammar/style issues in yellow, shows beautiful hover tooltips with suggestions, and provides one-click Quick Fixes.

Perfect for web developers, technical writers, bloggers, and anyone who wants clean, professional text in their code.

Features

• Smart text detection — ignores code, only checks human-readable content
• Red underline + light background for spelling errors
• Yellow underline + light background for grammar/style issues
• Grammarly-style hover tooltips with detailed message and suggestions
• Quick Fix (Ctrl + .) to replace with suggested word
• Error count badges on files in Explorer and editor tabs (e.g., index.html 7)
• Status bar counter showing total issues
• Auto-check on save (configurable)
• Full support for HTML, JS/TS, PHP, Markdown, and plain text

Installation

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "Web Spell & Grammar Check"
4. Click Install

Or install directly from the Marketplace:
https://marketplace.visualstudio.com/items?itemName=MoonGulzar.web-spell-grammar-check

How to Use

1. Open any supported file (HTML, JS, PHP, Markdown, etc.)
2. The extension can auto-check on save (enabled by default)
3. Or manually run:
   Ctrl+Shift+P → type "Check Spelling & Grammar" → press Enter
4. Hover over underlined words for explanation + suggestions
5. Use Ctrl + . (Quick Fix) to apply corrections
6. View all issues in the Problems panel (Ctrl+Shift+M)
7. See issue count badges on files in Explorer

Settings

• webSpellGrammarCheck.endpoint — LanguageTool server (default: public API)
• webSpellGrammarCheck.language — Language code (e.g., en-US, en-GB, fr, de-DE)
• webSpellGrammarCheck.autoCheckOnSave — Run automatically on save (recommended)

Tip: For best experience, keep "Problems > Decorations: Enabled" turned on in VS Code settings and also select "Errors" from the following dropdown. (this extension enables it by default).

Privacy

Only extracted natural language text is sent to the configured LanguageTool server.
No code or sensitive data is transmitted.

For maximum privacy and unlimited checks, run your own LanguageTool server and set the endpoint.

Tips: For best experience, keep "Problems > Decorations: Enabled" turned on in VS Code settings (it's enabled by default with this extension). Also select "Error" from the following dropdown, by default it would be "Information".

Author

Moon Gulzar
Full-Stack Developer | VS Code Extension Creator
Author of the popular Web Project Manager extension

• LinkedIn: https://linkedin.com/in/moongulzar
• GitHub: @MoonGulzar
• My other extension: Web Project Manager

If this extension saves you from one embarrassing typo in production — please star this repo and consider sponsoring to support future development ❤️

Made with ❤️ by Moon Gulzar — helping developers write better code, one word at a time.