マッハデザインのサイトへようこそ!
Webテクノロジー、アプリ、スマホ、起業などのメモブログ。

VS CodeでWebコーディング環境を作ろう(IIS向け)

VS CodeでWebコーディング環境を作ろう(IIS向け) 2020.10.15 THU

初めに

※IIS Expressのインストールが抜けてましたので、加筆しました。(2020/10/15)
Visual Studioがインストールされている場合はIIS Expressのインストールは不要です。

VS CodeでWebコーディング環境(IIS向け)

VS CodeでWebのコーディング環境を構築する方法です。
IIS上でWeb運用されている方向けです。

IIS Expressをインストール

下記のマイクロソフトのサイトより「インターネット インフォメーション サービス (IIS) 7.5 Express」をダウンロードし、インストールします。
https://www.microsoft.com/ja-jp/download/details.aspx?id=1038

Visual Studio Codeをインストール

続いてVS Codeをダウンロードし、日本語化します。
下記サイトよりダウンロード。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
拡張機能は左側のメニューの■のようなアイコンより行えます。
■をクリックし検索し、インストールしてください。
VS Code

日本語化の拡張

  • Japanese Language Pack for Visual Studio Code

必要な拡張機能

IIS Expressがないと始まりませんので、インストールします。

IIS Expressの拡張の設定

  1. Codeを開き[Ctrl]+[Shift]+[P]を押し、IIS Express: Open Settingとタイプし、エンターを押します。
  2. Appcmd Pathの下のsetting.jsonで編集をクリック

下記のようにIIS Expressをインストールしたパスが間違いないか確認します。 初期値がC:\\Program Files\\IIS Express\\iisexpress.exeなのですが、
私の場合はC:\\Program Files (x86)にインストールされていましたので下記の ように書き換えました。

{
    "iisexpress.iisExpressPath": "C:\\Program Files (x86)\\IIS Express\\iisexpress.exe",
    "iisexpress.appcmdPath": "C:\\Program Files (x86)\\IIS Express\\appcmd.exe"
}

CodeでのIIS Expressの起動、停止

アクション ショートカット
IIS スタート 「Ctrl」+「F5」
IIS ストップ 「Shift」+「F5」

またIIS Express executerを入れることにより、ブラウザの指定や現在のファイルのプレビューが可能になります。
Classic ASPも問題なく動きます。

他のおすすめ拡張機能

Sassのコンパイルが出来るようになる拡張です。 インストールするだけです。

C#コードのデバッグやIntelliSense機能が使用できるようになります。
cshtmlでコーディングするうえで必須です。

昔からのシステムなどで「Classic ASP」を使用している場合、この拡張をいれましょう。

非常に簡単にIIS向けの開発環境が構築できます。
素晴らしいです。