Case Styles: Camel, Snake, Kebab Case and more

TLDR;

camelCase
PascalCase
snake_case
SCREAMING_SNAKE_CASE
kebab-case
Train-Case
dot.case
path/case
COBOL-CASE
lowercase
UPPERCASE

As developers, we grapple with a plethora of string cases daily. Whether you're working with variable names in Python, class names in Java, or even text content in a CMS, the way you format your strings can affect readability, compliance with coding standards, and even the functionality of your code.

Today, I was working on a project where I encountered a challenge: the text was in uppercase, but it needed to be in title case across multiple places. The task may sound simple, but when you're dealing with many instances, the time adds up. To expedite the process, I decided to set up some keybindings.

In this post, I'll introduce you to different types of string cases and how you can set up keybindings to help you manipulate text more efficiently, thereby enhancing your overall development workflow.

Why Cases Matter

Before we delve into the nitty-gritty, let's briefly discuss why string cases are so crucial. They serve multiple purposes:

Readability: Proper casing makes your code more accessible to read and understand.
Consistency: A consistent casing convention makes your project look more professional.
Functionality: Some programming languages are case-sensitive, making the proper string case crucial for the code to function correctly.

The Many Faces of String Cases

Camel Case

Example: myVariableName

Pascal Case (Upper Camel Case)

Example: MyClassName

Snake Case

Example: my_variable_name

Screaming Snake Case ;)

Example: MY_CONSTANT_NAME

Kebab Case (Dash Case)

Example: my-variable-name

Train Case

Example: My-Variable-Name

Dot Case

Example: my.variable.name

Slash Case (Path Case)

Example: my/variable/name

Cobol Case

Example: MY-VARIABLE-NAME

Capital Case (Title Case)

Example: My Variable Name

Lower Case

Example: myvariablename

Upper Case

Example: MYVARIABLENAME

Setting Up Keybindings in VSCode with the Change Case Plugin

Visual Studio Code (VS Code) offers an extensive range of features, one of which is its ability to support custom keybindings. By combining this functionality with plugins like "Change Case," you can tailor your development environment to switch between different text cases seamlessly.

Installation

First, you need to install the Change Case extension if you haven't already. Follow these simple steps:

Navigate to the Extensions pane by clicking the square icon on the sidebar or pressing Ctrl+Shift+X.
Search for "Change Case."
Click "Install" next to the appropriate extension.

Custom Keybinding Configuration

After successfully installing the Change Case extension, the next step is setting up custom keybindings. Here's how to do it:

Open Keybindings File
- Open the Command Palette with F1 or Ctrl+Shift+P and type "Preferences: Open Keyboard Shortcuts (JSON)" and select it.
Edit JSON File
- You will see an array of objects, each representing a keybinding. To add a new one, you can insert a new object with the command and key you want to associate with it, or you can use the keybindings that I share below:

[
	{
		"key": "ctrl+l",
		"command": "editor.action.transformToLowercase"
	},
	{
		"key": "ctrl+u",
		"command": "editor.action.transformToUppercase"
	},
	{
		"key": "ctrl+c",
		"command": "extension.changeCase.commands"
	},
	{
		"key": "ctrl+numpad1",
		"command": "extension.changeCase.sentence"
	},
	{
		"key": "ctrl+numpad2",
		"command": "extension.changeCase.title"
	},
	{
		"key": "ctrl+numpad3",
		"command": "extension.changeCase.lower"
	},
	{
		"key": "ctrl+shift+numpad3",
		"command": "extension.changeCase.upper"
	},
	{
		"key": "ctrl+numpad4",
		"command": "extension.changeCase.kebab"
	},
	{
		"key": "ctrl+numpad5",
		"command": "extension.changeCase.camel"
	},
	{
		"key": "ctrl+shift+numpad5",
		"command": "extension.changeCase.pascal"
	},
	{
		"key": "ctrl+numpad6",
		"command": "extension.changeCase.snake"
	},
	{
		"key": "ctrl+shift+numpad6",
		"command": "extension.changeCase.constant"
	},
	{
		"key": "ctrl+numpad7",
		"command": "extension.changeCase.dot"
	},
	{
		"key": "ctrl+numpad8",
		"command": "extension.changeCase.path"
	},
	{
		"key": "ctrl+numpad_decimal",
		"command": "extension.changeCase.swap"
	}
]

Save the File
- Save your keybindings.json file after making the changes.
Test the Keybinding
- Highlight text in your editor and use ctrl+numpad2 to see if it changes to title case as expected.

Final thoughts

String cases are more than just a stylistic choice; they can impact your development workflow significantly. Using VS Code and the Change Case plugin, you can streamline this aspect of coding. Whether you adopt my keybindings or create your own, the aim is to make text manipulation quicker and more efficient. Happy coding!