自分なりにAtomの開発環境を作る＠2016版
自分なりにAtomでVue.jsの環境を整えたので、複数人で開発する場合に布教する用と、備忘録の意味も込めて書く。
他にもいいものがあったら教えてください。
最近はVue.jsを書いているので、Vue.jsに特化しています。
この記事で扱わないこと
- Atomとはなにか
- Atomの使い方(packageやThemeのインストール方法など)
- Vue.js関連のあれこれ
Atomをインストールする
https://atom.io/ からAtomをインストール。
Themeの設定
形から入りたいのでThemeを設定する。
UI Theme
atom-material-uiにした。
(公式より引用)
インストール方法
$ apm install atom-material-ui
その他検討したもの
- Atom Dark(確かデフォルト)
- One Dark
- atom-dark-ui-slim
- slack-ui(そこまでslack使っていなかったので慣れなかった)
検討しなかったもの
- Atom Lightなど、背景色が白いもの全般
(完全に好みだけど)黒いのに慣れているため
Syntax Theme
色々試してみたけど、しっくり来たのがAtom Pandaだったのでこれにした
後述する.vueファイルを開いたときに分かりやすかった（主観）というだけ。
importと変数名(ピンク)が色が近くて見にくい気がしているので、そこだけちょっと気にはなっているけど概ね良い。
あんまり使っている人がいない気もする。
App.vueファイルを開いたときのスクショ
公式ページ?
にはSCSSとかJSX,PHPなどの色味もスクショが貼られているので見るといいかも。
あと超どうでもいい補足として、パンダの説明も書いてあるのがおちゃめ心があって良い。
※公式ページ? から引用
その他検討したもの
たくさん入れてたのでとりあえず一覧で出しておく。
- Atom Dark
- Atom Light
- Atom Material
- Atom Panda
- Base16 Tommorow Dark
- Base16 Tommorow Light
- Kingfisher
- Monokai
- One Dark
- One Light
- Solarized Dark
- Solarized Light
パッケージを入れる
Atomはパッケージで様々な機能を追加できるのがいいですね。
入れすぎると重くなるのが考えどころ…。
追加したパッケージは以下。
- atom-beautify
- コード整形用。GitにPushする前に一応かけているけれど、今のところ一人でオレオレ書いているのでそこまで必要としていない。
- 複数人で開発するときは必須だと思うので一人のうちから慣れておく。
- まだちゃんと試していない -> vue-format
- autocomplete-paths
- めっちゃ便利。パスの補完をしてくれる。
-
color-picker
-
Cmd + shift + cでカラーピッカーを出してくれる。 - こんな感じ↓
- JSを書いていると多用はしないのでだいたいコマンドを忘れる。
- RGB以外にもHEX,HSLなどでも出してくれる(RGBしか使っていないが)
-
-
highlight-selected
- 選択した単語をハイライトしてくれる。コード追いかけるときに多用。
- こんな感じ↓
-
language-vue-component
- .vueファイルもちゃんとシンタックスハイライトしてくれる。
- Vue.jsを使うなら必須。むしろ無いとAtomな意味がない。
- こんなかんじ↓
-
minimap
- 右側に一覧を出してくれるあれ。↑の右側にあるやつ。
-
term3
- ctrl+alt+矢印キーでどこかにtermを出してくれる。
- git hogehoge するときに利用。
- バックグラウンドでgulp + webpackを動かしたいので利用。
- 非エンジニア（主にデザイナー）さんたちに布教するときに別途黒い画面(iTerm etc.)開いて〜というと敷居が高そうなので同じAtom内で完結するようにした。
-
vim-mode
- ファイル編集用。vimに慣れているのでvim-modeにした。
他にも良いパッケージがあったら随時追加します。
※むしろ教えてください