useConsistentBlockLang (HTML)

Language HTML

Summary

Rule available since: v2.6.0
Diagnostic Category: lint/nursery/useConsistentBlockLang
This rule has an unsafe fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- vue
- svelte
Sources:
- Inspired from vue/block-lang
- Inspired from svelte/block-lang

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useConsistentBlockLang": "error"
6
      }
7
    }
8
  }
9
}

Description

Enforce which languages the top-level blocks of Vue and Svelte components use.

A top-level block is an element at the root of a component file, such as <script>, <style>, or <template>. Its lang attribute tells the build tool which language the block is written in, such as lang="ts" for TypeScript or lang="scss" for SCSS. Without lang, a <script> block is JavaScript and a <style> block is CSS.

Using the same languages in every component keeps a codebase consistent. For example, this rule can make sure that every component is written in TypeScript, or that no component uses a CSS preprocessor that the project doesn’t support.

This rule checks the lang attribute of the top-level blocks listed in the blocks option, and can require that a block is present. Elements nested inside other elements aren’t checked. Without blocks configured, this rule doesn’t check anything.

Options

`blocks`

The top-level blocks to check. Each key is the tag name of a block, without angle brackets, such as script, style, or a Vue custom block like i18n. Blocks that aren’t listed aren’t checked.

Each block accepts the following properties:

lang: the values allowed for the lang attribute. When set, it must contain at least one value. Values must match exactly, so "ts" doesn’t allow lang="TS". When omitted, the lang attribute of the block isn’t checked.
allowNoLang: when true, the block may also omit the lang attribute. Only applies when lang is set. Default: false.
required: when true, every component must contain at least one block with this tag name. Works with or without lang. Default: false.

The rule doesn’t check a lang attribute whose value is computed, such as lang={language} in Svelte.

The following configuration requires a TypeScript <script> block in every component, and allows <style> blocks to use SCSS or plain CSS:

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "useConsistentBlockLang": {
6
          "level": "on",
7
          "options": {
8
            "blocks": {
9
              "script": {
10
                "lang": [
11
                  "ts"
12
                ],
13
                "required": true
14
              },
15
              "style": {
16
                "lang": [
17
                  "scss"
18
                ],
19
                "allowNoLang": true
20
              }
21
            }
22
          }
23
        }
24
      }
25
    }
26
  }
27
}

Examples

Invalid

The <script> block doesn’t specify lang="ts":

1
<script>
2
</script>

code-block.vue:1:1 lint/nursery/useConsistentBlockLang  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This <script> block is missing the lang attribute.
  
  > 1 │ <script>
      │ ^^^^^^^^
    2 │ </script>
    3 │ 
  
  ℹ This project restricts the languages of <script> blocks so that every component is written the same way.
  
  ℹ The lang attribute of <script> blocks must be ts.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
  ℹ Unsafe fix: Set the lang attribute to ts.
  
    1 │ <script·lang="ts">
      │        ++++++++++

The <style> block uses Less, which isn’t allowed:

1
<script lang="ts">
2
</script>
3

4
<style lang="less">
5
</style>

code-block.svelte:4:8 lint/nursery/useConsistentBlockLang ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The language less isn't allowed in <style> blocks.
  
    2 │ </script>
    3 │ 
  > 4 │ <style lang="less">
      │        ^^^^^^^^^^^
    5 │ </style>
    6 │ 
  
  ℹ This project restricts the languages of <style> blocks so that every component is written the same way.
  
  ℹ The lang attribute of <style> blocks must be omitted or scss.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

The component has no <script> block:

1
<template>
2
  <div></div>
3
</template>

code-block.vue:1:1 lint/nursery/useConsistentBlockLang ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This component is missing a <script> block.
  
  > 1 │ <template>
      │ 
    2 │   <div></div>
    3 │ </template>
  
  ℹ This project requires every component to have a <script> block so that every component is written the same way.
  
  ℹ The lang attribute of <script> blocks must be ts.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
<script lang="ts">
2
</script>
3

4
<style>
5
</style>
6

7
<style lang="scss">
8
</style>