LoginSignup
6
7

More than 5 years have passed since last update.

@nanoco

備忘録：Atom

Last updated at Posted at 2015-07-03

Atomの設定とかまったりのんびりまとめる

  • Windows 7
    • 2015-07-03：v1.0.1 をインストール
    • 2015-11-12：v1.1.0 にアップデート

GitHub製テキストエディタ：Atom
* Atomは Chromium1 で作られている
* 見た目はスタイルシート（LESS2）で変更可能

コマンド

  • Ctrl + Shift + P で「コマンドパレット」が表示される
  • キーバインド操作と同様のことをコマンドパレットからの入力でも操作可能
  • 大抵のコマンドはキーバインド項目にある各表の「Command」欄に記載する
コマンド 内容
setting 設定画面を開く

キーバインド

※Command欄は「コマンドパレット（Ctrl + Shift + P）」に入力するコマンド内容

分類 内容 Windows7 Mac Command
表示 コマンドパレットを表示 Ctrl + Shift + P Cmd + Shift + P command palette:toggle
表示 設定画面を開く Ctrl + ,（カンマ） Cmd + , 以下、どれでも開いた
1) setting
2) application:show settings
3) settings view: Open
表示 エディタ側とツリー・ビュー側とでフォーカスを切り替える Alt + \ Option + \ ...
表示 Markdownのプレビューを表示 Ctrl + Shift + M Cmd + Shift + M markdown preview:toggle
表示 デベロッパーツールを表示 Alt + Ctrl + I Option + Cmd + I ...
ツリー プロジェクトディレクトリを追加 Alt + Ctrl + O ... ...
ツリー ツリー・ビューを開く／閉じる Ctrl + \ Cmd + ¥ ...
編集 ファイルのフルパスをコピーする Ctrl + Shift + C ... ...
編集 コメントイン・アウト Ctrl + / Cmd + / ...
編集 指定行に移動 Ctrl + G Cmd + G ...
編集 表示フォントの大きさをリセット Ctrl + 0（ゼロ） Cmd + 0 ...

ペイン操作

内容 Windows7 Mac Command
ペインを閉じる Ctrl + Shift + C ... pane: close
上にスプリット Ctrl + K Up（↑） Cmd + k Up pane:split up
下にスプリット Ctrl + K Down（↓） Cmd + k Down pane:split down
右にスプリット Ctrl + K Right（→） Cmd + k Right pane:split right
左にスプリット Ctrl + K Left（←） Cmd + k Left pane:split left
次のペインに移動 Ctrl + K, Ctrl + N Cmd + K, Cmd + N window:focus next pane
前のペインに移動 Ctrl + K, Ctrl + P Cmd + K, Cmd + P window:focus previous pane
上のペインに移動 Ctrl + K, Ctrl + Up（↑） Cmd + K, Cmd + Up window:focus pane above
下のペインに移動 Ctrl + K, Ctrl + Down（↓） Cmd + K, Cmd + Down window:focus pane below
右のペインに移動 Ctrl + K, Ctrl + Right（→） Cmd + K, Cmd + Right window:focus pane on left
左のペインに移動 Ctrl + K, Ctrl + Left（←） Cmd + K, Cmd + Left window:focus pane on right

Core Packages

1. Whitespace

空白、空行関連

Confirmation version.1.1.0 / win7

  1. メニューの「File > Settings（Ctrl + ,（Comma））」で設定画面を開く
  2. Packages > Installed Packages に「Whitespace」と入力しパッケージを検索
  3. Packages > Core Packages に表示されるパッケージ「Whitespace」の「Settings」を押下

1-0. 設定内容

No 表示項目 機能 Default 個人設定
1 Ensure Single Trailing Newline 文末の余分な空行を自動削除
末尾が改行で終わっていない場合は改行を追加		 ON OFF
2 Ignore Whitespace On Current Line カーソル行の空白は削除しない ON ON
3 Ignore Whitespace Only Lines 空行の空白は削除しない ON ON
4 Keep Markdown Line Break Whitespace ... ON/OFF ON
5 Remove Trailing Whitespace 行末の空白を自動削除 ON ON

1-1. 文末の余分な空行を自動削除させない

※No.1「Ensure Single Trailing Newline」に対する設定

Atomエディタには文末に余分な空行があった場合3に自動で削除される仕様になっているらしいのだが、ぶっちゃけこれいらないのでその機能をきる。

この機能を実現しているのが Core Packages としてインストールされている「Whitespace」らしく、その設定を変更することで自動削除を無効化することができる。

