ubuntu Atom パッケージ同期設定メモ

ubuntu Atom パッケージ同期設定メモ

16.04のインストールを機に
環境の同期や再現をできることを重視して
開発環境を整えることに

まずは Atom エディタの設定の同期
これは
sync-settinパッケージと
Github アカウントを使えば可能

まずは Githubで必要な token の取得

https://github.com/github
にアクセスし
Sign in をして settings をクリック

atom4

次に画面を下へスクロールして

Personal access tokens  をクリック

atom5

次に
Generate new token をクリック

atom5-2

token description には概要を書くので
とりあえず atom sync としておきます

atom6

下へスクロールし
gist だけチェックをいれて
generate token をクリック

atom7

これで token が発行されます

次に Gist をクリック

atom8

gist description には概要なので
今回は Atom Sync
ファイル名には atom
本文にはダミー文字をいれるので
今回は crate gist としました

これで Create secret gist をクリック

atom10

これで作成されます
Gist の ID は URL のユーザ名の後の部分になります

atom11

これで
必要なtoken がそろったので
Atom を起動し
ctrl + , を押すと設定画面がでるので

install で sync-setting パッケージを検索し
install をクリック

atom2

インストール後に
設定のためのメッセージがでるので
Package settings をクリック
atom3

これで
Personal Access Token
Gist id

取得した token をいれればOK

atom12

バックアップを行うには
ctrl + shift + p で
コマンドパレットを起動し
sync setting: backup
を実行

成功すれば Atom 右上にメッセージがでます

次に別のマシンでのレストア

バックアップした端末と同じように
Atom のインストールをして
sync-setting パッケージをインストールし
Gist Id
Personal Access token
を入力したら

ctrl + shift + p で
コマンドパレットを起動し
sync setting: backup
を実行すれば
パッケージの同期ができます

Atom エディタの設定

AtomでRailsを爆速開発する環境を作ってみた
を参考に Atom のパッケージを追加

問題は ubuntu 環境でも動くのかどうかということ
まずは検証

terminal-plus があればAtom でターミナルが使えるらしいので実践

パッケージを追加するには
ctrl + , で設定画面を開き、install をクリック
これで
terminal-plus で検索してインストール

Screenshot from 2016-09-01 23:03:18

これで Atom の下のほうにある+アイコンをクリックするとターミナルが使えるようになります

Screenshot from 2016-09-01 23:13:59

Screenshot from 2016-09-01 23:14:21

次に、browser-plus をいれてファイルを保存したら自動反映するように設定
パッケージ検索で
browser-plus 
で検索

Screenshot from 2016-09-01 23:19:21

これで Atom 内で ブラウザ画面をみることが可能に
表示するには ctrl + alt + o で表示

そのままだとファイルを開くけど、
localhost:3000
とかを入力すればアプリ画面の表示が可能に

なお、ファイルの自動リロード設定をするには、イナズマのようなアイコンをクリックすれば設定できます

Screenshot from 2016-09-01 23:27:26

これでほぼ Atom で完結できそうなかんじになってきました

atom で html プレビュー

Atom エディタでコードを書きながら HTML プレビューをみたいので
パッケージを追加します

開発環境は Ubuntu 14.04 になります

まず Atom を起動し
Ctrl + , で設定画面をだします

次に、 install をクリックし、
atom-html-preview
で検索し
インストールをクリックします

atom-html

これで有効化されるので
html コードを書いたら
ctrl + shit + h で画面右側にプレビューを表示できます

atom-prev

もう一度
ctrl + shift + h を押すとプレビューを閉じることができます

最大のメリットはchrome とかで確認するときに
リロードしないと更新されませんが、
このパッケージの場合、コードをリアルタイムで反映してくれるので
HTMLの練習には最適です

このパッケージの詳細については
https://atom.io/packages/atom-html-preview
にかかれています