Convention Lint

Enforce consistent naming conventions for files, folders, and HTML/JSX/Vue/Svelte class & id attributes — with real-time diagnostics and Quick Fix.

Installation

Search "Convention Lint" in the VS Code Marketplace, or:

ext install Drangon-Knight.convention-lint

CLI

npm install -g convention-lint

Features

Real-time Diagnostics (Problems Panel)

Convention Lint reports violations directly in the Problems panel — just like ESLint or Stylelint.

• Inline wavy underlines on violations
• Detailed messages with violation reason
• Severity levels: Error, Warning, Information, Hint, or Off

Quick Fix + Fix All

Click the lightbulb or press Ctrl+. on a violation to auto-convert:

• myClass → my-class (kebab-case)
• my-component → myComponent (camelCase)
• Fix All Convention Lint — fix every violation in one click

Disable Comments

<!-- convention-lint-disable -->
<div class="IgnoreThis"></div>
<!-- convention-lint-enable -->

<!-- convention-lint-disable-next-line -->
<div class="ThisLineOnly"></div>

Supported Naming Rules

| Rule | Pattern | Example | |------|---------|---------| | kebab-case | lowercase + hyphens | my-component | | camelCase | lowercase first, capitalize words | myComponent | | PascalCase | capitalize all words | MyComponent | | snake_case | lowercase + underscores | my_component | | lowercase | lowercase only, no separators | mycomponent |

Supported File Types

| Language | Attributes | |----------|-----------| | HTML | class, id, src | | Vue | class, :class, v-bind:class | | JSX / TSX | className | | Angular | class, [ngClass], [class.name] | | Svelte | class, class:name | | PHP | class, id (template syntax excluded) |

Atomic CSS Detection

Automatically skips 300+ utility-first CSS class names (df, jcc, w100px, bgFFFFFF, sm-dn, hover-o80, etc.)

Configuration

Create .convention.json in your project root:

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

Per-Rule Severity

{
  "convention": {
    "severity": "warning",
    "classSeverity": "error",
    "idSeverity": "hint",
    "pathSeverity": "off"
  }
}

CLI Usage

convention-lint lint [dir]           # Scan folder
convention-lint lint --no-fail       # Warn only (CI mode)
convention-lint check <files...>     # Check specific files (pre-commit)
convention-lint watch [dir]          # Watch mode
convention-lint init                 # Create .convention.json

Commands

| Command | Shortcut | Description | |---------|----------|-------------| | Check & Save | Ctrl+S | Validate then save | | Check Folder | — | Scan a folder | | Check Workspace | — | Scan all files | | Toggle ON/OFF | — | Enable/disable |

Links

• VS Code Marketplace
• GitHub
• Issues