Strings Rules
String centralization and hardcoded string prevention
1 rules1 isConfigurable
On This Page
no-hardcoded-strings
isConfigurablereport only
Enforce importing strings from constants/strings modules instead of hardcoding (skips CSS-style props, CSS-in-JS templates, responsive breakpoint objects)
Why: Centralized strings are easier to maintain, translate, and keep consistent. Style values (CSS keywords, theme tokens, breakpoint objects) are not user-facing, so they are skipped automatically.
Options
| Option | Type | Default | Description |
|---|---|---|---|
ignoreAttributes | string[] | [built-in HTML/SVG/CSS-style attrs] | JSX attributes to ignore (replaces defaults). Defaults include all HTML, SVG, and CSS-style props (fontWeight, flexDirection, sx, variant, etc.). |
extraIgnoreAttributes | string[] | [] | Additional JSX attributes to ignore (extends defaults). Use for custom CSS-like props in your design system. |
ignorePatterns | string[] | [] | Regex patterns for strings to ignore |
cssInJsTags | string[] | [] | Additional tagged-template tag names treated as CSS-in-JS (extends defaults: styled, css, keyframes, createGlobalStyle, Global, globalStyle, globalCss, tw). Use for custom CSS-in-JS factories like vanilla-extract or panda-css. |
extraBreakpointKeys | string[] | [] | Additional responsive breakpoint object keys (extends defaults: xs, sm, md, lg, xl, 2xl, base, default). Use for custom design system breakpoints (e.g. mobile, tablet, desktop). |
eslint.config.js
javascript
"code-style/no-hardcoded-strings": ["error", { ignoreAttributes: [built-in HTML/SVG/CSS-style attrs], extraIgnoreAttributes: [], ignorePatterns: [], cssInJsTags: [], extraBreakpointKeys: [] }]Correct
javascript
import { BUTTON_LABEL } from "@/constants"; <button>{BUTTON_LABEL}</button>Incorrect
javascript
<button>Submit Form</button><span>Something went wrong</span>eslint.config.js
javascript
"code-style/no-hardcoded-strings": "error"