SublimeTextからAtomに乗り換えた時にやった設定とインストールしたパッケージ

最近Atom流行っていますね。
そこで私もSublimeTextからAtomに乗り換えてみました。（完全ではないけど）

SublimeTextからAtomに移行するために行った設定をメモします。

Atom

UI Theme, Syntax

Preferences

key	value
Font Family	Source Code Pro
Font Size	16
Line Hiehgt	1.7
Show Indent Guide	ON
Soft Tabs	ON
Tab Length	2

Packages

Sublime-Style-Column-Selection

SublimeTextと同じように矩形選択ができるようになる。

atom-beautify

コードフォーマット。多彩な言語に対応している。
Sugarのソースは汚いのでこれで一発。

pigments

CSSコード内のカラーコードの背景色をその色で表示してくれる。
地味に便利っす。

atom-color-highlightからpigmentsに変わりました。

autoclose-html

自動で閉じタグを入力してくれる。

autocomplete-paths

次のautocomplete-plusの拡張。
ファイルパスまでサジェスト表示してくれる。

autocomplete-plus

コード補完。言わずもがな。

color-picker

カラーピッカーを表示する。
CSS書いているときに重宝する。

docblockr

メソッドや関数のコメントを自動で入力してくれる。
SublimeTextでも同名のプラグインがあるので使用しています。

file-icons

TreeViewにファイルアイコンを表示する。
視認性って大事。

highlight-selected

ワードを選択すると同じワードをハイライト表示してくれるSublimeTextのアレ。

japanese-wrap

日本語まわり大事。

language-haml

Haml用。

language-smarty-php

Smarty用。

linter

静的コード解析パッケージ。
これ単体では何もしないので、各言語用のlinterパッケージを入れる必要がある。

とりあえず入れてみたのは以下。
jshint、php、ruby、rubocopは必須かな。

linter-csslint
linter-erb
linter-haml
linter-jshint
linter-php
linter-rubocop
linter-ruby

minimap

SublimeTextのミニマップをAtomにも！

project-manager

Atomで複数のプロジェクトを管理できるようになる。
⌘+Ctrl+pで楽々切り替えられる。

tabs-to-spaces

一括でハードタブ<->ソフトタブの変換ができる。
保存時に実行すことも可能。

trailing-spaces

行末の空白をハイライトする。

その他の設定

whitespace

行末の空白を保存時に削除するように設定する。
Ignore Whitespace Current LineをOFFに設定。

言語別設定

基本的にタブはスペース2つだけど、PHPは4つが標準なので設定を行う。
language-phpのsettingsでTab Lengthを4に設定。

Linter設定

静的言語解析のためのエンジンをインストールする。

gem install rubocop
gem install scss-lint
npm install -g csslint
npm install -g jshint

linter-rubocop、linter-scss-lint はパスの設定を忘れずに行うこと。
which rubocopでパスは取得できる。

jshint

JavaScriptの言語特性を活かしたイディオムとかも怒られたりすることがあるのでjshintの設定を行う。適当なエディタで~/.jshintrcを編集する。なければ作る。

{
  "evil": true,
  "regexdash": true,
  "browser": true,
  "wsh": true,
  "trailing": true,
  "sub": true,
  "eqeqeq": true,
  "eqnull": true
}

Windows用設定

Windowsはフォント周りがちょっとアレなので、少しカスタマイズしてやる必要がある。
SettingからOpen ~/.atomして、styles.lessを開く。

そこに以下をコピペ。

// TreeView の日本語をいい感じにする
.tree-view { font-family: "Meiryo UI"; }

// Markdown Preview
.markdown-preview {
  font-family: "Meiryo";
  h1, h2, h3, h4, h5, h6 {
    font-family: "Meiryo";
  }
}

Atomを使ってみて

Sublime Textと比べると動作がちょっともっさり
デフォルトでMarkdownプレビューできるのが良い
Git のステータスによってTreeViewの色が変わるのがよい！
デフォルトでコードジャンプできるようにならんかなぁ

とりあえず公私共にAtomでやってみようと思っております。

rythgs.co