noInvalidGridAreas

摘要

¥Summary

规则生效日期：v1.9.0

¥Rule available since: v1.9.0
诊断类别：lint/correctness/noInvalidGridAreas

¥Diagnostic Category: lint/correctness/noInvalidGridAreas
此规则为推荐规则，默认启用。

¥This rule is recommended, which means is enabled by default.
此规则没有修复方案。

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

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

¥Sources:
- 与 named-grid-areas-no-invalid 相同
  
  ¥Same as named-grid-areas-no-invalid

如何配置

¥How to configure

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

描述

¥Description

禁止在 CSS 网格布局中无效命名的网格区域。

¥Disallows invalid named grid areas in CSS Grid Layouts.

要使命名网格区域有效，所有字符串都必须定义：

¥For a named grid area to be valid, all strings must define:

相同数量的单元格标记

¥the same number of cell tokens
至少一个单元格标记

¥at least one cell token

并且所有跨越多个网格单元的命名网格区域都必须形成一个填充的矩形。

¥And all named grid areas that spans multiple grid cells must form a single filled-in rectangle.

示例

¥Examples

无效

¥Invalid

1
a { grid-template-areas: "a a"
2
                         "b b b"; }

code-block.css:1:26 lint/correctness/noInvalidGridAreas ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Inconsistent cell count in grid areas are not allowed.
  
  > 1 │ a { grid-template-areas: “a a”
      │                          ^^^^^
    2 │                          “b b b”; }
    3 │ 
  
  ℹ Consider adding the same number of cell tokens in each string.

1
a { grid-template-areas: "b b b"
2
                         ""; }

code-block.css:1:33 lint/correctness/noInvalidGridAreas ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Empty grid areas are not allowed.
  
  > 1 │ a { grid-template-areas: “b b b”
      │                                 
  > 2 │                          ""; }
      │                          ^^
    3 │ 
  
  ℹ Consider adding the cell token within string.

1
a { grid-template-areas: "a a a"
2
                         "b b a"; }

code-block.css:1:33 lint/correctness/noInvalidGridAreas ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Duplicate filled in rectangle are not allowed.
  
  > 1 │ a { grid-template-areas: “a a a”
      │                                 
  > 2 │                          “b b a”; }
      │                          ^^^^^^^
    3 │ 
  
  ℹ Consider removing the duplicated filled-in rectangle: a

有效

¥Valid

1
a { grid-template-areas: "a a a"
2
                         "b b b"; }

1
a { grid-template-areas: "a a a"
2
                         "a a a"; }

noInvalidGridAreas

摘要

如何配置

描述

示例

无效

有效

相关链接