Quantcast
Channel: Webツール – WordPress ( ワードプレス ) 復旧サービス ~ WP-Enable
Viewing all articles
Browse latest Browse all 12

Atom 導入で躓かない Git と Package sync の初期設定

$
0
0

Sublime 一筋でしたが最近は Atom ばかり使っています。Atom でないとできないことはそれほどないし、Chromium ベースなので動きはもっさり、特に起動とファイル開いた時の Syntax 当たるまでが遅いですが Chromium ベースなのでカスタマイズしやすくて、結果 まあいいか と。Brackets は多機能すぎるのと Adobe なので警戒しております。
そんなわけで、エディタ導入したら必要になるであろう Git を使った 設定のバックアップと複数マシン間での同期方法をさくっと紹介します。

インストール

Homebrew Cask にありますので

$ brew cask install atom

でいけます。特に何もしなくても

$ atom -v
$ apm -v

でバージョン情報出ると思います。出なければ Atom 起動してメニューバーの Atom->Install Shell Command をクリックしてから再度バージョン情報確認してみましょう。



こんな感じになれば問題無いです。

続いてパッケージを同期するためのパッケージをインストールします。

$ apm install package-sync

パッケージを色々インストールした後に Atom コントロールパネル Cmd + PPackage Sync: Create Package List しますと、~/.atom/packages.cson が生成されます。


Package Sync で使うのはこの3つ。3番めの Create 選んでください。

この中にインストールしてある Package 一覧が書かれているのでこれを git で別マシンとかに持っていて Atom コントロールパネルから Cmd + PPackage Sync: Sync で packages.cson に書かれているパッケージを自動で全てインストールしてくれます。
Sublime に比べて少し手間ですが、導入して安定すればそんなに頻繁にパッケージを同期することも無い筈なのであまり困らないと思います。

バックアップ、複数マシン同期

続いて設定と Package を git 使ってバックアップ、同期取りましょう。
Sublime では ~/Library/Application Support/Sublime Text 3/Packages/User を git 管理下に置いてあとは Package Control がよしなにやってくれました。
Atom の場合は ~/.atom を git 管理下に置きます。.gitignore はこんな感じでよいでしょう。

# Atom
storage
compile-cache
dev
.npm
.node-gyp
.apm
packages

勿論先程でてきた packages.cson もこれで git に含まれますので、楽に共有化できます。
あとは add して commit して push して別マシンとかレストアの時に pull してやれば OK です。
Token とか大事な情報含まれるので、リモートリポジトリがプライベートであることを確認しましょう。

パッケージ紹介

私がインストールしてるパッケージはこんなかんじ。mixup-dark-syntax は私がつくりました、Monokai ベースの Syntax です。是非使ってみてください。$ apm install mixup-dark-syntax で是非に。


  • Sublime-Style-Column-Selection
  • advanced-open-file
  • atom-autocomplete-php
  • atom-beautify
  • atom-jade
  • autocomplete-paths
  • csscomb
  • editorconfig
  • emmet
  • file-icons
  • gist
  • git-history
  • git-log
  • git-plus
  • language-babel
  • merge-conflicts
  • minimap
  • mixup-dark-syntax
  • one-dark-ui-cyan
  • package-sync
  • sort-lines
  • wordpress

  • advanced-open-file
  • editorconfig

の2つは設定に少し癖があるのでおまけで紹介したいと思います。

advanced-open-file

新しいバージョンでは直っているかもわかりませんが、advanced-open-file のリポジトリ では

Hit Cmd-Alt-O/Ctrl-Alt-O to open the file list to the directory of the current file. As you edit the path the file list will automatically show matching files and directories. Hit Tab to autocomplete the path.

Relative paths are considered relative to the current project’s first root folder.

Hit Enter to open the file at the given path. If the file doesn’t exist, a tab will be opened that will save to that file. Any directories in the path that don’t exist will be created immediately upon hitting Enter.

You can also click on any entry in the file list to add it to the current path (in the case of a directory) or to open it immediately (in the case of a file). You can also use the Up and Down arrow keys to scroll through the list, and Enter to select the currently-highlighted item.

とあるのものの、Tab 保管が効かないし、カーソルの ↑↓ で移動ができないかもしれません。デフォルトではこれらのキーがマッピングされていないからです。

Atom のメニューバーから Atom->Open Your Keymap を開き

## Advanced Open File
'.advanced-open-file atom-text-editor':
  'up': 'advanced-open-file:move-cursor-up'
  'down': 'advanced-open-file:move-cursor-down'
  'tab': 'advanced-open-file:autocomplete'

と書くと幸せになれます。

editorconfig

此方も最新のバージョンでは分かりませんが、1.2.2 と atom@1.2.0 とかだと問題が発生しました。Atom のデフォルトの設定を editorconfig が上書きできず、.editorconfig ファイルに書いてある設定が効かなくなるケースがあります。

  • Soft Tabs のチェックを外す
  • Tab Type は Auto に設定する

これで editorconfig とケンカしなくなります。

以上です。ありがとうございました!


Viewing all articles
Browse latest Browse all 12

Trending Articles