noSyncScripts

HTML

Caution

This rule is part of the nursery group. This means that it is experimental and the behavior can change at any time.

Summary

• Rule available since: v2.3.6
• Diagnostic Category: lint/nursery/noSyncScripts
• This rule doesn’t have a fix.
• The default severity of this rule is information.
• Sources:
  • Same as @next/next/no-sync-scripts

How to configure

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "noSyncScripts": "error"
      }
    }
  }
}

Description

Prevent the usage of synchronous scripts.

A synchronous script can impact your webpage performance, read more on how to Efficiently load third-party JavaScript.

Examples

Invalid

<script src=""></script>

code-block.html:1:1 lint/nursery/noSyncScripts ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Unexpected synchronous script.
  
  > 1 │ <script src=""></script>
      │ ^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Synchronous scripts can impact your webpage performance. Add the “async” or “defer” attribute.
  
  ℹ 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

<script src="" async></script>
<script src="" defer></script>
<script src="" type="module"></script>

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code
• Test Cases

JavaScript (and super languages)

Caution

This rule is part of the nursery group. This means that it is experimental and the behavior can change at any time.

Summary

• Rule available since: v2.3.6
• Diagnostic Category: lint/nursery/noSyncScripts
• This rule doesn’t have a fix.
• The default severity of this rule is information.
• This rule belongs to the following domains:
  • react
  • next
• Sources:
  • Same as @next/next/no-sync-scripts

How to configure

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "noSyncScripts": "error"
      }
    }
  }
}

Description

Prevent the usage of synchronous scripts.

A synchronous script can impact your webpage performance, read more on how to Efficiently load third-party JavaScript.

Examples

Invalid

const Invalid = () => <script src="https://third-party-script.js" />;

code-block.jsx:1:23 lint/nursery/noSyncScripts ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Unexpected synchronous script.
  
  > 1 │ const Invalid = () => <script src=“https://third-party-script.js” />;
      │                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Synchronous scripts can impact your webpage performance. Add the “async” or “defer” attribute. If using Next.js, consider the Script component instead.
  
  ℹ 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

const Valid = () => {
  return (
    <>
      <script src="https://third-party-script.js" async />
      <script src="https://third-party-script.js" defer />
      <script src="https://third-party-script.js" type="module" />
    </>
  );
}

Next.js

import Script from 'next/script'

const Valid = () => <Script src="https://third-party-script.js" />;

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code
• Test Cases