Vscodeの”区切り”を設定して作業効率をあげよう！

初めまして！ManataDesignの浅井です。

Vscodeでコーディングしているコーダーさんは多いですよね、かく言う私もその一人です。しかし、多機能なソフトの典型でカスタマイズできる幅が広すぎて何が何だかわからなくなることも…

そこで私が特にあまり設定を見直されないなと感じている”区切り(word separators)”についてお話ししたいと思います

区切り(Word Separators)とは

区切りとは
HTMLのコーディングの際にクラスを命名する必要があります。その時の命名規則で「BEM」と言う方法が一般的であると思います。ここでBEMについて詳しく語りませんが、Block__Element--Modifierとハイフンとアンダーバーでそれぞれを区別するのが基本的な使い方です。

具体例

<div class="content">
    <p class="content__txt">こんにちは！</p>
    <p class="content__txt--en">Hello!!</p>
</div>

もし__txtの部分を「__lead」などに変更したくなった場合を想定します。Vscodeには”⌘ + D”で単語の区切りを判断してする機能があります。これが件の区切り(Word Separators)です！

現在の設定ですと

アンダーバーによる区切りが設定されていないのでブロックであるcontentごと選択しています。

区切りを設定しよう

1, Vscode上で"⌘ + ,(カンマ)"で設定を開きます。
2, 設定の検索窓に「区切り」と打ちます。
この画面に移動できたでしょうか？

3, "`~!@#$%^&*()-=+[{]}\|;:'",.<>/?"と区切り記号がある窓に自分の区切りたい記号(今回は_アンダーバーですね)を打ち込んだら完了です！！

また"⌘ + D"で選択してみてください

今度はちゃんとアンダーバーの後にある「txt」だけを選択できました！

ここまで記事を読んでくださりありがとうございます。みなさまのVscodeがより快適なものになったと祈っています。