How to Convert Variable Names Between camelCase, snake_case, and kebab-case

If you've ever copied a variable name from a Python backend into a JavaScript frontend — or pasted a CSS class into a database column name — you already know the pain. One language expects user_first_name, another wants userFirstName, and your design system insists on user-first-name. They all mean the same thing. And yet, getting them wrong causes subtle bugs, linting failures, or at minimum, a codebase that looks like it was written by three different people who never met.

This tutorial walks through the three most common naming conventions in programming, explains exactly when each one is used, and gives you concrete methods — manual, regex-based, and tooled — for switching between them cleanly and without surprises.

First, Let's Define the Three Conventions

Before you can convert between them, you need to recognize them instantly.

camelCase joins words together, capitalizing every word except the first. Example: getUserProfileData. This is the default in JavaScript, Java, Swift, and most object-oriented languages for variable and function names. The first letter is lowercase — if it were uppercase, it would be PascalCase (used for class names).

snake_case uses underscores to separate words, everything in lowercase. Example: get_user_profile_data. Python nearly mandates this via PEP 8. It's also the standard for SQL column names, Ruby methods, and environment variables (though those go all-caps: GET_USER_PROFILE_DATA).

kebab-case uses hyphens, everything in lowercase. Example: get-user-profile-data. You'll see it constantly in HTML attributes, CSS class names, URL slugs, and CLI flags. JavaScript can't use hyphens in variable names (it's read as subtraction), so kebab-case is essentially off-limits in JS code itself — but it's everywhere in the surrounding ecosystem.

Step 1 — Identify the Source Convention

Before converting anything, confirm what you're starting with. This matters because conversion algorithms are directional. The strategy to go from camelCase to snake_case is not the same as going the other way.

A quick mental check:

• Contains underscores and no capitals? → snake_case
• Contains hyphens? → kebab-case
• Has capital letters mid-word with no separators? → camelCase (or PascalCase)

Edge cases to watch: acronyms like userHTTPSResponse (camelCase with all-caps acronym), or names that mix styles because of legacy code. These need manual review — no automated tool handles them perfectly.

Step 2 — Manual Conversion (Understanding the Logic)

Even if you'll eventually use a tool, understanding the manual process helps you catch conversion errors.

camelCase → snake_case

Find every uppercase letter. Insert an underscore before it, then lowercase the whole string.

getUserProfileData
→ get_user_profile_data

Watch out for consecutive capitals (acronyms). parseHTMLContent could become parse_h_t_m_l_content if you're naive about it — which is wrong. The right result is parse_html_content. Most people just decide: acronyms in snake_case get lowercased as a single unit.

snake_case → camelCase

Split on underscores. Keep the first segment lowercase. Capitalize the first letter of every subsequent segment. Remove underscores.

get_user_profile_data
→ ["get", "user", "profile", "data"]
→ "get" + "User" + "Profile" + "Data"
→ getUserProfileData

kebab-case → camelCase or snake_case

Kebab-case and snake_case are structurally identical — just swap the separator. get-user-profile-data becomes get_user_profile_data by replacing - with _. For camelCase, follow the same capitalization logic as above, just splitting on hyphens instead.

camelCase → kebab-case

Same as camelCase → snake_case, but replace underscores with hyphens and lowercase everything.

getUserProfileData
→ get-user-profile-data

Step 3 — Regex-Based Conversion in Code

When you're converting in bulk inside a script, regex is your friend. Here are working patterns for the conversions you'll actually need.

JavaScript — camelCase to snake_case

function toSnakeCase(str) {
  return str
    .replace(/([A-Z]+)([A-Z][a-z])/g, '$1_$2')
    .replace(/([a-z\d])([A-Z])/g, '$1_$2')
    .toLowerCase();
}

toSnakeCase('getUserProfileData');   // "get_user_profile_data"
toSnakeCase('parseHTMLContent');     // "parse_html_content"

The two-pass regex handles the acronym case. The first pass breaks things like HTMLContent into HTML_Content, and the second pass handles normal camel boundaries.

JavaScript — snake_case to camelCase

function toCamelCase(str) {
  return str
    .toLowerCase()
    .replace(/_([a-z])/g, (_, char) => char.toUpperCase());
}

toCamelCase('get_user_profile_data'); // "getUserProfileData"

Python — camelCase to snake_case

import re

def to_snake_case(name):
    s1 = re.sub(r'([A-Z]+)([A-Z][a-z])', r'\1_\2', name)
    return re.sub(r'([a-z\d])([A-Z])', r'\1_\2', s1).lower()

to_snake_case('getUserProfileData')  # 'get_user_profile_data'
to_snake_case('parseHTMLContent')    # 'parse_html_content'

Python — snake_case to camelCase

def to_camel_case(snake_str):
    components = snake_str.split('_')
    return components[0] + ''.join(x.title() for x in components[1:])

to_camel_case('get_user_profile_data')  # 'getUserProfileData'

Step 4 — Using Online Tools for One-Off Conversions

Writing regex is satisfying but overkill when you just need to rename a dozen API fields in a JSON response. Several online text tools handle this instantly:

• Change Case (changecase.com) — gives you camelCase, PascalCase, snake_case, kebab-case, and more with one click.
• Transform Tools (transform.tools) — excellent for JSON key conversion. Paste an entire JSON object and convert all its keys to snake_case or camelCase in one shot.
• CaseConverter.online — simple, handles batch input, one name per line.

When using these tools for API keys or sensitive identifiers, use a local tool or your own script — don't paste production credentials into a third-party website.

Step 5 — Editor Extensions for Inline Conversion

The most friction-free approach is converting right inside your editor, without leaving the file.

VS Code: Install the extension "Change Case" by wmaurer. Once installed, select a variable name, open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P), and type "Change Case." You'll see options for every format. This is genuinely the fastest approach for renaming individual variables during a refactor.

