Skip to content

Variables Rules

Variable naming conventions for camelCase, PascalCase, and hooks

1 rules1 auto-isFixable1 isConfigurable

On This Page

variable-naming-convention

variable-naming-convention

auto-isFixableisConfigurable

camelCase for variables, PascalCase for components, use prefix for hooks. Supports opt-in path-scoped case allowances (e.g., SCREAMING_SNAKE_CASE in Redux types folders)

Why: Consistent naming makes code predictable. Path-scoped exceptions let teams keep conventions like Redux action types without disabling the rule per file.

Options

OptionTypeDefaultDescription
allowedCasesArray<{ paths: string[], cases: ("camelCase" | "PascalCase" | "SCREAMING_SNAKE_CASE" | "snake_case" | "kebab-case")[] }>[]Path-scoped allowed naming cases. Empty by default — camelCase enforced everywhere until the consumer opts in. Paths use glob syntax (`*`, `**`). Each entry adds the listed cases to the allowed set for files matching any of its paths.
eslint.config.js
javascript
"code-style/variable-naming-convention": ["error", { allowedCases: [] }]
Correct
javascript
const userName = "John";const UserProfile = () => <div />;const useAuth = () => {}; // With allowedCases: [{ paths: ["**/types/**"], cases: ["SCREAMING_SNAKE_CASE"] }]// src/types/user.tsexport const FETCH_USER_REQUEST = "FETCH_USER_REQUEST";
Incorrect
javascript
const user_name = "John";const MAX_RETRIES = 3;const userProfile = () => <div />;
eslint.config.js
javascript
"code-style/variable-naming-convention": "error"
TypeScript