Atom と Brackets でダブルクリックした時に選択される文字範囲を変える
タグや変数をダブルクリックで選択した時にハイフンがあると途切れる時の対処法。
CSS のクラス名にはハイフンを使うことが推奨されてますが、ダブルクリックで単語選択するとき全部選択されてくれないと億劫じゃないですか。メインは Atom なんですけど Brackets も併用してるので調べてみました。
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 で自作のエディタとかも簡単に作れそうです…。
