Keijir Blog

やっぱハワイ行きたいよね

Atom エディターを快適に使う!

冒頭

UnEditor, notepad++, Sublime Text, Atom, Visual Studio Code などテキストエディタ(Windows)を探して彷徨い続けて安定しない。Windowsでは簡単なメモ(議事録)、Diffの確認、たまに軽いプログラムの利用ぐらい。起動が軽くてプロジェクトを意識したつくりが欲しくて自作しようかと思ってるぐらい。

以前ベータ版を試した Atom がそろそろ仕上がってきているみたいなので移行する。

公式サイト

https://atom.io/ ここからDLしてインストール

インストール先(Windows7)

C:\Users\(ユーザー名)\AppData\Local\atom\atom.exe

テーマ設定

Atom > Preferences > setting > Theme
Atom Light」

プラグイン

Atom > Preferences > install > + Install Packages 検索ボックスに「入れたいプラグイン名」を入れてEnter , [Install] ボタンをクリック

AtomのUIを使いやすく

Japanese-menu : メニューの日本語化
advanced-open-file : ファイルを開くを AtomUI で
file-icons : アイコンを見やすく
minimap : 縦スクロールバー横にミニマップ表示
minimap-autohide : ミニマップを自動で隠す
flex-tool-bar : ツールバーをcsonで設定
tool-bar : ツールバー
chary-tree-view : サイドバーのファイルプレビューをオフ

テキストエディタ

auto-encoding : 文字コードの自動判別(これいい!これがあるから移行できる)
show-ideographic-space : 全角スペースの表示
japanese-word-selection: ダブルクリック選択で日本語の単語を意識
Split Diff : Diff
local-history

PJ管理系

project-manager : プロジェクト管理
project-sidebar : プロジェクトのサイドバーを表示
todo-show : todoの管理

プログラム系

atom-beautify : 自動整形
atom-html-preview : HTMLのプレビュー
markdown-preview-plus : マークダウンプレビューをパワーアップ
markdown-scroll-sync : マークダウンプレビューのスクロールを同期(拡張子.mdじゃないと同期しない)

追加機能

tablr : CSVの編集
open-unsupported-files : 別アプリでサポートされていないファイルを開く

設定変更

コア設定

自動アップデートのチェックを外す。

エディタ設定

不可視文字表示へチェックを入れる。
インデントガイドを表示へチェックを入れる。

パッケージの設定

markdown-preview-plus の設定

Break On Single Newline へチェックを入れる。//MarkDown記法の改行は半角スペース2個なので。

open-unsupported-files の設定

Settings > extensions > doc,xls,ppt,docx,xlsx,pptx,pdf,xlsm

tool-bar の設定

Settings > Icon Size > 16px
Keybindings > Enable チェック外す

パッケージの無効化

about を無効化
bookmarks を無効化
git-diff を無効化
go-to-line を無効化
link を無効化
language-gfm を無効化
markdown-preview を無効化
open-on-github を無効化
spell-check を無効化
welcome を無効化
wrap-guide を無効化

ツールバー(toolbar.cson)

iconの名称は下記で確認する。
https://octicons.github.com/
https://glyphsearch.com/

