Visual Studio Code(VS Code)のインストール方法と使ってみた評価 ホームページ制作 | 墨田区

Visual Studio Code(VS Code)のインストール方法と使ってみた評価

LINEで送る
Pocket

Visual Studio Codeのインストール方法と使い方を紹介します。
Visual Studio Codeのインストール方法と使ってみた評価

Visual Studio Code とは、Microsoft が開発したオープンソースのテキストエディタのことです。略称で VSCode と呼ばれています。

Visual Studio の名前がついていますが、これまでの Visual Studio とは違い、統合開発環境といったイメージはありません。シンプルで軽いエディタに、自分に必要なプラグインを追加インストールすることで機能拡張ができます。

これまで HTML/CSS/JavaScript のエディタとしては Brackets を使ってきました。
Brackets(ブラケッツ)のインストール方法と使ってみた評価

ただ、それ以前に「Microsoft Expression Web 4」というツールを使っていたのと、最近の Microsoft がイケているという経緯から、VSCode はずっと気になっていました。気が付けばベータ版じゃなくなっていたので、そろそろ検証時期なのかなっと・・・。
※以前 Visual Studio Code Preview 版の評価をしました。

ここでは Visual Studio Code のインストール方法と使い方・評価 を掲載しておきます。
※あくまで個人的な評価ですのでご了承ください。




【PR】マジか?!「アレ」してるLINEスタンプっていったい・・・


VSCodeのダウンロード

VSCode は、こちらのサイトダウンロードできます。
Visual Studio Code – Code Editing. Redefined

Windows、MacOS、Linux にインストールすることができます。
Visual Studio Codeのダウンロード

VSCodeのインストール

ダウンロードしたファイルを実行します。ここでは Windows7 に VSCode 1.14.1 をインストールします。

「次へ」ボタンを押下します。
VS Code インストール セットアップウィザード

「同意する」を選択して、「次へ」ボタンを押下します。
VS Code インストール セットアップ同意

保存先を選択し、「次へ」ボタンを押下します。
※ここでは C:\Program Files\Microsoft VS Code にインストールします。
VS Code インストール先指定

「次へ」ボタンを押下します。
VS Code インストール プログラムグループの指定

デフォルトでは下図のようになっていますが、必要に応じて追加してください。「デスクトップにアイコンを作成する」くらいにはチェックを入れておいた方がいいかも。選択したら、「次へ」ボタンを押下します。
VS Code インストール 追加タスクの選択

最終確認です。問題なければ、「インストール」ボタンを押下してインストールしましょう。
VS Code インストール準備完了

インストールは2~3分で終わります。
VS Code インストール開始

すぐに起動確認する場合には、「Visual Studio Codeを実行する」にチェックを入れておきましょう。「完了」ボタンを押下すればインストールは完了です。
VS Code インストール完了

おおおー、起動しましたねー^^
VS Code 起動

VSCodeを使ってみる

早速 VSCode を使ってみます。画面周りは、直感でアレコレわかりやすくなっています。この辺りは MS 社ならではですね。

ソース名のタブをドラッグして移動すれば、ソースを横2分割で表示できます。
VS Code ソース2分割表示

右下の「スペース:4」の位置をクリックするとインデントをタブにするかスペースにするか変更できます。ちなみに私は「スペース2」派です。
VS Code インデント指定

VS Code で新規にファイルを作ると、自動で UTF-8 にて保存されます。Shift_JIS などへ変更したい場合には、右下の UTF-8 をクリックすると、変更できます。
VS Code エンコード変更

F12キーで「定義を表示」のショートカットキーがあるのですが(右クリックでも同じ)、CSS へはリンクしてくれませんでした。この辺りは Brackets の方が使い勝手がいいかも。
VS Code 定義を表示

コードの自動保管(Intellisense)も充実していました。デフォルト設定で確認したのは HTML/CSS/JavaScript ですが特に違和感もなく、スラスラとコーディングできました。
VS Code インテリセンスが充実

そのほかの対応言語を確認する場合は、こちらの公式サイトから確認できます。
Language Support in Visual Studio Code

あらかじめ Git がインストールがされていれば、リポジトリに Push、Pull をおこなうことも容易です。
VS Code Git連携

Javascriptのデバッグ

VS Code にはデバッグ機能があります。
使うためには Node.js をインストールしておく必要があります。
Node.js

