[TL03] あなたはどっち? Visual Studio Code 派と Visual Studio 派による Web フロントエンド開発徹底紹介

• Visual Studio と Visual Studio Code
• Web フロントエンドの開発支援機能
• 標準機能と拡張
• 開発支援機能
アジェンダ

Visual Studio と Visual Studio Code

統合開発環境とエディター
統合開発環境コードエディター
Visual Studio
Visual Studio for Mac
Visual Studio Code
• 動作 : Windows
• 対象 : マルチデバイス/クロス
プラットフォーム/クラウド
• 動作 : Mac OS
• 対象 : モバイル/クラウド/Mac
• 動作 : Windows, Mac, Linux
• 対象 : 対象を問わず(※)開発言語
をするもの (数百の言語に対応)
• 備考 : OSS、無償
(※)コードの実行に必要なコンパイラや
ランタイム、 Web サーバーは別途必要

Web フロントエンドの
開発支援機能

Visual Studio の Web 開発向け拡張(1/2)
Web Essentials
http://vswebessentials.com

Visual Studio の Web 開発向け拡張(2/2)
.ignore NPM Task Runner
Client-Side Library Installer
Dummy Text Generator
Trailing Whitespace Visualizer
Open in Visual Studio Code

Visual Studio Code の Web 開発向け拡張
• HTML Snippets
• JQuery Code Snippets
• JS-CSS-HTML Formatter
• ESLint
• IntelliSense for CSS
• Sass
• Preview on Web Server
• Debugger for Chrome
…

開発支援機能の分類
入力支援機能ツールデバッグ

Demo
Visual Studio 2017と
Visual Studio Code の開発支援機能

デモで紹介した機能
Visual Studio 2017 Visual Studio Code
・新しいプロジェクトテンプレート
・サポートされるファイル
・インテリセンス
・コードスニペット
・JSDoc
・Quick Install Package
・Web Compiler
• スニペット
• インテリセンス
• formatter
• ターミナルでコマンド実行
• タスク実行
• Chromeと連携してデバッグ
• git連携

SPA 用プロジェクトテンプレートコマンド
エリアス
Ex) dotnet new angular

まとめ
Visual Studio IDE Visual Studio Code&
♥
All developers

https://www.visualstudio.com/ja/vs/
https://code.visualstudio.com/

セッションアンケートにご協力ください
 専用アプリからご回答いただけます。
decode 2017
 スケジュールビルダーで受講セッションを
登録後、アンケート画面からご回答ください。
 アンケートの回答時間はたったの 15 秒です!

Ask the Speaker のご案内
本セッションの詳細は『Ask the Speaker Room』各コーナーカウンタにて
ご説明させていただきます。是非、お立ち寄りください。

[TL03] あなたはどっち? Visual Studio Code 派と Visual Studio 派による Web フロントエンド開発 徹底紹介

More Related Content

What's hot

Similar to [TL03] あなたはどっち? Visual Studio Code 派と Visual Studio 派による Web フロントエンド開発 徹底紹介

More from de:code 2017

Recently uploaded