[
    # flex-tool-bar パッケージの設定
    {
        type: "button"
        icon: "ellipsis"
        iconset: ""
        callback: "flex-tool-bar:edit-config-file"
        tooltip: "Edit Tool Bar"
    }
    {
        type: "spacer"
    }
    # project-sidebar パッケージ
    {
        type: "button"
        icon: "list"
        iconset: "fa"
        callback: "project-sidebar:toggle"
        tooltip: "プロジェクトサイドバー"
    }
    # project-manager パッケージ
    {
        type: "button"
        icon: "repo"
        iconset: ""
        callback: "project-manager:list-projects"
        tooltip: "プロジェクトを開く(Alt-Shift-P)"
        style : {color : "purple"}
    }
    # ペイン分割(右)
    {
        type: "button"
        icon: "columns"
        iconset: "fa"
        callback: ["pane:split-right"]
        tooltip: "split-pane"
    }
    {
        type: "spacer"
    }
    # 新しいファイル
    {
        type: "button"
        icon: "document"
        iconset: "ion"
        callback: "application:new-file"
        tooltip: "新しいファイル(Ctrl+N)"
    }
    # advanced-open-file プラグイン
    {
        type: "button"
        icon: "file"
        iconset: "fa"
        callback: "advanced-open-file:toggle"
        tooltip: "ファイルを開く(Ctrl+O)"
    }
    # ファイルの保存
    {
        type: "button"
        icon: "floppy-o"
        iconset: "fa"
        callback: "core:save"
        tooltip: "ファイルの保存(Ctrl+S)"
    }
    {
        type: "spacer"
    }
    # atom-beautify プラグイン
    {
        type: "button"
        icon: "code"
        iconset: "fa"
        callback: "atom-beautify:beautify-editor"
        tooltip: "テキストの整形"
        mode: "atom-text-editor"
        style : {color : "grey"}
    }
    # atom-html-preview プラグイン
    {
        type: "button"
        icon: "globe"
        iconset: ""
        callback: "atom-html-preview:toggle"
        tooltip: "html-preview(Ctrl+Shift+H)"
    }
    # markdown-preview-plus プラグイン
    {
        type: "button"
        icon: "markdown"
        iconset: ""
        callback: "markdown-preview-plus:toggle"
        tooltip: "markdown-preview(Ctrl+Shift+M)"
        disable: "!markdown"
        style : {color : "blue"}
    }
    {
        type: "spacer"
    }
    # Todo-Show プラグイン Find-In-Project
    {
        type: "button"
        icon: "check-square-o"
        iconset: "fa"
        callback: "todo-show:find-in-project"
        tooltip: "todo-show:project"
    }
    # Todo-Show プラグイン Open-files
    {
        type: "button"
        icon: "check"
        iconset: "fa"
        callback: "todo-show:find-in-open-files"
        tooltip: "todo-show:file"
    }
    {
        type: "spacer"
    }
    # 前のタブ
    {
        type: "button"
        icon: "angle-left"
        iconset: "fa"
        callback: "pane:show-previous-item"
        tooltip: "前のタブ(Ctrl+Shift+Tab)"
    }
    # 次のタブ
    {
        type: "button"
        icon: "angle-right"
        iconset: "fa"
        callback: "pane:show-next-item"
        tooltip: "次のタブ(Ctrl+Tab)"
    }
    # browser-plus プラグイン
    {
        type: "button"
        icon: "chrome"
        iconset: "fa"
        callback: "browser-plus:open"
        tooltip: "Browser(Ctrl+Alt+O)"
    }
]

キーバインド(keymap.cson)

参考:AtomのCtrl+Tab(Alt+Tab)の切り替え方法が変更 従来方式に戻すには?
参考:Atom:キーバインドの変更 - Qiita

'body':
# ctrl-tabを通常モードに
  'ctrl-tab ^ctrl': 'unset!'
  'ctrl-tab': 'pane:show-next-item'
  'ctrl-shift-tab ^ctrl': 'unset!'
  'ctrl-shift-tab': 'pane:show-previous-item'
# ctrl-oをacvanced-open-fileへ
  'ctrl-o ^ctrl': 'unset!'
  'ctrl-o': 'advanced-open-file:toggle'
# ctrl-alt-oの競合を解除
'.platform-win32 atom-workspace, .platform-linux atom-workspace':
  'ctrl-alt-o': 'browser-plus:open'

覚えたいショートカット

Ctrl + Shift + P // Atomのメニューを呼び出し
Alt + Shift + P // Project Manager > List Projects
Ctrl + Alt + O → Ctrl + O //advanced-open-fileの呼び出し
Ctrl + Shift + H //atom-html-preview:toggleの呼び出し
Ctrl + Shift + M //markdown-preview-plus:toggleの呼び出し

まだ手を出していないところ

パッケージ

Tree View Finder
Fuzzy Grep

スタイルシート(style.less)

未設定

起動スクリプト(init.coffee)

未設定

複数PCで設定の同期(sync-settings)

未設定

注意事項

Atomのバージョンがいくつもあって混ざった場合には全部消して再インストール。個人設定のフォルダ(.atom)も消す。
Ver1.0が出たのが2015/06/25なのでそれ以降のBlog等の情報を信じる。