IntelliJ / WebStorm / PyCharm: The built-in refactor tool (Shift+F6 to rename) doesn't change case style, but the plugin "String Manipulation" does. Install it via the plugin marketplace and bind it to a key if you rename across styles often.

Neovim: The plugin nvim-textcase by johmsalas provides motions like gau (to uppercase snake), gac (to camelCase), gak (to kebab). It works on the current word without needing a visual selection, which is very fast during active coding.

Step 6 — Automating Conversion at the API Boundary

The most common real-world scenario: your Python backend returns snake_case JSON, but your JavaScript frontend expects camelCase. Instead of converting manually every time, handle it at the boundary.

Python (FastAPI / Pydantic):

from pydantic import BaseModel

class UserProfile(BaseModel):
    first_name: str
    last_name: str
    profile_image_url: str

    class Config:
        alias_generator = lambda field: ''.join(
            word.capitalize() if i else word
            for i, word in enumerate(field.split('_'))
        )
        populate_by_name = True

With this config, the API response automatically serializes to firstName, lastName, profileImageUrl — no manual conversion anywhere.

JavaScript (fetch / axios): Libraries like humps (camelizeKeys / decamelizeKeys) wrap your API calls and automatically convert all keys on the way in and out. Two lines of code, and you never think about it again.

Common Mistakes to Avoid

Ignoring numbers: What does address2 become in snake_case? address_2 or address2? Different tools handle this differently. Pick a rule and stay consistent.

Over-aggressively splitting acronyms: userID → user_i_d is ugly. Most conventions prefer user_id. Your regex needs to treat consecutive capitals as a single unit, or you'll need to maintain an acronym allowlist.

Converting in strings that contain code: If you're doing a find-replace in a whole file, user_name inside a string literal or comment will also get converted. Use your editor's case-sensitive rename refactor, not a raw text replace.

Assuming kebab-case in CSS matches camelCase in JS: .user-name in your stylesheet has no automatic relationship to userName in your JavaScript. If you're using CSS Modules or a CSS-in-JS tool, the tooling handles mapping — but in vanilla setups, you're tracking the relationship yourself.

A Quick Reference Cheat Sheet

Wrapping Up

Naming convention mismatches are one of those small frictions that compound. A few inconsistent variable names become a few dozen, and suddenly every code review has a comment about style. Getting this right isn't pedantry — it's the kind of thing that makes a codebase feel coherent six months later, when you've forgotten which parts you wrote.

The right tool depends on your context: online converters for one-off renaming, editor plugins for in-file refactors, regex functions for scripted bulk conversion, and API-level libraries when you're dealing with a consistent format mismatch between systems. Now you have all three in your toolkit.