Atomのカスタマイズ。

テキストエディターのAtomのカスタマイズのメモ。

Atomのコアファイルの場所

「起動ディスク」>「ユーザー」>「ユーザー名」>「ライブラリ」>「Application Support」>「 Atom」

基本設定の変更

ショートカット「command + ,」で設定画面を開く。

Editor Settings

• Fontsize : 12
• Line Hieght : 1.4
• Scroll Past End : オン (最終行を超えてスクロールさせる)
• Show Indent Guide : オン (インデントの視認用のガイド線)
• Soft Wrap : オン (行の右端で折り返し)

Keybindings

一番上にある説明文にある「your keymap file」のリンクを開いてキーバインドを追加・上書き。

• ‘body’: ‘cmd-_’: ‘editor:newline’
  (誤操作多いので上書き対応 : デフォルトはフォントサイズ変更)

Packages

プリインストールされているパッケージの初期設定を変更。

• 最終行の自動改行挿入を停止
  「Whitespace」を検索 > 「Settings」の「Ensure Single Trailing Newline」をオフにする。
• ツリービューで不可視ファイルを非表示
  「tree-view」を検索 > 「Settings」の「Hide Ignored Names」をオンにする。 (「Core」の設定の「Ignored Names」で編集可。)

Packageのインストール方法

1. ショートカット「command + ,」で設定画面を開く。
2. 左カラムのメニューから「Install」を選択。
3. 右カラムで「Packages」か「Themes」を選び、検索ボックスにパッケージ名を入力して検索。
4. 下の検索結果から選択して「Install」。

Themeの追加

UIとSyntaxの色を変更するThemeを、Theme名を指定してインストール。

※ インストールしたら、使用したいThemeを選択して有効化する。

UI Theme

• atom-material-ui
• seti-ui

Syntax Theme

• monokai
• seti-syntax

Packageの追加

• emmet : コーディング省略
• tag : 自動で閉じタグ
• linter : 文法エラーチェッカー (本体)
  linter-htmlhint : html用
  linter-stylelint : css用
  linter-php : PHP用 (ローカルのPHPのパスの設定が必要)
  linter-jshint : javascript用
• minimap : ウィンドウ右側にソース全体の縮小図
• color-picker : カラーピッカーでカラーコード選択
• pigments : カラーコード部分に色
• atom-beautify : 圧縮されているソースコードなどを整形させる
• file-icons : ツリービューやタブにファイルの種類別アイコン表示
• wordcount : ステータスバーに文字数表示など設定できる
• remote-ftp : ftpクライアント

• これさえ入れておけばオッケーなAtomのパッケージ10選
• Atomでエラーチェックをするlinterステータスバーの見方・使い方