エディタでダブルクリックした時に選択される文字範囲を変える

最終更新日
2017.10.08

タグや変数をダブルクリックで選択した時にハイフンがあると途切れる時の対処法。

CSS のクラス名にはハイフンを使うことが推奨されてますが、ダブルクリックで単語選択するとき全部選択されてくれないと億劫じゃないですか。

Visual Studio Code の設定

今メインで使ってる VSCode の設定方法。

基本設定から設定ウィンドウを開き、左側の設定見本にあるエディタータブにある editor.wordSeparators を右側に追加。ここから選択されて欲しい文字を消します


{
  "editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?"
}

言語別に設定したい場合は以下のように記述。PHP のみ「$」も削除。


{
  "editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",
  "[php]": {
      "editor.wordSeparators": "`~!@#%^&*()=+[{]}\\|;:'\",.<>/?"
  }
}

Atom の設定

Atom の場合はエディタ設定で簡単に出来ます。メニューのファイルから環境設定を開き、エディタ設定のタブを開きます。

スクロールしていくと「単語の一部として扱わない文字」という項目があります。

ここから選択されて欲しい文字を消します。私の場合はハイフンとPHP用にドルマークを消しました。またはインストール済みのパッケージのコアパッケージにある言語用の設定画面にも同じような項目があるのでそこから言語別に変更します。

Brackets の設定

設定の中に該当するような項目がなかったのですが、本家の Issues でエクステンションで簡単にできるよーと書いている人が居ました。自作のエクステンションの追加方法を簡単に説明します。

メニューのヘルプから「拡張機能のフォルダを開く」を選択して開いたフォルダの user という方を開くとインストールしてある拡張機能のフォルダが既にいくつかあると思います。ここに新しく適当な名前でフォルダを作成します。フォルダの中に main.js という名前で JavaScript ファイルを作成します。

main.js を開き以下のようなコードを書きます。

define(function (require, exports, module) {
 'use strict';
 var CodeMirror = brackets.getModule("thirdparty/CodeMirror2/lib/codemirror");
 CodeMirror.registerHelper("wordChars", "php", /[\w\_\-\$]/);
 CodeMirror.registerHelper("wordChars", "javascript", /[\w\_\-\$]/);
 CodeMirror.registerHelper("wordChars", "css", /[\w\_\-]/);
 CodeMirror.registerHelper("wordChars", "html", /[\w\_\-]/);
});

Atom と逆で 正規表現で選択される範囲の文字を設定 します。他に SASS とかも必要なら追加してください。

ファイルを保存して Brackets を再起動します。

ハイフンを含んだクラス名や、コンポーネント用のオリジナルのタグがクリックで選択出来るようになり便利(•ө•)ノ 拡張機能の作り方もわかったので何か作ってみたいですね。

CodeMirror ってなんだろと思って調べたら Brackets が組み込みモジュールで使用してる JavaScript で作られたエディタらしいです。これを使えば Electron で自作のエディタとかも簡単に作れそうです。

MODX のエディタプラグインを作る時に使ってみました。https://github.com/chibinowa/EvoSimpleEditor