Get the Case Right: Text Transformation in Visual Studio Code

There are loads of other reasons why you might need to switch up the case of your text. Maybe you're renaming variables, function names or getting your text just right.

Sometimes clients love to be a little too creative when it comes to typing out text when delivering the content. How many times have I opened up a doc to find a random assortment of uppercase, lowercase, and don't even get me started on the typos? It's all part of the fun, right?

So, I thought I'd share a few handy tips on how to handle this in Visual Studio Code (VS Code). It'll make your life so much easier and save you a ton of time. Let's dive in!

Built-in Transform to Uppercase and Lowercase Functions:

First up, did you know that VS Code has a built-in feature that lets you switch your selected text from uppercase to lowercase (and vice versa)? Here's how you get it done:

  • Select the text you want to give a makeover.
  • Press Ctrl + Shift + P (or Command + Shift + P if you're on a Mac) to bring up the Command Palette.
  • Type "Transform to Uppercase" or "Transform to Lowercase" (whichever one you need), then hit Enter.

Using the "Change Case" Extension:

The "Change Case" extension is your new best friend. It covers all sorts of transformations, like Camel Case, Pascal Case, Kebab Case, and Snake Case. To get started:

  • First, head over to the VS Code marketplace and install the "Change Case" extension.
  • Select the text you want to transform.
  • Open the Command Palette with Ctrl + Shift + P (or Command + Shift + P on a Mac).
  • Type in the case transformation you want to apply, like "Change Case: Camel Case", then hit Enter.

Keybindings:

For those of you who love a good shortcut, why not create custom keybindings for the transformations you use the most? Here's how:

  • Bring up the Command Palette using Ctrl + Shift + P (or Command + Shift + P for our Mac users).
  • Search for "Preferences: Open Keyboard Shortcuts."
  • Click on the "+" symbol to make a new keybinding.
  • In the "Command" field, type the command for the case transformation you're after (like "editor.action.transformToUppercase").
  • In the "Keybinding" field, type the key combination you want to use for this transformation.
  • Click "OK" to save your shiny new keybinding.

I hope these methods will make managing text cases in VS Code easier. Enjoy your coding!

TipsVisual Studio Code
Avatar for Patrick Hladun

Written by Patrick Hladun

I'm a Frontend Developer and WordPress enthusiast on a mission to constantly improve my skills and keep up with the latest technology trends.

Loading

Fetching comments

Hey! 👋

Got something to say?

or to leave a comment.