Atomのインストールから各種設定。
Atomについて
- Atom
- 開発者に特化したテキストエディタ
- GitHub製
- オープンソース
- Sublime Text: The text editor you'll fall in love withに比べ重い
Package
インストール済
- Japanese-menu：メニューを日本語に
- emmet：HTML、CSSの記述・編集を効率的に
- autocomplete-paths：ファイルの参照補完
- autocomplete-js-import：JavaScriptのimport補完。今後使いそうなので
- autocomplete-sass：Sassの構文補完
- autoclose-html：HTMLの構文補完
- Jumpy：ショートカットキーで表示されるアルファベットを打ってジャンプ ※詳細は下記に記載
- react：今後使いそうなので
- jquery-snippets：jQueryの構文補完
- file-icons：ファイルタイプをアイコンできちんと表示
- color-picker：カラーピッカー
- atom-beautify：コードを綺麗に整形
- highlight-selected：選択した箇所をハイライト
- highlight-line：カーソルがいる行をハイライト
- linter：文法チェック
- linter-jscs：JavaScriptの文法チェック
- linter-eslint：ECMAScriptの文法チェック
- open-in-browser：ブラウザで開く
- markdown-preview-plus：Markdownのプレビュー
- markdown-scroll-sync：Markdownのプレビューとコードのスクロールを同期
- show-ideographic-space：全角スペースの表示
- JavaScript Snippets：JavaScriptの入力補完
インストールできなかった
バージョンが変わったらインストールしてみようと思う
- minimap
- minimap-highlight-selected
- minimap-bookmarks
パッケージの一括インストール方法
事前に「Atom > Install Shell Commands」を実行し、Shellをインストールを実行しておく
- 上記のリストをtxtファイルで適当な場所に保存(ここでは「packages.txt」で保存している)
-
その場所でターミナルを開き、以下のコマンドを実行
apm install --packages-file packages.txt
Theme
Sublime Textのカラーリングに似ている、以下テーマをインストールする
- Monokai
他の設定
コードの書体・フォントサイズ・行間
環境設定 > エディタ設定
- 書体：「"Migu 1p"」※ダブルクオーテーションで囲む事
- フォントサイズ：15
- 行間：1.8
サイドバーのフォントサイズ
Atom > スタイルシート
.tree-view {
font-size:14px;
}
縦線を消す
- Packageの「Wrap Guide」を無効に設定
不可視ファイルを消す
.DS_Storeを消す方法
- 環境設定 > Package
- 「tree view」を検索
- 「Hide Ignored Names」にチェックを入れる
※「Show On Right Side」にチェックを入れると、サイドバーが右に移動する
emmetの「!」展開時のja化と不要タグの削除
- Package > emmet > view code
- node_modules > emmet > lib > snippets.jsonを調整
調整箇所 その1
{
"variables": {
"lang": "ja",
"locale": "ja-JP",
"charset": "UTF-8"
},
調整箇所 その2
"doc": "html>(head>meta[charset=${charset}]+meta:vp+meta:edge+title{${1:Document}})+body",
上記を以下に
"doc": "html>(head>meta[charset=${charset}]+title{${1:Document}})+body",
作業がはかどるショートカット
2分割
- cmd+shift+p
- pane入力。候補がリストアップされるので選択・実行
ブラウザで開く(open-in-browser)
- cmd+shift+p
- openを入力。候補がリストアップされるので選択・実行
コードの整形(atom-beautify)
- cmd-shift-p
- beauを入力。候補がリストアップされるので選択・実行
場所に飛ぶ(jumpy)
- shift+enter
タブ操作
- タブの切替：ctrl-tab
- ファイルを閉じる：ctrl-w
ツリー場面で
- ファイルを追加する：a
- フォルダを作成：shift+a
置換
- フォルダ選択 cmd+shift+F
JavaScript入力補完(JavaScript Snippets)
Sublime Textの「JavaScript & NodeJS Snippets」のAtom版
- [cl] console.log
- [gi] getElementById