noSyncScripts

HTML
JavaScript (and super languages)

摘要

¥Summary

规则生效日期：v2.3.6

¥Rule available since: v2.3.6
诊断类别：lint/nursery/noSyncScripts

¥Diagnostic Category: lint/nursery/noSyncScripts
此规则没有修复方案。

¥This rule doesn’t have a fix.
此规则的默认严重级别为 information。

¥The default severity of this rule is information.
来源：

¥Sources:
- 与 @next/next/no-sync-scripts 相同
  
  ¥Same as @next/next/no-sync-scripts

如何配置

¥How to configure

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

描述

¥Description

防止使用同步脚本。

¥Prevent the usage of synchronous scripts.

同步脚本可能会影响网页性能，请阅读更多关于如何避免高效加载第三方 JavaScript 的内容。

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

示例

¥Examples

无效

¥Invalid

1
<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.

有效

¥Valid

1
<script src="" async></script>
2
<script src="" defer></script>
3
<script src="" type="module"></script>

摘要

¥Summary

规则生效日期：v2.3.6

¥Rule available since: v2.3.6
诊断类别：lint/nursery/noSyncScripts

¥Diagnostic Category: lint/nursery/noSyncScripts
此规则没有修复方案。

¥This rule doesn’t have a fix.
此规则的默认严重级别为 information。

¥The default severity of this rule is information.
此规则属于以下域：

¥This rule belongs to the following domains:
- react
- next
来源：

¥Sources:
- 与 @next/next/no-sync-scripts 相同
  
  ¥Same as @next/next/no-sync-scripts

如何配置

¥How to configure

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

描述

¥Description

防止使用同步脚本。

¥Prevent the usage of synchronous scripts.

同步脚本可能会影响网页性能，请阅读更多关于如何避免高效加载第三方 JavaScript 的内容。

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

示例

¥Examples

无效

¥Invalid

1
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.

有效

¥Valid

1
const Valid = () => {
2
  return (
3
    <>
4
      <script src="https://third-party-script.js" async />
5
      <script src="https://third-party-script.js" defer />
6
      <script src="https://third-party-script.js" type="module" />
7
    </>
8
  );
9
}

Next.js

1
import Script from 'next/script'
2

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

noSyncScripts

摘要

如何配置

描述

示例

无效

有效

相关链接

摘要

如何配置

描述

示例

无效

有效

Next.js

相关链接