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

2024年2月28日2024年3月10日

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

BEMやFLOCSSといったCSSの設計手法では、クラス名にハイフンで区切りを入れることも多いため、CSSのスタイルを適用する時に、クラス名を一括選択できると作業を効率化できます。

たったの２ステップで設定できるのでこの機会に設定をしてみてください。

STEP

VSCodeの設定画面を開く

STEP

Editor:Word Separatorsを編集する

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

Word Separatorsの中からハイフン（-）を削除します。

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

作業の効率化に必須の設定ですので、学習段階から設定することをおすすめします。

冒頭で紹介したCSS設計については、以下の書籍が参考になります。
制作会社などで取り入れられているCSS設計手法について、わかりやすく解説されているので今すぐ読むべき本です。

web制作者はWordPressブログを始めましょう！
以下の記事で、WordPressブログをやるメリットについて解説しています。

この記事を書いた人

京都で活動するweb制作者（プロフィール）
WordPressサイトを中心にホームページ制作をしています。
HTML/CSS/Sass/JavaScript/jQuery/WordPress/PHP