Skip to content
astro-doctor
Best Practiceswarn by defaultastro-doctor/prefer-class-list

prefer-class-list

Use class:list directive for conditional or dynamic class names.

Why

Template-literal class composition is error-prone (extra spaces, false-y values leaking). class:list is Astro's idiomatic way to build class strings — it handles objects, arrays, and conditionals correctly.

Examples

Incorrect

String concatenation / template literals

astro
---
const isActive = true
---
<button class={`btn ${isActive ? 'btn-active' : ''}`}>
  Click me
</button>

Correct

class:list directive

astro
---
const isActive = true
---
<button class:list={['btn', { 'btn-active': isActive }]}>
  Click me
</button>

Configuration

Override the default severity in your ESLint config:

javascripteslint.config.js
// eslint.config.js
import astroDoctorPlugin from '@santi020k/eslint-plugin-astro-doctor'

export default [
  astroDoctorPlugin.configs.recommended,
  {
    rules: {
      'astro-doctor/prefer-class-list': 'error',   // or 'warn' or 'off'
    },
  },
]

Or in your doctor.config.ts:

typescriptdoctor.config.ts
export default {
  rules: {
    'astro-doctor/prefer-class-list': 'error',
  },
}

All rules

Edit this page on GitHub ↗