Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
Visual Studio Online “Monaco”入門(5)

Visual Studio Online “Monaco”入門(5)

Visual Studio Online “Monaco”のコードスニペット(Code Snippets)

2013年12月19日

Webブラウザー上で動作する開発環境「Visual Studio Online “Monaco”」のIntelliSenseから利用可能な「コードスニペット」についてまとめる。

デジタルアドバンテージ 一色 政彦
  • このエントリーをはてなブックマークに追加

 第1回では、Visual Studio Online “Monaco”の概要と、Git関連を除く主要機能を説明した。本稿はその付録として、IntelliSenseから利用可能なコードスニペット(2013年12月18日時点)を一覧表にまとめている。

HTML言語のコードで利用可能なコードスニペット

項目名説明スニペット
css スタイルシートへのリンクを挿入
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
html シンプルなHTML5開始ポイント
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
</head>
<body>
</body>
</html>
img 画像
<img src="my_image.png" alt="Image Description" />
js 外部JavaScriptファイルへのリンクを挿入
<script src="main.js"></script>
ol 番号付き項目リスト
<ol class="my_list">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ol>
script 外部JavaScriptファイルへのリンクを挿入
<script src="main.js"></script>
table 基本的な表の開始点
<table class="my_table">
    <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
        <td>Row 1, Column 3</td>
    </tr>
    <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
        <td>Row 2, Column 3</td>
    </tr>
</table>
ul 項目リスト
<ul class="my_list">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>
HTMLコードスニペット

JavaScript/TypeScript言語のコードで利用可能なコードスニペット

項目名説明スニペット
class クラス定義
/**
* name
*/
class name {
    constructor(parameters) {
    }
}
ctor コンストラクター
/**
*
*/
constructor() {
    super();
}
define モジュールを定義
define([
    'require',
    'require'
], function(require, factory) {
    'use strict';
});
dowile Do-While文
do {
} while (condition);
for Forループ
for (var index = 0; index < array.length; index++) {
    var element = array[index];
}
foreach For-Eachループ
array.forEach(function(element) {
}, this);
foreach => =>を使用したFor-Eachループ
array.forEach((element:type) => {
});
forin For-Inループ
for (var key in object) {
    if (object.hasOwnProperty(key)) {
        var element = object[key];
    }
}
function Function文
function name(params) {
}
if If文
if (condition) {
}
ifelse If-Else文
if (condition) {
} else {
}
jsdoc JSDdoc用のコメント
/**
*
*/
log コンソールログ
console.log(message);
new New文
var name = new type(arguments);
private method Privateメソッド定義
private name() {
}
public method Publicメソッド定義
/**
* name
*/
public name() {
}
settimeout タイムアウト設定用の関数
setTimeout(function() {
}, timeout);
reference 他のファイルへの相対参照
/// <reference path="path.ts" />
switch Switch文
switch (key) {
    case value:
        break;

    default:
        break;
}
trycatch Try-Catch文
try {
} catch (error) {
}
while While文
while (condition) {
}
JavaScript/TypeScriptコードスニペット

Visual Basic言語のコードで利用可能なコードスニペット

項目名説明スニペット
for For Nextループ
For index As ObjectType = lower To Upper
Next index
fore For Each...Nextループ
For Each Variable As ObjectType In Collection
Next
fori For i...Next i
For i As Integer = Lower To Upper
Next i
forj For j...Next j
For j As Integer = Lower To Upper
Next j
pf Public Function...
Public Function FunctionName(ParameterList) As ReturnType

    Try
    Catch ex As Exception

    End Try

    Return ReturnValue

End Function
ps Public Sub...
Public Sub ProcedureName(ParameterList)

    Try
    Catch ex As Exception

    End Try

End Sub
while While...End While
While Boolean
End While
Visual Basicコードスニペット

  • 第1回: Visual Studio Online “Monaco”の概要と、Git関連を除く主要機能を説明している。
  • 【前】→ 第4回: “Monaco”のオプション設定ファイル(user.json/team.json)に指定できる全ての設定項目について説明している。
  • 【次はこちら】→ 第6回(近日公開予定): 「開発」→「ソース管理」→「本番公開」をGitでシームレスに行える“Monaco”のGit関連機能と使い方を説明している。
Visual Studio Online “Monaco”入門(5)
1. 開発環境までもWeb化?! Visual Studio Online “Monaco”機能徹底解説(Win&Mac対応)

Visual Studioのオンライン版?! Webブラウザー上で動作する開発環境“Monaco”で開発はどう変わるのか? その全機能をさまざまなブラウザーで徹底的に試してみる。さらにデスクトップアプリ開発も実験してみる。

Visual Studio Online “Monaco”入門(5)
2. Visual Studio Online “Monaco”の全コマンド(Commands)一覧(Win&Mac対応)

Webブラウザー上で動作する開発環境「Visual Studio Online “Monaco”」が提供する「全てのコマンド」と「全ての(Windows向けとMac OS向けの)ショートカットキー」を一覧表にまとめて紹介する。

Visual Studio Online “Monaco”入門(5)
3. Visual Studio Online “Monaco”のコンソール(Console/Terminal)で使える全コマンド一覧

Webブラウザー上で動作する開発環境「Visual Studio Online “Monaco”」が提供する、コンソール用の「全てのコマンド」と「コマンドスニペット」を一覧表にまとめて紹介する。

Visual Studio Online “Monaco”入門(5)
4. Visual Studio Online “Monaco”のオプション設定(user.json/team.json Settings)

Webブラウザー上で動作する開発環境「Visual Studio Online “Monaco”」のオプション設定ファイル(user.json/team.json)に指定できる「全ての設定項目」について説明する。

Visual Studio Online “Monaco”入門(5)
5. 【現在、表示中】≫ Visual Studio Online “Monaco”のコードスニペット(Code Snippets)

Webブラウザー上で動作する開発環境「Visual Studio Online “Monaco”」のIntelliSenseから利用可能な「コードスニペット」についてまとめる。

サイトからのお知らせ

Twitterでつぶやこう!