LowFile-scopeJavaScript / TypeScript Plug & play

Quoted attribute values

Non-empty HTML attribute values should always be inside quotes (single or double, whichever is not used in JS).

Why this matters

This practice avoids issues with spaces in attribute values and makes them more readable.

Side-by-side examples engineers can pattern-match during review.

Avoid

<input type=text>

<AppSidebar :style={width:sidebarWidth+'px'}>

Prefer

<input type="text">

<AppSidebar :style="{ width: sidebarWidth + 'px' }">

Bad

<input type=text>

Good

<input type="text">

Good

<input type='text'>

From the same buckets as this rule.

High
Avoid `v-if` with `v-for`
Never use `v-if` on the same element as `v-for`.
performance-efficiencystack-vue+1
High
Disabling Vue.js built-in escaping is security-sensitive
Avoid using directives or features that bypass Vue's built-in HTML escaping mechanisms, such as the `v-html` directive, unless the content is known to be safe or has been properly sanitized.
security-hardeningstack-vue
High
Use component-scoped styling
For applications, styles in a top-level `App` component and in layout components may be global, but all other components should always be scoped. This can be achieved through CSS modules, class-based strategies like BEM, or the `scoped` attribute in Single-File Components.
module-architecturestack-vue+1