Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
56
Help us understand the problem. What is going on with this article?
@koh110

Atomの導入と利用パッケージのメモ

More than 3 years have passed since last update.

なんとなく面白そうだから使ってみようと思うのと、備忘録にまとめてみる。
リアルタイムでマークダウンのプレビューができるからいいんじゃないだろうか。
コマンドなどの内容はmac用。

ダウンロード
https://atom.io/

初期設定
デフォルトでgoogle analyticsにデータ送ってるのでそれをdisable
https://github.com/atom/metrics

  • 設定窓を開く
cmd-,

cmd-shift-pでコマンドパレットを開いてsettingでもok

  • packagesを選ぶ install packagesを選び、「metrics」と入力 「metrics」のsettingを選んでdisableにする

使い方

IDE的な使い方ができるので、どうやったら効率がいいか試行錯誤中
現在はサーバにatomは入れたくないので、remote-syncでローカルのファイルとサーバのファイルを同期させて、ファイル操作はローカル、実行環境はサーバというような構成を試し中。

  • ローカルにリポジトリを用意
cd [どっかファイルおきたい場所]
git clone [リポジトリ]
cd [リポジトリのディレクトリ]
  • remote-sync用のファイルを用意 vim .remote-sync.json
remote-sync.json
{
  "transport": "scp",
  "hostname": "hogehoge.co.jp", // 転送先サーバ
  "port": 22,
  "username": "koh110", // ssh用のユーザ
  "useAgent": true, // エージェントフォワーディングする
  "target": "/pass/to/hoge", // ここが環境構築したいサーバのファイル転送場所
  "ignore": [
    ".git/**",
    ".remote-sync.json" // remote-sync用のファイルは転送しなくていい
  ]
}

File -> Openでさっきcloneしてきたフォルダをひらく
フォルダ名の上で右クリック -> remote-sync -> Upload Folder でサーバにリポジトリを同期できる
一度やってしまえば、後はエディタの保存時にサーバに勝手にデータをscpしてくれる
ファイルの削除とかがうまく同期できないのはどうしたらいいのだろうか

入れてみたパッケージ

色々とメモがてら感想と記録。試しつつ順次更新。

sublime-style-column
sublime風の矩形選択

minimap
sublime textの右側に出てるやつ

Japanese Wrap
日本語の表示もろもろをよしなにしてくれる

term2
ターミナル用拡張。正直動きが微妙なのと日本語環境ではどうにもならないので今は使いづらい。

remote-edit
リモートのファイルを操作する。開くまでに時間がかかるのと対象サーバでの位置を覚えておく必要があるので常用するのは難しい。

remote-sync
ローカルとサーバの差分をscpでアップロードする。すでにサーバにあるファイルをダウンロードをできる。rsyncとして使えるかと思ったらscpなのでちょっと期待する動作と違った。ローカルのgitブランチを切り替えると切り替わったファイルはアップロードできないので、ローカルのブランチを切り替えまくるとどんどんローカルとサーバのファイルがずれてしまい使いどころが難しい。

atomic-emacs
emacsのキーバインディング再現

vim-mode
vimのキーバインディング再現。atomic-emacsが挙動がバージョンによって怪しすぎて使えなくなってしまったので、vimに戻り中。こうするとinsert modeの時はemacsのctrl-aとかctrl-eが使えるので地味に便利というハイブリットな使い方を試し中。意外とはかどる

web-view
エディタ内でブラウザを開ける。なんかcssとかきかないし、リンクもうまくうごかない。拡張の問題なのかatomの問題なのか

git-log
gitのcommit logとかbranchとかを見やすく表示してくれる

git-plus
ターミナル開かなくても簡単にgitのコマンドをやってくれる。普通に開発してるぶんにはほとんどこれだけですみそう

merge-conflicts
分かりやすくgitのconflictを直せる

linter
いろんな言語のシンタックスエラーとかを表示してくれるらしい。結構あたらし目の構文にも対応してるから入れて損はしないと思う

Compare Files
diffツール。ファイルの差分みたいと思って入れてみた

autocomplete-plus
入力補完を強力にする

file-icons
ファイルの表示アイコンをかっこよくしてくれる

script
ファイル全体か、選んだ行を実行して結果を知れる。結構な言語がサポートされているが使いどころがまだよく分からない。


2/21 追加

project-manager
自分の使っているフォルダを保存できる。atomは前回開いた場所を記憶していてくれないので便利

revent-files
前回開いていたファイルを開ける。入れた理由は同上

regex-railroad-diagram
選択した範囲の正規表現を可視化してくれる。意外と使うかと思ったけどそうでもなかった。ぶっちゃけ可視化されてもあんまりよく分からない


2/23 追加

emmet
tabキーを押すとhtmlタグとかhtmlのtemplateとか色々補完してくれる。

web製作者にはどのエディタでも必須のプラグインらしい


6/2 追加
jshint
javascriptの文法を指摘してくれる


7/28 追加
linter-eslint
jshintからeslintに乗り換えたのでこちらを導入


2016/7/28 追加
atom-beautify
コピペした文字を綺麗に揃えて欲しかったので導入


2017/10/21 追加
autocomplete-modules
requireを補完してくれるやつ

56
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
koh110
JavaScript系エンジニアです

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
56
Help us understand the problem. What is going on with this article?