ドットインストール学習にオススメのAtomパッケージ

ドットインストールでプログラミングの学習をされている方は多いのではないでしょうか。私もその一人です。

ドットインストールでは、Atomというエディタが推奨されています。そこで、ドットインストールでの学習が捗っていいな！と思ったパッケージを紹介していきます。

今回は、HTMLとCSS、Bootstrapあたりのものを紹介します。

1. dotinstall-pane

このパッケージでは、ドットインストールの画面をAtom内に表示させることができます。

ブラウザで動画を見ている場合、再生/一時停止や少し巻き戻したいという時にいちいちアプリを切り替えなければならず手間が多いですよね。

このパッケージを利用すると切り替えの必要がなくなるだけでなく、再生/一時停止、また5秒送りと5秒巻き戻しもキーボードショートカットで操作することができます。

キーボードショートカットをまとめます。(Mac)

option+shift-D　パネルの表示/非表示

ctrl-shift-cmd-R　ドットインストール画面のリロード

option+shift-enter　再生/一時停止

option+shift+[　5秒巻き戻し

option+shift+]　5秒先送り

2. atom-html-preview

htmlのプレビューがリアルタイムでできます。ブラウザの更新の手間が省けますし、atom内で表示できるので画面もスッキリ。

ctrl+shift+H　パネルの表示/非表示

3. browser-plus

atom内にブラウザを表示できるパッケージです。

ちょっとした調べ物をするのに便利。

ctrl+option+O　パネルの表示/非表示

4. まとめ

以上のパッケージを全て展開するとこうなります！

左側がdotinstall-pane、上段左がatom-html-preview、上段右がbrowser-plusです。使用しているのはmacbookpro2017の13インチで、ディスプレイの環境設定でスペースを拡大しており、atomは全画面表示にしています。

ドットインストールでの学習にはatom本体と、内容にあったパッケージを探せばなんでも快適に学習できそうですね！

ではまた。