ATOM

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

More than 1 year has passed since last update.

Atomのインストールから各種設定。


Atomについて


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