プログラミングをしていると、こんな場面に遭遇することがありませんか？
「定数名を全部大文字にしたい」
「変数名をキャメルケースに変換したい」
「HTMLのタグ名を小文字に統一したい」
VS Codeには、文字列の大文字・小文字を簡単に変換できる機能が標準で搭載されています。さらに拡張機能を使えば、スネークケースやキャメルケースなど、様々な命名規則に対応した変換も可能です。
この記事では、VS Codeで効率的に大文字・小文字を変換する方法を初心者にもわかりやすく解説します。
記事を読み終わる頃には、文字列変換の作業時間を大幅に短縮できるようになるでしょう。
VS Code標準機能で大文字・小文字に変換する
コマンドパレットを使った基本的な変換方法
VS Codeには、選択した文字列を大文字・小文字に変換する機能が標準で用意されています。
手順
- 変換したい文字列を選択
- マウスでドラッグするか、
Shift + 矢印キーで選択
- マウスでドラッグするか、
- コマンドパレットを開く
- Windows/Linux:
Ctrl + Shift + P - Mac:
Cmd + Shift + P
- Windows/Linux:
- 変換コマンドを入力
- 大文字に変換:
Transform to Uppercase - 小文字に変換:
Transform to Lowercase
- 大文字に変換:
実際の変換例
変換前:
Hello World
大文字変換後:
HELLO WORLD
小文字変換後:
hello world
キーボードショートカットを設定する
頻繁に文字変換を行う場合は、キーボードショートカットを設定すると便利です。
ショートカット設定手順
Ctrl + K, Ctrl + S（MacはCmd + K, Cmd + S）でキーボードショートカット設定を開く- 検索欄に「transform」と入力
- 「Transform to Uppercase」と「Transform to Lowercase」を見つける
- 右側の「+」マークをクリックして好きなキーを割り当てる
おすすめのショートカット設定
- 大文字変換:
Ctrl + Shift + U - 小文字変換:
Ctrl + Shift + L
これらの設定により、文字列を選択して該当のキーを押すだけで変換できるようになります。
拡張機能でより多彩な変換を行う
「change-case」拡張機能のインストール
標準機能では大文字・小文字の変換しかできませんが、拡張機能を使うことで様々な命名規則に対応できます。
インストール手順
- VS Codeの拡張機能タブ（
Ctrl + Shift + X）を開く - 検索欄に「change case」と入力
wmaurer.change-caseを見つけてインストール
change-case拡張機能で使える変換一覧
この拡張機能では、以下のような多彩な変換が可能です：
基本的な変換
- 大文字（UPPER CASE）:
HELLO WORLD - 小文字（lower case）:
hello world - タイトルケース（Title Case）:
Hello World
プログラミングでよく使う変換
- キャメルケース（camelCase）:
helloWorld - パスカルケース（PascalCase）:
HelloWorld - スネークケース（snake_case）:
hello_world - ケバブケース（kebab-case）:
hello-world - コンスタントケース（CONSTANT_CASE）:
HELLO_WORLD
その他の便利な変換
- ドットケース（dot.case）:
hello.world - パスケース（path/case）:
hello/world - センテンスケース（Sentence case）:
Hello world
change-case拡張機能の使い方
右クリックメニューから使用
- 変換したい文字列を選択
- 右クリックして「Change Case」を選択
- 変換したい形式を選択
コマンドパレットから使用
- 変換したい文字列を選択
Ctrl + Shift + P（MacはCmd + Shift + P）を押す- 「Change Case:」と入力して変換一覧を表示
- 好きな変換を選択
実際のプログラミングでの活用例
JavaScript変数名の変換
変換前:
const user_name = "John";
const USER_AGE = 25;
キャメルケース変換後:
const userName = "John";
const userAge = 25;
CSS クラス名の変換
変換前:
.MainContainer {
background: white;
}
ケバブケース変換後:
.main-container {
background: white;
}
複数行や複数箇所を一括変換する方法
複数行選択での変換
VS Codeでは、複数行を選択して一度に変換することも可能です。
方法
Altキーを押しながらクリックして複数箇所を選択- または
Ctrl + Shift + Lで同じ文字列を全選択 - 変換コマンドを実行
検索・置換を使った大量変換
大量の文字列を一括変換したい場合は、検索・置換機能と組み合わせると効率的です。
手順
Ctrl + H（MacはCmd + H）で置換画面を開く- 正規表現を有効にする（「.*」ボタンをクリック）
- 変換したいパターンを検索
- 置換後の文字列を入力
- 「すべて置換」を実行
よくある使用場面と対処法
プログラミング言語別の命名規則
JavaScript/TypeScript
- 変数名・関数名: キャメルケース（
userName） - 定数: コンスタントケース（
MAX_COUNT） - クラス名: パスカルケース（
UserManager）
Python
- 変数名・関数名: スネークケース（
user_name） - 定数: コンスタントケース（
MAX_COUNT） - クラス名: パスカルケース（
UserManager）
CSS/HTML
- クラス名・ID: ケバブケース（
main-container） - カスタムプロパティ: ケバブケース（
--primary-color）
APIレスポンスの変換
外部APIから取得したデータの命名規則を、プロジェクトの規則に合わせて変換する際にも活用できます。
トラブルシューティング
変換がうまくいかない場合
文字列が選択されていない
変換コマンドを実行する前に、必ず対象の文字列を選択してください。選択されていない場合、変換は実行されません。
日本語が含まれている場合
change-case拡張機能は英語の文字列に最適化されています。日本語が含まれている場合、期待通りの結果にならない可能性があります。
特殊文字が含まれている場合
記号や数字が含まれている場合、変換結果が期待と異なる場合があります。事前に確認してから変換することをおすすめします。
より効率的な使い方のコツ
マルチカーソルとの組み合わせ
Ctrl + Dで同じ単語を複数選択- 一度に複数箇所を変換
- 作業効率が大幅に向上
スニペットとの組み合わせ
よく使う変換パターンをスニペットに登録しておくと、さらに効率的に作業できます。
正規表現を活用した高度な変換
複雑なパターンマッチングが必要な場合は、正規表現と置換機能を組み合わせることで対応できます。
まとめ
VS Codeでの文字列の大文字・小文字変換は、以下の方法で効率的に行えます：
- 標準機能:
Transform to Uppercase/Lowercaseコマンド - 拡張機能:
change-caseでキャメルケースやスネークケースにも対応 - ショートカット: 頻繁に使う場合はキーボードショートカットを設定
- 一括変換: 検索・置換機能と組み合わせて大量の文字列を変換
コメント