noInlineStyles
このコンテンツはまだ日本語訳がありません。
Summary
Section titled “Summary”- Diagnostic Category:
lint/nursery/noInlineStyles - This rule has an unsafe fix.
- The default severity of this rule is information.
How to configure
Section titled “How to configure”{ "linter": { "rules": { "nursery": { "noInlineStyles": "error" } } }}Description
Section titled “Description”Disallow the use of inline styles.
Inline styles via the style attribute make code harder to maintain and override,
prevent reusability of styling, and can be a security concern when implementing
a strict Content Security Policy (CSP).
Instead of inline styles, use CSS classes, CSS modules, or a styling library.
Examples
Section titled “Examples”Invalid
Section titled “Invalid”<div style={{ color: "red" }}>Error</div>code-block.jsx:1:6 lint/nursery/noInlineStyles FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ Unexpected style attribute.
> 1 │ <div style={{ color: “red” }}>Error</div>
│ ^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Inline styles make code harder to maintain, reduce reusability, and can prevent effective use of a strict Content Security Policy. Use external CSS classes or stylesheets 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.
ℹ Unsafe fix: Remove the style attribute.
1 │ <div·style={{·color:·“red”·}}>Error</div>
│ ------------------------
React.createElement("div", { style: { color: "red" } });code-block.js:1:30 lint/nursery/noInlineStyles FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ Unexpected style attribute.
> 1 │ React.createElement(“div”, { style: { color: “red” } });
│ ^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Inline styles make code harder to maintain, reduce reusability, and can prevent effective use of a strict Content Security Policy. Use external CSS classes or stylesheets 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.
ℹ Unsafe fix: Remove the style attribute.
1 │ React.createElement(“div”,·{·style:·{·color:·“red”·}·});
│ ------------------------
<div className="text-red">Error</div>React.createElement("div", { className: "container" });Resources
Section titled “Resources”Related links
Section titled “Related links”Summary
Section titled “Summary”- Diagnostic Category:
lint/nursery/noInlineStyles - This rule has an unsafe fix.
- The default severity of this rule is information.
- Sources:
- Same as
@html-eslint/no-inline-styles
- Same as
How to configure
Section titled “How to configure”{ "linter": { "rules": { "nursery": { "noInlineStyles": "error" } } }}Description
Section titled “Description”Disallow the use of inline styles.
Inline styles via the style attribute make code harder to maintain and override,
prevent reusability of styling, and can be a security concern when implementing
a strict Content Security Policy (CSP).
Instead of inline styles, use CSS classes, CSS modules, or a styling library.
Examples
Section titled “Examples”Invalid
Section titled “Invalid”<div style="color: red;"></div>code-block.html:1:6 lint/nursery/noInlineStyles FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ Unexpected style attribute.
> 1 │ <div style=“color: red;”></div>
│ ^^^^^^^^^^^^^^^^^^^
2 │
ℹ Inline styles make code harder to maintain, reduce reusability, and can prevent effective use of a strict Content Security Policy. Use external CSS classes or stylesheets 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.
ℹ Unsafe fix: Remove the style attribute.
1 │ <div·style=“color:·red;”></div>
│ -------------------
<p style="font-size: 14px;">Hello</p>code-block.html:1:4 lint/nursery/noInlineStyles FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ Unexpected style attribute.
> 1 │ <p style=“font-size: 14px;“>Hello</p>
│ ^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Inline styles make code harder to maintain, reduce reusability, and can prevent effective use of a strict Content Security Policy. Use external CSS classes or stylesheets 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.
ℹ Unsafe fix: Remove the style attribute.
1 │ <p·style=“font-size:·14px;“>Hello</p>
│ ------------------------
<div class="text-red"></div><p class="body-text">Hello</p>Resources
Section titled “Resources”Related links
Section titled “Related links”Sponsored by
Copyright (c) 2023-present Biome Developers and Contributors.