その他

Visual Studio CodeでjQueryのコードを書いてみる。

「MS、Win/Linux/Mac対応のコードエディター「Visual Studio Code」をプレビュー公開 – 窓の杜」にある通り、Microsoft製コードエディター「Visual Studio Code」のプレビュー版が公開されたので早速使ってみました。

Visual Studio Codeのインストール

  1. 「Visual Studio Code – Code Editing. Redefined.」からWindows用のインストーラー(VSCodeSetup.exe)をダウンロードします。
  2. VisualStudioCode_jQuery_01

  3. 1.でダウンロードしたインストーラーを実行すると、Visual Studio Codeが自動的にインストールされます。
  4. VisualStudioCode_jQuery_02

    VisualStudioCode_jQuery_03

    VisualStudioCode_jQuery_04

  5. 2015/05/14 時点では下図の言語に対応していて、適当なXMLファイルを開いてみましたが、ちゃんとシンタックスハイライトされました。
  6. VisualStudioCode_jQuery_05

    Language Support in Visual Studio Code より

    VisualStudioCode_jQuery_06

軽く触っただけですが、動作は軽快で「Ctrl + Space」といったお馴染みのショートカットキーも使えるので、VSに慣れている人にとっては親しみやすいエディタだと思います。

また、HTMLやJavaScript等はインテリセンス対応とのことで、同じようにjQueryのコード補完も効けば嬉しいのになー、と思っていたところ、下記の手順でjQueryでもインテリセンスが効くようになりました。

インテリセンスをjQueryでも使えるようにする。

  1. ソースファイルを入れる適当なフォルダ(ここでは sample フォルダ)を作成します。
  2. 「DefinitelyTyped」からjQuery用の型定義ファイル「jquery.d.ts」をダウンロードし、1.で作成したフォルダ内に保存(ここでは sample -> typings -> jquery -> jquery.d.ts)します。
  3. Visual Studio Codeを起動し、「Open Folder」から、1.で作成したフォルダを開きます。
  4. VisualStudioCode_jQuery_07

  5. フォルダ名の横にある「New File」ボタンをクリックして、新規ファイルを作成します。
  6. VisualStudioCode_jQuery_08

  7. referenceディレクティブ(/// <reference path=”…” />)を使って、2.で保存した「jquery.d.ts」ファイルを参照すると、jQueryのコードでもインテリセンスが効くようになります。
  8. VisualStudioCode_jQuery_09

サクサク動いてjQueryのコードも書きやすい。
プレビュー版なので、まだ若干動作が不安定なところがありますが、今後の期待大なエディタです。

参考Webサイト

・Intellisense with Visual Studio Code
http://www.johnpapa.net/intellisense-witha-visual-studio-code/

2015年4月の人気記事前のページ

Office 365 APIをVBAから呼び出す(1)次のページ

関連記事

  1. その他

    2016年ブログ振り返り(前半戦)

    2016年、今年も無事に仕事納め完了。年明けまで会社に行くこともな…

  2. Microsoft Designer

    DALL・E APIで文章から画像を作成してみました。

    画像生成AI「DALL・E」のAPIがパブリックベータ版として一般公開…

  3. その他

    2014年、今年も初心者備忘録をよろしくお願いいたします。

    もう2014年がスタートして一週間になりますが、今年も当「初心者備忘録…

  4. その他

    20年前のパソコン雑誌が出てきたよ。

    家の本棚を整理したら20年ほど前のパソコン雑誌が出てきました。「う…

  5. その他

    Microsoft Speech Platform Version 11が公開されました。

    今月1日、Microsoft Speech Platform Vers…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

Time limit is exhausted. Please reload CAPTCHA.

※本ページはプロモーションが含まれています。

Translate

最近の記事

アーカイブ

PAGE TOP