VScodeでハイフン区切りをダブルクリックで一括選択する方法

コードエディタのVSCodeは、デフォルトの設定ではハイフン(-)で区切った単語をダブルクリックで一括選択できません。

BEMやFLOCSSといったCSSの設計手法では、クラス名にハイフンで区切りを入れることも多いため、CSSのスタイルを適用する時に、クラス名を一括選択できると作業を効率化できます。
たったの2ステップで設定できるのでこの機会に設定をしてみてください。
STEP
VSCodeの設定画面を開く

STEP
Editor:Word Separatorsを編集する
検索ボックスに「separator」と入力し、Editor:Word Separatorsを編集します。

Word Separatorsの中からハイフン(-)を削除します。
これで、単語の区切りからハイフンが無くなり、ハイフンで区切った文字列を一括で選択できるようになります。

作業の効率化に必須の設定ですので、学習段階から設定することをおすすめします。
冒頭で紹介したCSS設計については、以下の書籍が参考になります。
制作会社などで取り入れられているCSS設計手法について、わかりやすく解説されているので今すぐ読むべき本です。
web制作者はWordPressブログを始めましょう!
以下の記事で、WordPressブログをやるメリットについて解説しています。
あわせて読みたい


web制作者ならWordPressブログをやるべき!?
私はweb制作者はWordPressブログをやるべきだと考えています。X(旧Twitter)で今日の積み上げ、学習記録などを発信されている方はよく見かけますが、駆け出しの方でWor…

コメント