Confirmation version.1.1.0 / win7

  1. メニューの「File > Settings（Ctrl + ,（Comma））」で設定画面を開く
  2. Packages > Installed Packages に「Whitespace」と入力しパッケージを検索
  3. Packages > Core Packages に表示されるパッケージ「Whitespace」の「Settings」を押下
  4. Whitespace > Settings にある「Ensure Single Trailing Newline」のチェックを外す

1-2. 文末の余分な空白を自動削除させない

※No.5「Remove Trailing Whitespace」に対する設定

Confirmation version.1.1.0 / win7

  1. メニューの「File > Settings（Ctrl + ,（Comma））」で設定画面を開く
  2. Packages > Installed Packages に「Whitespace」と入力しパッケージを検索
  3. Packages > Core Packages に表示されるパッケージ「Whitespace」の「Settings」を押下
  4. Whitespace > Settings にある「Remove Trailing Whitespace」のチェックを外す

2. markdown-preview

Markdown形式ファイルのPreview機能

Confirmation version.1.1.0 / win7

  1. メニューの「File > Settings（Ctrl + ,（Comma））」で設定画面を開く
  2. Packages > Installed Packages に「markdown-preview」と入力しパッケージを検索
  3. Packages > Core Packages に表示されるパッケージ「markdown-preview」の「Settings」を押下

2-0. 設定内容

No 大項目 表示項目 機能 Default 個人設定
1 Settings Break On Single Newline ... OFF OFF
2 Settings Live Update ... ON ON
3 Settings Open Preview In Split Pane プレビューを分割画面で開く ON ON
4 Settings Use GitHub.com style GitHub.comスタイルを使用 OFF OFF
5 Keybindings Enamle ... ON ON
6 Customize Use GitHub.com style GitHub.comスタイルを使用 ON OFF

2-1. プレビューのフォントを変更

プレビューで表示される漢字が日本語っぽくないので変更する。

Confirmation version.1.1.0 / win7

  1. 「Style.less」を開く
    • パターン１
      1. メニューの「File > Settings（Ctrl + ,（Comma））」で設定画面を開く
      2. Themes > Choose a Theme に「(?マークのアイコン)You can also style Atom by editing your stylesheet」という一文があるので、その文のリンク文字になっている「your stylesheet」を押下
      3. 「Style.less」がAtom上に開かれる
    • パターン２
      1. メニューの「File > Open Your Stylesheet」で「Style.less」を開く
  2. 下記内容を追記する
@fontfamily:  'Migu 1M','メイリオ','Arial';
.markdown-preview.markdown-preview {
  font-family: @fontfamily;
}

※@fontfamily は日本語が扱えるものならなんでも良い。

3. tabs

タブを開く際の挙動設定

Confirmation version.1.1.0 / win7

  1. メニューの「File > Settings（Ctrl + ,（Comma））」で設定画面を開く
  2. Packages > Installed Packages に「tabs」と入力しパッケージを検索
  3. Packages > Core Packages に表示されるパッケージ「tabs」の「Settings」を押下

3-0. 設定内容

No 表示項目 機能 Default 個人設定 備考
1 Always Show Tab Bar 常にタブバーを表示 ON ON ...
2 Enable VCS Coloring VCSカラーリングを有効にする OFF OFF ...
3 Show Icons アイコン表示 ON ON ...
4 Tab Scrolling タブのスクロール OFF OFF ...
5 Use Preview Tabs プレビュータブの使用 OFF ON ［ON］ダブルクリックしているか、その内容が変更されている場合は別のタブで表示される。

Install Packages

1. sync-settings

Confirmation version.1.1.0 / win7

Atomの設定他、下記内容をGithubと同期する。
* Atomの設定
* キーマップ
* ユーザースタイル
* initスクリプト
* スニペット
* インストールされたパッケージ

GitHub のアカウント必須。

＜ Update History＞

日付 Version 備考
2015-11-12 0.6.0 インストール

2. file-icons

Confirmation version.1.1.0 / win7

拡張子に応じてファイルのアイコンを変更してくれる。

＜Update History＞

日付 Version 備考
2015-11-13 1.6.11 インストール
2015-11-20 1.6.12 ...

入れて試してみたい Package

linter

  • 静的コード解析パッケージ
  • これ単体では何もしない。各言語用の linter パッケージを入れる必要がある。

script

  • 開いてるファイルや選択したコードを実行し、結果を表示してくれるらしい

term2

  • ターミナルをAtomのタブで開ける
  • シェルの設定とか環境変数は引き継いでくれるらしい

  1. Chromium - Wikipedia ↩

  2. LESS - Wikipedia ↩

  3. 正確には空行が２行以上あった場合、１行を残して他空行が削除される ↩

6
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
6
7