Atomエディタがさらに進化。メインエディタ候補筆頭に

使用感と拡張機能の充実ぶりもあって気に入っているBrackets。Adobeとの別仕様での開発から、もともとのオープンソースの単一での開発となりわりと経ちます。
制作経験のスタートがDreamweaverということもあってか、使用感や使いやすさなどについてはどうしてもDreamweaverを意識してしまいます。

エディタというよりもIDE(統合開発環境)なので、他のエディタと比較するのも違うのかもしれないDreamweaver、重いとかいろいろ言われてますが、今でもDreamweaver好きです(笑)

エディタについてはSublime Textを筆頭に主に使用する言語や好みでさまざまエディタがあります。なかでも使用感についてはBracketsが好印象で、手軽な作業などではたまに使用していました。

しかしながら、オープンソースということと随時更新されていることもあるので現時点(2016/01)ではとなりますが、今回のアップデートでなぜかギクシャク感を感じてしまい、あらためて他のエディタを検討してみることに。

Atom

Atom

そんななか、先日の某関係者とお話しをしている際にでたAtomを思い出し、改めてAtomをダウンロード。

正式公開当時に使用してみて、機能的にはなかなか良かったのですが、動作の重さなどまだまだ実制作では気になる点もあるかなあという印象でしたが、そこはGitHub製。その後も存在は気にしていました。

今回改めてAtomを使ってみての感想はびっくり。
以前のモッサリ感はどこへやら、BracketsやSublime Textに負けないぐらいサクサクの動作に。見た目の印象(わりと大事)も、もともとの印象通り洗練されている印象です。

パッケージも豊富で、下記に書いたものをまずはインストール。

UIテーマとシンタックステーマも豊富ですので、Sublime Text同様いろいろと探してみるのも面白いかもしれません。
たまに黒背景にもしますが個人的には白背景が好みなので、UI Theme: one-light-ui, Syntax Theme: octocat-syntaxに。

Bracketsは残しつつ、メインエディタとして使用してみます。

基本設定関連

好みになるかと思いますが、基本的な設定の変更箇所です。
通常、この基本設定で使用されているパッケージについてはデフォルトで入っていると思います。

●ファイルの自動保存
https://atom.io/packages/autosave
Preferences > Packages > autosaveを検索 > Settings→ 下部メニューのSetting→ Enabledをチェック。

●エディタ内の縦線を消す
wrap-guide
Preferences > Packages > wrap-guideを検索 > Settings→ Wrap Guideを無効化(DisableをクリックEnableに)。

●空白系の処理
whitespace
Preferences > Packages > whitespaceを検索 > Settings→ whitespaceを無効化(DisableをクリックEnableに)。
下部メニューの該当箇所のチェックを外す。

  • ・行末の空白を削除する
    Remove Trailing Whitespace のチェックを外す。
  • ・行末の空白を保存時に削除するように設定する。
    Ignore Whitespace Current Lineのチェックを外す。
  • ・atomで最終行を改行させない
    Ensure Single Trailing Newlineのチェックを外す。

スニペットの記述・設定と呼び出し

効率上で欠かせないスニペットの登録ももちろん可能です。

■スニペットの呼び出し
該当のファイルを開き(新規保存)、「opt + shift + s」でスニペットを検索します。

セレクタ(ファイル)名の検索はこちらから。
https://github.com/atom/autocomplete-plus/wiki/Autocomplete-Providers

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
#記述例1(同一ファイルタイプへひとつのスニペットを登録)
#  '.ファイルタイプ':
#    'prefix': 'キー(検索名)'
#    'body': 'スニペット本文 $1($1は展開後にカーソルを置く位置)'
#
#
#記述例2(同一ファイルタイプへひとつの複数行のスニペットを登録)
#  '.ファイルタイプ':
#    'スニペットの名前':
#    'prefix': 'キー(検索名)'
#    'body': """
#    スニペット本文
#    <!doctype html>
#    <html lang="ja">$1
#    """
#
#
#記述例3(複数ファイルタイプへ同一のスニペットを設定)
#  '.text.html.basic, .text.plain':
#    'スニペット名1':
#    'prefix': 'キー(検索名)'
#     'body': 'スニペット本文'
#
#
#記述例4(同一ファイルタイプへ複数のスニペットを設定)
#  '.text.html.basic':
#    'スニペットの名前1':
#    'prefix': 'キー(検索名)'
#    'body': 'スニペット本文'
#    'スニペットの名前2':
#    'prefix': 'キー(検索名)'
#    'body': 'スニペット本文'

おすすめのパッケージ

パッケージの検索はこちらから。
https://atom.io/packages

インストールは「Preference > Setting / install」から。

japanese-menu
日本語化。個人的には現段階では使用してませんが、一応検討ということで。
●Linter
構文チェック。この本体(Linter)をインストールする必要があるのですが探してみても見当たらず、試しに言語用の以下パッケージをインストールしてみると、勝手(自動?)にLinter本体をインストールしてくれました。

color-picker
カラーピッカーを表示させます。
minimap
ミニマップを表示。
wordpress-dictionary
WordPressのスニペット・コードヒント。
atom-beautify
コードフォーマット。
run-in-browser
ブラウザプレビュー。
atom-html-preview
タブでプレビュー。
highlight-selected
同じワードをハイライト表示。
autoclose-html
自動で閉じタグを入力。
autocomplete-paths
autocomplete-plus の拡張。ファイルパスをサジェスト表示。
trailing-spaces
行末の空白をハイライト。
sync-settings
複数のPCやMacでGithubアカウントを使ってパッケージを同期。

change_history