Visual Studio Code

Visual Studio Codeが快適すぎる

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

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

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

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

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

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

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

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

便利すぎる!

快適!

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

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

参考

proxy環境でnpm実行時エラーの解消

お昼休みも勉強できるようにしたいと思い、プロキシ環境下(Windows 7)で、TypeScriptをインストールしようとしてPowerShellより下記を実行したらエラーとなりました。

npm install -g typescript 

Webで同様事例の対処法を調べて試しましたが、最終的には次でできました。 

npm config set proxy http:ユーザ名:パスワード@プロキシサーバーのアドレス:プロキシサーバーのポート 

npm config set proxy https-proxy:ユーザ名:パスワード@プロキシサーバーのアドレス:プロキシサーバーのポート 

npm config set registry https://registry.npmjs.org/
// "http:"では駄目でした。 

ここで、 ユーザ名、パスワード:Windowsにログインするときのものです。

プロキシサーバーのアドレスは、「***.**.co.jp」です。

プロキシサーバーのポートは、例えば「80」といった番号です。

上記で設定した結果は次で確認できます。

npm -g config list 

色々と試す過程では次のようなエラーを見ました。 

silly install loadCurrentTree 

Not Found: TypeScript@latest 

“ERR! 418 I’m a teapot” 

なお、Windows 7にインストールされていたnpmのバージョンは、6.4.1

Node.jsのバージョンはv10.15.1でした。

参考になった情報

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”というところをクリックします。

参考