FreeOpen Contribution

Convention Lint

Stop Debating Naming Conventions. Automate Them.

Real-time diagnostics and one-click Quick Fix for file, folder, class, and id naming across HTML, Vue, React, Svelte, PHP, and Angular.

Install VS Code Extension See Features

v1.0.0

Version

Free Forever

License

Frameworks

Naming Chaos Costs Real Time

Inconsistent naming conventions cause endless code review comments, slow onboarding, and growing tech debt. Convention Lint fixes this automatically.

😤

Review Friction

Code reviews wasted on 'use kebab-case here' comments instead of real logic review.

🔄

Inconsistent Codebase

myComponent, My_Component, my-component — same thing, three styles, zero consistency.

⏰

Onboarding Delay

New developers guess conventions. Every wrong guess becomes a PR revision.

One Click to Consistency

Real-time diagnostics catch violations. Quick Fix converts them instantly.

Before

<!-- ❌ Inconsistent naming -->
<div class="userProfile">
  <span class="First_Name">John</span>
  <button class="submit-BTN" id="Main_Button">
    Save
  </button>
</div>

<!-- File: UserProfile.html -->
<!-- Folder: User_Components/ -->

After (Quick Fix)

<!-- ✅ Quick Fix applied (kebab-case) -->
<div class="user-profile">
  <span class="first-name">John</span>
  <button class="submit-btn" id="mainButton">
    Save
  </button>
</div>

<!-- File: user-profile.html -->
<!-- Folder: user-components/ -->

Features

⚡

Real-Time Diagnostics

Violations appear as wavy underlines in the editor, just like ESLint.

🔧

Quick Fix

Ctrl+. to auto-convert any name. Fix All for entire documents.

🎨

Atomic CSS Aware

Automatically skips 300+ utility class patterns. Works with Tailwind too.

📁

File & Folder Lint

Not just class/id — enforces naming on files and folders too.

🛡️

Template Syntax Safe

Skips PHP, Vue, Jinja, EJS, Razor template blocks automatically.

🤖

AI-Ready (MCP)

Built-in MCP server for Claude Code, Cursor, and Windsurf integration.

5 Naming Rules

Choose one per target. Mix and match across class, id, file, and folder.

RulePatternExample

kebab-caselowercase + hyphensmy-component

camelCaselowercase first, capitalizemyComponent

PascalCasecapitalize all wordsMyComponent

snake_caselowercase + underscoresmy_component

lowercaselowercase, no separatorsmycomponent

Supported Frameworks

✓HTML

✓Vue (.vue)

✓React / JSX

✓TypeScript / TSX

✓Svelte

✓PHP

✓Angular

✓Plain HTML

2-Minute Setup

Install the extension and drop a config file. That's it.

Install

# VS Code
ext install Drangon-Knight.convention-lint

# CLI (for CI/CD)
npm install -g convention-lint-cli
convention-lint ./src

.convention.json

{
  "convention": {
    "classNamingRule": "kebab-case",
    "idNamingRule": "camelCase",
    "fileNamingRule": "kebab-case",
    "folderNamingRule": "lowercase",
    "ignoreAtomicCSS": true,
    "severity": "warning",
    "extensions": [
      ".html", ".vue", ".jsx",
      ".tsx", ".svelte", ".php"
    ],
    "ignore": ["node_modules", "dist"]
  }
}

License

Convention Lint is free for all developers. Proprietary software — free to use, not open source.

✓

Allowed

Use in any project — personal, commercial, enterprise. No limits.

✗

Restricted

No copying, modifying, or redistributing source code.

End Naming Debates Today

Install Convention Lint and let the tool enforce consistency. Free, no signup, no limits.

Install VS Code Extension