Visual Studio Code

Visual Studio Codeが快適すぎる

今夜は、少し勉強したJavaScriptの知識を定着させるために、ちょっとしたアウトプットの日としました。

やったことは、こちらの私の普段の仕事を少し楽にするために、フルに活用しているページに、使い方の説明を折り畳めるようにしてみました。

使い方の説明が折り畳まれた状態
使い方の説明が折り畳まれた状態
使い方の説明が展開された状態
使い方の説明が展開された状態

この三角のボタンはCSSだけで作成しました。

この作業をするのにまず実験し、うまくいったものをコピペです。

その再にフォルダーを複数開ければよいのにと思ったら
[ファイル] – [フォルダをワークスペースに追加…] で、できるのですね!

また気がついちゃったのですが、Visual Studio Codeの左に表示されているエクスプローラーに、新しくcssファイルとjsファイルを追加したのですが、Gitが追跡対象外というメッセージや「U」(Untracked)の表示がされちゃっているじゃないですか。

想像通りに、Visual Studio Codeから変更のステージングとかできるようです。

便利すぎる!

快適!

これでJavaScriptからTypeScriptにすれば、もっとばりばりコーディングできちゃいそうです!

ただし、Live Server はワークスペースで同時に一つしか動かせないようです。

参考

Live Serverに関わるVisual Studio Codeの拡張機能と自動保存の設定

Live Serverはちょっと便利

今日は、マナブさんのブログ記事「【保存版】プログラミング基礎の完全ロードマップ【挫折しない教材】」で紹介されていた Google ChromeDeveloper Tool に関する数々の動画を見ました。

その動画の一つで、Live Server というのが、ついでにちらっと紹介されていました。

Developer Tool が神ツールなのに対し、Live Server も地味に便利だったので紹介します。

ドットインストールなどでHTMLやCSSを習い始めて直ぐに覚えるやり方として、次の操作の繰り返しがあります。

  1. エディタでHTML及び/又はCSSを(新規作成して、あるいは保存済のものを)開いておく
  2. ブラウザでHTMLを開いておく
  3. エディタ でHTML及び/又はCSSを編集する
  4. エディタで HTML及び/又はCSSを保存(Ctrl + S)する
  5. ブラウザでHTMLをリロード(Ctrl + R)する
  6. ブラウザの表示内容を確認する
  7. 3に戻る

上記3,4,5のうち、4と5を省略し、次のようになります。

便利ですね。

  1. エディタでHTML及び/又はCSSを(新規作成して、あるいは保存済のものを)開いておく
  2. エディタのエクスプローラから開きたいファイルを右クリックメニューの[Open with Live Server]で開いておく。
  3. エディタ でHTML及び/又はCSSを編集する
  4. ブラウザの表示内容を確認する
  5. 3に戻る
Live Server のWebページにあるデモです

このデモを見ていると、保存さえしていないように見えますが、私の Visual Studio Code の初期設定ではファイルの保存を省略できませんでした。

Visual Studio Code を自動保存の設定(Auto Save)に変更することにより、エディタの保存操作とブラウザのリロード操作の両方が省略できるようになりました。

Live Serverに関わるVisual Studio Codeの拡張機能と自動保存の設定
Live Serverに関わるVisual Studio Codeの拡張機能と自動保存の設定

Live Serverは、Visual Studio Code だけでなく、Atom EditorSublime Textでも利用できるようです。

なお、自動リロード機能を停止するには、上の図の下に表示されている“Port:5500”というところをクリックします。

参考

Emmet

Emmetを使い始めてみた

まなぶさんの学習コミュニティに参加しているのですが、ブラインドタッチするよりEmmet使うのがよいみたいな話がありました。

なんだろうと思い早速使ってみました。以下が参考になりました。

Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫|WEB EGG

今、HTMLとCSSを基礎から丹念に勉強中ですが、正直面倒くさいと思っています。

HTML文書自体は大昔から、HTMLエディタとか、1年前からはWordPressでビジュアル編集しています。

タグをいちいち覚えてタイプするなんてというのが正直なところです。

ところが、Emmetはそれをすごく楽にしてくれるのですね。

例えば、以下のようにタイプすると・・・

ol>li*5>a

これが次になっちゃいます。

    <ol>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ol>

まあ、タイプ量は少ないけど、これも一種の暗号かよと思わなくもないです。

でも、ドットインストールで勉強中に・・・

<p><a href="#top">TOPへ</a></p> 

のようにタイプするところで、直感で p>a と三文字タイプしてみたら、見事に次がでました。

 <p><a href=""></a></p> 

慣れればどんどん便利になりそうです。

ドットインストールにもEmmet入門があるのですね。勉強してみたいと思います。