その他

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. Office関連

    オデッセイ コミュニケーションズ主催のWord活用無料セミナーに参加しました。

    Club Microsoft会員限定、オデッセイ コミュニケーションズ…

  2. Windows関連

    PCをクリーンインストールしたので普段使っているツールをまとめてみた。

    Office 2016のリリースに合わせてメインで使っているPCをクリ…

  3. Office関連

    オデッセイ コミュニケーションズ主催のExcel VBA入門セミナーに参加しました。

    今月19日に開催されたオデッセイ コミュニケーションズさん主催の「Ex…

  4. その他

    ブログ引っ越しました。

    今年の2月から無料のWordPress.comでブログを書いていたので…

  5. その他

    信号機ガチャ第2弾コンプしました。

    大人気となった「信号機」ガチャの第2弾(日本信号 続 ミニチュア灯器コ…

  6. その他

    【仮面ライダー】DXオーズタジャドルコンボライドウォッチのために並んできました。

    12月22日から平成仮面ライダー20作記念「仮面ライダー平成ジェネレー…

コメント

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

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

Time limit is exhausted. Please reload CAPTCHA.

Translate

Chinese (Simplified)Chinese (Traditional)EnglishFrenchGermanJapaneseKoreanRussianSpanish

最近の記事

アーカイブ

PAGE TOP