eslint-plugin-variable-naming

eslint-plugin-variable-naming

ESLint plugin to enforce consistent variable naming conventions with full configurability.

Installation

  npm install --save-dev eslint-plugin-variable-naming

Usage

With ESLint Legacy Config (.eslintrc.json)

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["variable-naming"],
  "rules": {
    "variable-naming/enforce-variable-naming-convention": ["error", {
      "caseType": "camelCase"
    }]
  }
}

With ESLint Flat Config (JavaScript - eslint.config.js)

const variableNaming = require('eslint-plugin-variable-naming');
const tsParser = require('@typescript-eslint/parser');

module.exports = [{
    files: ['**/*.ts', '**/*.tsx'],
    languageOptions: {
        parser: tsParser,
        parserOptions: {
            ecmaVersion: 'latest',
            sourceType: 'module',
            project: './tsconfig.json',
        },
    },
    plugins: {
        'variable-naming': variableNaming,
    },
    rules: {
        'variable-naming/enforce-variable-naming-convention': ['error', {
            caseType: 'camelCase',
        }],
    },
}, ];

With ESLint Flat Config (TypeScript - eslint.config.ts)

import variableNaming from 'eslint-plugin-variable-naming';
import tsParser from '@typescript-eslint/parser';
import type {
    Linter
} from 'eslint';

const config: Linter.FlatConfig[] = [{
    files: ['**/*.ts', '**/*.tsx'],
    languageOptions: {
        parser: tsParser,
        parserOptions: {
            ecmaVersion: 'latest',
            sourceType: 'module',
            project: './tsconfig.json',
        },
    },
    plugins: {
        'variable-naming': variableNaming,
    },
    rules: {
        'variable-naming/enforce-variable-naming-convention': ['error', {
            caseType: 'camelCase',
            checkFunctions: false,
            ignoreDestructuring: false,
            ignoreImports: false,
        }],
    },
}, ];

export default config;

Using Recommended Config

Legacy Config (.eslintrc.json)

{
"parser": "@typescript-eslint/parser",
"extends": ["plugin:variable-naming/recommended"]
}

Flat Config (JavaScript)

const variableNaming = require('eslint-plugin-variable-naming');
const tsParser = require('@typescript-eslint/parser');

module.exports = [{
    files: ['**/*.ts', '**/*.tsx'],
    languageOptions: {
        parser: tsParser,
        parserOptions: {
            project: './tsconfig.json',
        },
    },
    ...variableNaming.configs.recommended,
}, ];

Flat Config (TypeScript)

import variableNaming from 'eslint-plugin-variable-naming';
import tsParser from '@typescript-eslint/parser';

export default [{
    files: ['**/*.ts', '**/*.tsx'],
    languageOptions: {
        parser: tsParser,
        parserOptions: {
            project: './tsconfig.json',
        },
    },
    ...variableNaming.configs.recommended,
}, ];

Configuration Examples

Complete example with all options

// eslint.config.ts
export default [{
    files: ['**/*.ts', '**/*.tsx'],
    rules: {
        'variable-naming/enforce-variable-naming-convention': ['error', {
            // Specify the case type
            caseType: 'camelCase',

            // Allowed patterns (regex) to ignore
            allowedPatterns: ['^_.*', '^CONSTANT_.*'],

            // TypeScript types to exclude
            excludeTypes: ['Promise', 'Observable'],

            // React component creator functions
            componentCreators: ['lazy', 'memo', 'forwardRef'],

            // CSS-in-JS libraries
            styledLibraries: ['styled', 'emotion'],

            // Hook pattern (null to disable)
            hookPattern: '^use[A-Z]',

            // Check function variables
            checkFunctions: false,

            // Ignore destructured variables
            ignoreDestructuring: false,

            // Ignore imported variables
            ignoreImports: true,
        }],
    },
}, ];

Example for React projects

// eslint.config.ts
export default [{
    files: ['**/*.tsx'],
    rules: {
        'variable-naming/enforce-variable-naming-convention': ['error', {
            caseType: 'camelCase',
            componentCreators: ['lazy', 'memo', 'forwardRef', 'createContext'],
            styledLibraries: ['styled'],
            hookPattern: '^use[A-Z]',
            ignoreImports: true,
        }],
    },
}, ];

Example for snake_case convention

// eslint.config.ts
export default [{
    files: ['**/*.ts'],
    rules: {
        'variable-naming/enforce-variable-naming-convention': ['error', {
            caseType: 'snake_case',
            componentCreators: [],
            styledLibraries: [],
            hookPattern: null,
            checkFunctions: true,
        }],
    },
}, ];

Options

caseType (default: "camelCase")

The naming convention to enforce:

• "camelCase": myVariable
• "PascalCase": MyVariable
• "snake_case": my_variable
• "UPPER_SNAKE_CASE": MY_VARIABLE
• "kebab-case": my-variable

allowedPatterns (default: [])

Array of regex patterns for variable names to ignore:

{
  "allowedPatterns": ["^_.*", "^CONSTANT_.*"]
}

excludeTypes (default: [])

TypeScript types to exclude from checking:

{
  "excludeTypes": ["Promise", "Observable"]
}

componentCreators: (default: ["lazy", "styled", "createElement", "memo", "forwardRef", "createContext"])

Functions that create React components (set to [] to disable):

{
  "componentCreators": ["lazy", "memo"]
}

styledLibraries (default: ["styled"])

CSS-in-JS library names (set to [] to disable):

{
  "styledLibraries": ["styled", "emotion"]
}

hookPattern (default: "^use[A-Z]")

Regex pattern to match hook functions (set to null to disable):

{
  "hookPattern": "^use[A-Z].*"
}

checkFunctions (default: false)

Whether to check function variables:

{
  "checkFunctions": true
}

ignoreDestructuring (default: false)

Whether to ignore destructured variables:

{
  "ignoreDestructuring": true
}

ignoreImports (default: false)

Whether to ignore imported variables:

{
  "ignoreImports": true
}

Examples

// ❌ Bad (with camelCase)
const MyVariable = 'value';
const my_variable = 123;

// ✅ Good (with camelCase)
const myVariable = 'value';
const anotherVar = 123;

License

MIT