読者です 読者をやめる 読者になる 読者になる

びったんびったん

ユーザビリティ・プログラミングについて。

Atom を設定した

f:id:hakomof:20150505135647p:plain

Atom の正式版公開当初にさわって以来ごぶさただったのですが、最近話題をちらちら見るのでさわってみたらよかったので設定した。

Atom は主に CoffeeScript, Stylus, Slim, Markdown, メモを書くのに使うと思う。たまに Python, Ruby も。 Sublime からの乗り換え。

エディタはできるだけカスタマイズしないでデフォルトで使いたい人。

Settings

Settings で一般設定を、Packages でパッケージごとの設定が GUI でできる。

んで下記が GUI が出力したテキスト形式の設定。 CSON って言うらしい。 JSONCoffeeScript 版だそうな、はじめて知った。まあ JSON から徹底的にタイプ量減らしましたみたいな。

GUI じゃないと無理って人も、テキストベースで管理したいって人も配慮しているこのかんじ好きよ。

それで私の Setting がこちら。

"*":
  welcome:
    showOnStartup: false
  editor:
    tabLength: 4
    fontSize: 18
    lineHeight: 1.25
    scrollPastEnd: true
    fontFamily: "'Consolas' 'Meiryo'"
    invisibles: {}
    softWrap: true
  whitespace:
    ignoreWhitespaceOnCurrentLine: false
  "bracket-matcher":
    autocompleteBrackets: false
  "autocomplete-plus": {}
  core: {}

順番に見ていく。

tabLength: 4
どんな言語でもインデントはスペース4つ。らくちん。

fontSize: 18
lineHeight: 1.25
テキトーに自分の Sublime の設定に似せた。

scrollPastEnd: true
最下行以降もスクロールできるので最下行付近も画面中央で見れる。

fontFamily: "'Consolas' 'Meiryo'"
Windows だとおされな Atom の中で MS ゴシック さんがぶいぶいしちゃうのでなんとかする。

f:id:hakomof:20150505135650p:plain

CSS の font-family プロパティに英字フォント、日本語フォントの順に指定すると英字は英字フォント、日本語は日本語フォントで表示されるというテクがある。そこで好みの等幅英字フォント、好みの日本語フォントの順にクォーテーションで囲んで指定する。この場合、( CSS font-family なら)囲まなくても動くと思うんだけど囲まないとなぜか動かない。

エディタのカスタマイズってエディタ固有の知識が多すぎて闇が深いなあと思っていたので、ブラウザベースの Atom なら闇を晴らしてくれるかと少し期待してみたけどだめだったよ。。。

softWrap: true
折り返す。

whitespace: ignoreWhitespaceOnCurrentLine: false
デフォルトでは保存時に行末のスペースを削除してくれるんだけどカーソル行のスペースは削除しない。おそらく、保存してから入力しようと思ったらスペースが削除されてスペースを打ち直すっていうのをなくす配慮だろうけど、行末にスペースを残しかねないので無効。

"bracket-matcher": autocompleteBrackets: false
( を入力したら ) を補完する。あらゆるエディタ・ IDE についてるけど邪魔だと思ったことこそあれ、便利だと思ったことはない。無効。

Your Keymap

ショートカットキーを変えられます。デフォルトが使いやすいのであまり変えていません。

'.platform-win32 atom-text-editor, .platform-linux atom-text-editor':
    'f4': 'find-and-replace:replace-next'
    'shift-f4': 'find-and-replace:replace-all'

置換を F4 に割り当てています。これは置換する、これはしない、これはする・・・とスッスッスーとやりたい。 F3 のスキップとあわせてできるようになります。 ctrl-enter で replace-all できるのですが、エディタ外の特殊なキーバインドのせいで ctrl-enter が押せないので割り当てています。

Your Stylesheet

Atom はブラウザベースなので外観を Stylesheet で記述する。ようするに、タグやクラス名とセレクターで要素を限定し、 CSS プロパティで色などを指定する。んで AtomCSS の代替 LESS で記述する。いやあ Stylus 使いにはつらいぜ。

それで私の Stylesheet がこちら。

.tree-view {
    font-family: Meiryo;
}

atom-text-editor.is-focused::shadow .cursors .cursor {
    opacity: 1;
}

atom-text-editor::shadow .lines .line.cursor-line {
    background-color: transparent;
}

順番に見ていく。


上述の記述だけでは MS ゴシック を根絶やすには不完全だったようで Tree View からこんにちは。

f:id:hakomof:20150505135649p:plain

Tree View は等幅でなくてよいので Meiryo のみ指定。

.tree-view {
    font-family: Meiryo;
}

それでもまだ Markdown Preview でこんにちはするし、他にもこんにちはするかもしれない。あとで直そう。。。


atom-text-editor.is-focused::shadow .cursors .cursor {
    opacity: 1;
}

カーソルの点滅をなくす。
Blinking Cursor - Atom Discussion
URL 先を参考に改変。


atom-text-editor::shadow .lines .line.cursor-line {
    background-color: transparent;
}

カーソル行のハイライトをなくす。
Where is the active line background color? - Atom Discussion
URL 先をコピペ。


カーソルの点滅とかカーソル行のハイライトって、カーソルを見失ったときに探しやすくするためですよね。カーソルが見つかっているのであれば、入力行に色がついて見づらいだけやし、周辺視野でチッカチッカする害悪だと思うんですよ。なので消します。

見失ったときは上キー押して下キー押せばカーソルが動いてすぐ見つかるので十分です。

Packages

あとから入れたパッケージ。設定も一通り見たがすべてデフォルト。

autocomplete-plus
デフォルトだと ctrl-space しないと補完候補がポップアップしないが、キー入力と同時にポップアップする。

autocomplete-snippets
補完候補にスニペットを含める。

japanese-wrap
日本語の折り返しを修正する。 Core Settings の Soft Wrap を有効にする必要がある。

language-slim
HTML の代替 Slim のシンタックスハイライトなど。

これとほぼ同じダウンロード数のパッケージに ruby-slim があったが ruby まわりでエラーを吐いた。 Slim のコンパイルは Node.js + gulp.js でやっていて Atom ではやらないので language-slim を採用した。

sort-lines
CSS のプロパティのような順番が(ほぼ)何でもよいときに、わかりやすい順番を考える時間が無駄なので無思考にソートする用。

Stylus
CSS の代替 Stylus のシンタックスハイライトなど。セレクター行で改行してもインデントしないのが Sublime に比べて使いづらい。

カスタマイズする上で役に立ちそうなもの

ctrl-,
Settings をすばやく開く。

alt-ctrl-i
Google Chrome でおなじみ Developer Tools を開く。

f:id:hakomof:20150505135652p:plain

ctrl-shift-p
Command Palette を開く。すべてのコマンドを検索・実行できる。

ctrl-.
Keybinding Resolver を開く。開いた状態でキーを押すと、実行されたコマンドとコンテキストが表示される。

Command Palette と Keybinding Resolver を使うとショートカットキーの設定がはかどるかもしれない。

Menu -> Packages -> Timecop -> Show
起動にかかった時間が表示される。重いパッケージを無効化するときなどに。

Packages の各言語には Setting ボタンがないがクリックすると設定できる。戻る欲しい。

以上です。おつかれさまでした。