2016年11月11日金曜日

SublimeText から Atom に乗り換えた時にお勧めのパッケージ

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 設定

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

1
2
3
4
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 を編集する。なければ作る。

1
2
3
4
5
6
7
8
9
10
{
  "evil": true,
  "regexdash": true,
  "browser": true,
  "wsh": true,
  "trailing": true,
  "sub": true,
  "eqeqeq": true,
  "eqnull": true
}

Windows 用設定

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

そこに以下をコピペ。

1
2
3
4
5
6
7
8
9
10
// 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 でやってみようと思っております。

参考