Atomの環境構築(随時更新予定)

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をインストールを実行しておく

1. 上記のリストをtxtファイルで適当な場所に保存(ここでは「packages.txt」で保存している)

2. その場所でターミナルを開き、以下のコマンドを実行

    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を消す方法

1. 環境設定 > Package
2. 「tree view」を検索
3. 「Hide Ignored Names」にチェックを入れる

※「Show On Right Side」にチェックを入れると、サイドバーが右に移動する

emmetの「!」展開時のja化と不要タグの削除

1. Package > emmet > view code
2. 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分割

1. cmd+shift+p
2. pane入力。候補がリストアップされるので選択・実行

ブラウザで開く(open-in-browser)

1. cmd+shift+p
2. openを入力。候補がリストアップされるので選択・実行

コードの整形(atom-beautify)

1. cmd-shift-p
2. beauを入力。候補がリストアップされるので選択・実行

場所に飛ぶ(jumpy)

1. 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

参考：javascript-snippets