その他

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. その他

    【サイエンスZERO】P・スワイヤーアイ(マリアナスネイルフィッシュ)特集

    昨年JAMSTECとNHKの研究チームが、マリアナ海溝の水深8,178…

  2. その他

    「駅すぱあとWebサービス API無償提供」を利用してみました。

    経路探索サービスとして有名な株式会社ヴァル研究所の「駅すぱあと」ですが…

  3. その他

    サーバーを移転しました。

    これまで使っていたレンタルサーバー、XREA Plusがあまりに遅いの…

  4. その他

    SharpDevelopのインストールと日本語化

    私のHPでも「SharpDevelopでリボンXMLを編集する」でリボ…

  5. その他

    Accessible Explorerのダウンロード先

    IAccessibleオブジェクトの各種プロパティやオブジェクト間の関…

コメント

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

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

Time limit is exhausted. Please reload CAPTCHA.

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

Translate

最近の記事

アーカイブ

PAGE TOP