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
<!-- 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