LTS でも、最新版でも、環境に合わせてどちらかをインストールしてください。
・LTS・・・Long-term Supportの略。長期サポートの安定運用のバージョン。

コマンドプロンプトから node –version でバージョン確認できます。
VS Code Node.jsバージョン確認

「デバッグ」-「構成を開く」で launch.json を開き、下記を追記します。
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceRoot}/デバッグする js ファイル名"
    }
  ]
}

ここでは main.js をデバッグするので、下図のようになります。
VS Code launch.jsonの記述

main.js というファイルを作り、下記のソースを記述します。
var a = 1;
var b = 2;
console.log("a + b = " + parseInt(a + b));
var c = 3;
var d = 4;
console.log("c + d = " + parseInt(c + d));

左メニューの「デバッグ」をクリックし、「デバックの開始」ボタンをクリックします。ブレークポイントを設定すれば、そこで止まってステップ実行もできますし、コンソールにログが出ていることも確認できます。
VS Code Javascriptのデバッグ

VS Codeの機能拡張

VS Code は機能拡張しなくても、インテリセンス(コード補完)、コードフォーマット、スニペットが利用できます。しかし、次のプラグインを導入することで更に便利になります。
プラグイン説明
Live HTML PreviewerHTMLをライブプレビューしてくれる。サイドプレビューモードと、フルプレビューモードがあり、どちらもVSコード内に変更を即座に反映して表示してくれる。
View In BrowserHTMLファイルをブラウザで開く。ライブプレビューはしてくれないが、Ctrl+F1ですぐに開ける。ブラウザ確認を優先するならこっちかな。
Debugger for Chrome Google ChromeでJavaScriptのデバッグができる。

Live HTML Previewer

HTMLをライブプレビューしてくれる Live HTML Previewer の拡張機能をインストールしてみましょう。

拡張機能をクリックして、検索ボックスに「Live HTML Previewer」と入力し、インストールをクリックします。
VS Code プラグインLive HTML Previewerインストール

インストールが終わったら、「再読み込み」をクリックします。
VS Code プラグインインストール再読み込み

サイドプレビューするには “Ctrl+q s” のショートカットキーで右側に表示されます。
For side preview, use the keybinding ‘ctrl+q s’ or press ‘F1’ and type “Show side preview”
VS Code Live HTML Previewerサイドプレビュー

フルプレビューするには “Ctrl+q f” のショートカットキーで最大表示されます。
For full preview, use the keybinding ‘ctrl+q f’ or press ‘F1’ and type “Show full preview”
VS Code Live HTML Previewerフルプレビュー

サイドプレビューでもフルプレビューでも、HTMLファイルを開いている状態でないとプレビューされないようです。
VS Code Live HTML PreviewerプレビューはHTMLを開いている状態のみ

フルプレビューする場合にも、一度サイドプレビューをしてからでないとうまく動かないですね。私だけ?!
VS Code Live HTML Previewerプレビューできない

Debugger for Chrome

この拡張機能をインストールすると、Google Chrome で JavaScript のデバッグができます。さっきは Node.js を使ったデバッグ方法でしたが、ここではブラウザからの JavaScript の動きを検証できるので便利です。

使用するには launch.json を変更します。
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch index.html (disable sourcemaps)",
      "type": "chrome",
      "request": "launch",
      "sourceMaps": false,
      "file": "${workspaceRoot}/index.html"
    }
  ]
}

さっきと同じスクリプトで、同じ場所にブレークポイントを置きますが、Google Chrome が起動して、下図のように止まります。
VS Code Debugger for Chrome Javascriptデバッグ

ふむ、いい感じですね^^

まとめ

Visual Studio Code 結構いい感じですねー。Visual Studio感がまったくないのが特にいい感じです。ネットで検索した感じでは評判も上々ですね。Atomからの乗り換えてるて方が散見されました。これから更にユーザーが増えていきそうですね。

他にも便利な拡張機能があるんでしょうけど、まだわかってません。どなたかオススメがあればコメントいただけると助かります。

おつかれさまでした。

LINEで送る
Pocket

この記事がお役に立ちましたら シェア をお願いいたします。

コメントを残す

コメント(必須)

お名前 (必須)
メールアドレス
(アドレスは公開されません)

Trackback URL