Overview
Nellie is a powerful Visual Studio Code extension designed to assist in HTML validation, entity checking, art file verification, and more. It's an all-in-one tool for ensuring your HTML files meet specific standards and requirements.
Features
1. HTML Validation
- Validates HTML markup for syntax errors and compliance issues
- Checks heading hierarchy to ensure proper document structure
- Verifies script tags and identifies unused scripts
- Offers to generate missing scripts and style tags
2. Entity Checker
- Identifies non-basic ASCII characters within 'p' tags
- Highlights special characters in real-time as you type
- Prompts for conversion to Unicode entities
- Automatically converts characters to maintain proper encoding
3. Art Checker
- Verifies art file specifications (size, dimensions)
- Flags images wider than 1,710 px and media over 20 MB
- Supports local directory and full workspace scans
- Provides detailed diagnostics for non-compliant media files
4. DCD Checker
- Identifies HTML comments in production code
- Detects spaces before closing paragraph tags
- Exempts comments in the
<head>
section
- Enforces stricter coding standards and best practices
5. Live Development Server
- Built-in server for real-time preview of HTML files
- Accessible via status bar control with one-click toggle
- Opens preview automatically in your default browser
- Makes development and testing faster and more efficient
6. Integrated Webview
- Provides an intuitive interface for running checks
- Displays validation results in an easy-to-read format
- Offers toggles for workspace and DCD checking options
- Streamlines the validation workflow
7. Workspace Settings
- Automatically updates workspace settings to Nelson specifications
- Ensures consistent formatting and configuration
Data Collection
This extension collects anonymous usage data using AWS CloudWatch to help us improve the user experience. We do not collect any personal information. The collected data includes:
- Commands used
- Errors encountered
For more information about our data collection practices, please visit our Privacy Policy.
Installation
- Open Visual Studio Code
- Go to Extensions (
Ctrl+Shift+X
)
- Search for "Nellie"
- Click Install
Usage
- Open an HTML file in VS Code
- Use the command palette (
Ctrl+Shift+P
) and type nellie
- Choose from the following commands:
nellie.checkAll
: Initiates all checks: Validation, Heading Hierarchy, Scripts, Entities, Art Specs, and DCD Check
nellie.checkHTML
: Validates HTML, checks heading hierarchy, identifies unused scripts, and offers to generate missing scripts and style tags
nellie.checkEntities
: Highlights non-basic ASCII characters and prompts for Unicode conversion
nellie.checkArt
: Verifies art specs, flagging images wider than 1,710 px and media over 20 MB
Alternatively, use the Nellie webview panel for a graphical interface to run these checks.
Configuration
Nellie automatically updates workspace settings to Nelson specifications. No additional configuration is required.
Requirements
- Visual Studio Code version 1.53.0 or higher
Known Issues
- None at this time. Please reach out to support@destinade.com with any issues.
Contributing
Please reach out to support@destinade.com for more information.
License
This project is licensed under the Destinade Tech Solutions Ltd. Software License. See the LICENSE file for details.
Support
For support, contact support@destinade.com.
Changelog
See CHANGELOG.md for a detailed list of changes in each version.
Authors
Happy coding with Nellie!