ATOMをMacにインストールしてやったこと
Sublimeより好きかも。
ちなみに、バージョンは0.175.0
での話です。
ATOMとは
Github製の、無料、のテキストエディタ。 プラグインを入れて機能を追加したり、CSSで見た目を変えたり、カスタマイズ性が高い。
フォントの変更
Ricty Diminishedを使うので、Setting → Font Familyへフォント名を書く。
パッケージのインストール
まずは、いくつか便利そうなパッケージを入れました。
プラグインは、Setting
→Install
から検索したり、apm install [package]
とコマンドラインで実行することで入れることができます。
- atom-beautify
コードを綺麗に整える - atom-terminal
ターミナルで現在のファイルのディレクトリを開く - autocomplete-plus
入力候補が表示されるように - autocomplete-snippets
入力候補にスニペットが表示されるように - emmet
HTMLやCSSを短縮記法で書けるように - file-icons
サイドバーのファイルに分かりやすいアイコンをつける - gist-it
現在のファイルか選択部分をgistへ投稿できる - jumpy
ab
,fd
みたいな文字列が表示されて入力した場所へカーソルが移動する
リンク先のGif画像を見ると分かりやすい - language-scala
Scalaのシンタックスハイライト - markdown-pdf
MarkdownをPDFファイルに変換 - pdf-view
ATOMでPDFファイルを見れるように - preview
コンパイル後の結果などを表示
例えば、CoffeeScriptだとJavascriptが右ペインへ表示 - project-manager
プロジェクトの管理 - recent-files
Menu
→File
→Recemt
に最近開いたディレクトリが表示される - script
CoffeeScriptなどをその場で実行できる。けどMacだとエラーで動かない(泣 - stylus
Stylusのシンタックスハイライト - vim-mode
ATOMをvimと同じように操作できるように
キーバインドのカスタマイズ
プラグインを入れたことで、被ってしまったキーバインドを解決していきます。(使うやつだけ)
あと、自分好みのキーバインドを設定。
設定は、~/.atom/keymap.csonに書いていきます。
'atom-text-editor': 'f2': 'unset!' 'ctrl-f2': 'unset!' 'shift-f2': 'unset!' 'ctrl-alt-b': 'unset!' 'ctrl-cmd-enter': 'bookmarks:toggle-bookmark' 'ctrl-cmd-p': 'bookmarks:jump-to-previous-bookmark' 'ctrl-cmd-n': 'bookmarks:jump-to-next-bookmark' 'ctrl-r': 'bookmarks:view-all' 'atom-text-editor.vim-mode.command-mode': 'ctrl-r': 'bookmarks:view-all' '.platform-darwin': 'ctrl-cmd-0': 'project-manager:toggle' 'atom-text-editor:not([mini])': 'ctrl-e': 'editor:move-to-end-of-line' 'ctrl-cmd-b': 'editor:move-to-beginning-of-word' 'ctrl-cmd-f': 'editor:move-to-end-of-word' 'atom-text-editor.vim-mode.command-mode': '" b': 'beautify:beautify-editor' '" g s': 'gist-it:gist-selection' '" g f': 'gist-it:gist-current-file' '" m c': 'markdown-pdf:convert' '" m p': 'markdown-preview:toggle' '" p': 'preview:toggle' '" r': 'script:run' '" t': 'atom-terminal:open' 'atom-text-editor[data-grammar~="html"]:not([mini]), atom-text-editor[data-grammar~="css"]:not([mini]), atom-text-editor[data-grammar~="sass"]:not([mini]), atom-text-editor[data-grammar~="less"]:not([mini]), atom-text-editor[data-grammar~="stylus"]:not([mini])': 'tab': 'emmet:expand-abbreviation-with-tab' '.platform-darwin .workspace': 'ctrl-cmd-z': 'unset!' 'ctrl-shift-cmd-F': 'unset!' '.platform-darwin atom-text-editor': 'shift-cmd-f2': 'unset!' 'ctrl-cmd-z': 'unset!' 'ctrl-shift-cmd-F': 'unset!' 'cmd-f2': 'unset!' 'shift-cmd-f2': 'unset!' 'atom-workspace, atom-workspace atom-text-editor': 'ctrl-shift-M': 'unset!' '.platform-darwin atom-text-editor:not([mini])': 'ctrl-d': 'unset!' '.editor:not(.mini)': 'alt-cmd-g': 'unset!' 'alt-shift-cmd-G': 'unset!'
よく使うキーバインド
キーバインドを設定した上でよく使うキーバインドを挙げてみる。
(簡単なやつは面倒くさくなったので除く。)
Key | Command |
---|---|
ctrl-p |
上へ |
ctrl-n |
下へ |
ctrl-f |
前へ |
ctrl-b |
後へ |
ctrl-cmd-f |
次の単語の先頭へ |
ctrl-cmd-b |
前の単語の先頭へ |
ctrl-w |
後ろに1単語分削除 |
ctrl-a |
行の先頭へ |
ctrl-e |
行の最後へ |
ctrl-d |
Back Space |
ctrl-h |
Delete |
ctrl-f |
検索 |
ctrl-0 |
サイドバーにフォーカス |
ctrl-r |
ブックマークした行一覧を表示 |
ctrl-cmd-enter |
ブックマークon,off |
ctrl-cmd-p |
前のブックマーク行へ |
ctrl-cmd-n |
次のブックマーク行へ |
shift-cmd-p |
コマンドパレットを表示 |
shift-cmd-f |
プロジェクトのファイルから特定の文字列を検索/置換/開く |
cmd-f |
ファイルから特定の文字列を検索/置換 |
cmd-t |
ファイル名を検索して開く |
cmd-b |
タブバーからファイルを検索・表示 |
cmd-d |
同じ文字列を選択していく |
cmd-u |
cmd-d のやり直し |
ctrl-cmd-g |
同じ文字列をすべて選択状態に |
cmd-j |
下の行と結合 |
cmd-t |
サイドバーのファイルを検索・表示 |
cmd-[ |
インデント |
cmd-] |
アウトデント |
cmd-\ |
サイドバー表示・非表示 |
cmd-1 |
1番目のタブを表示 同じように2,3,4,5... |
cmd-k cmd-u |
Upper case |
cmd-k cmd-l |
Lower case |
cmd-k alt-cmd-w |
現在のタブ以外を閉じる |
shift-cmd-d |
行の複製 |
shift-ctrl-l |
言語選択 |
tab |
emmet,autocomplete 確定 |
shift-enter |
jumpy |
ctrl-alt-cmd-l |
リロード |
ctrl-c esc |
Vimモードへ |
v i * |
*で囲まれてる内側を選択 "なら""の内側(Vimモード) |
v a * |
*で囲まれてる範囲を選択 "なら"" (Vimモード) |
" b |
コードを整える(Vimモード) |
" g s |
選択部分をgistへ投稿(Vimモード) |
" g f |
gistへ投稿(Vimモード) |
" m c |
markdownをpdfに変換(Vimモード) |
" m p |
markdownをプレビュー(Vimモード) |
" p |
Coffeescriptなどをプレビュー(Vimモード) |
" r |
コード実行(Vimモード) |
" t |
編集ファイルのディレクトリでターミナルを開く(Vimモード) |
いくつか抜けてるのもあるかもしれない。
そもそも使ったことのないキーバインドも結構まだあったりする。
見た目を少〜しカスタマイズ
タブやサイドバーのファイル名をHoverした時に、文字色を白へ変わるようにしたり、カーソルをポインターにしたり。 あと、タブの最大幅を少し狭くしてみた。
見た目は~/.atom/style.lessへ書いていきます。
.tab-bar .tab { cursor: pointer; max-width: 144px; } .list-tree .list-nested-item:not(.status-ignored) > .list-item, .list-tree li:not(.list-nested-item):not(.status-ignored) { &:hover { color: #fff; cursor: pointer; transition: color 0.1s ease-in; } }
うん、あれこれできて扱いやすいね。
ペインの扱いにも慣れれればもっといいね。