Visual Studio Code 入門
-
Upload
saki-homma -
Category
Technology
-
view
2.200 -
download
0
Transcript of Visual Studio Code 入門
![Page 1: Visual Studio Code 入門](https://reader033.fdocuments.net/reader033/viewer/2022042907/58ce75211a28abdc578b6529/html5/thumbnails/1.jpg)
Visual Studio Code 入門
さっくる @sakkuru日本マイクロソフト株式会社デベロッパーエバンジェリズム統括本部テクニカルエバンジェリスト
![Page 2: Visual Studio Code 入門](https://reader033.fdocuments.net/reader033/viewer/2022042907/58ce75211a28abdc578b6529/html5/thumbnails/2.jpg)
さっくる @sakkuru本間咲来 / Saki Homma~2016/12
NTT コミュニケーションズリサーチエンジニア
2017/01~日本マイクロソフト株式会社テクニカルエバンジェリスト
自己紹介
![Page 3: Visual Studio Code 入門](https://reader033.fdocuments.net/reader033/viewer/2022042907/58ce75211a28abdc578b6529/html5/thumbnails/3.jpg)
Visual Studio Code
![Page 4: Visual Studio Code 入門](https://reader033.fdocuments.net/reader033/viewer/2022042907/58ce75211a28abdc578b6529/html5/thumbnails/4.jpg)
最近のテキストエディタといえば
![Page 5: Visual Studio Code 入門](https://reader033.fdocuments.net/reader033/viewer/2022042907/58ce75211a28abdc578b6529/html5/thumbnails/5.jpg)
Visual Studio Code の特徴• 軽量(起動早いし動作も軽い!)• カスタマイズしなくても結構使える• 各言語のシンタックスハイライト• Git 連携• Gulp, Grunt 等のタスクランナーと連携• IntelliSense• マークダウンプレビュー• etc..• プラグインがたくさん
![Page 6: Visual Studio Code 入門](https://reader033.fdocuments.net/reader033/viewer/2022042907/58ce75211a28abdc578b6529/html5/thumbnails/6.jpg)
Demo
![Page 7: Visual Studio Code 入門](https://reader033.fdocuments.net/reader033/viewer/2022042907/58ce75211a28abdc578b6529/html5/thumbnails/7.jpg)
便利ショートカット• Ctrl+n: 新しいタブを開く• Ctrl+Shift+n: 新しいウィンドウを開く• Ctrl+Shift+x: エクステンションメニュー
• Ctrl-shift-p: コマンドパレット。 とても良く使う
• Ctrl+d: 同じ単語を同時に編集• Ctrl+k v: ウィンドウを分割してマークダウンのプレビュー• Ctrl+k m: 言語シンタックスの切替
Mac の場合は Ctrl を Cmd キーに置き換えてください
![Page 8: Visual Studio Code 入門](https://reader033.fdocuments.net/reader033/viewer/2022042907/58ce75211a28abdc578b6529/html5/thumbnails/8.jpg)
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
![Page 9: Visual Studio Code 入門](https://reader033.fdocuments.net/reader033/viewer/2022042907/58ce75211a28abdc578b6529/html5/thumbnails/9.jpg)
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf
![Page 10: Visual Studio Code 入門](https://reader033.fdocuments.net/reader033/viewer/2022042907/58ce75211a28abdc578b6529/html5/thumbnails/10.jpg)
プラグインのインストール• エクステンションメニューを開く (Ctrl+shift+x)• 検索し、インストール
![Page 11: Visual Studio Code 入門](https://reader033.fdocuments.net/reader033/viewer/2022042907/58ce75211a28abdc578b6529/html5/thumbnails/11.jpg)
◎ プラグインをインストールしよう◎• エクステンションメニューを開く (Ctrl+shift+x)• “angular v2 typescript” と入力• 一番上の “ johnpapa” のプラグインを選択
し、” Install”
![Page 12: Visual Studio Code 入門](https://reader033.fdocuments.net/reader033/viewer/2022042907/58ce75211a28abdc578b6529/html5/thumbnails/12.jpg)
プラグインのアンインストール• エクステンションメニューを開く (Ctrl+shift+x)• “@installed” と入力• エクステンションを選択し、” Disable” もしく
は” Uninstall”
![Page 13: Visual Studio Code 入門](https://reader033.fdocuments.net/reader033/viewer/2022042907/58ce75211a28abdc578b6529/html5/thumbnails/13.jpg)
テーマのインストール• エクステンションメニュー (Ctrl-shift-x) で、” theme” と入
力• 好きなものを選んで、” Install”
![Page 14: Visual Studio Code 入門](https://reader033.fdocuments.net/reader033/viewer/2022042907/58ce75211a28abdc578b6529/html5/thumbnails/14.jpg)
テーマの簡単切り替え• コマンドパレット (Ctrl-shift-p) を開いて、” theme” と入力• “Preferences: Color Theme” を選択• もしくは “ Ctrl-k, Ctrl+t” で一発 OK• 上下キーでテーマを切り替えられる
![Page 15: Visual Studio Code 入門](https://reader033.fdocuments.net/reader033/viewer/2022042907/58ce75211a28abdc578b6529/html5/thumbnails/15.jpg)
マークダウンプレビュー• マークダウンを書く• をクリックし、ウィンドウを分割する• をクリックし、プレビューを表示• もしくは “ Ctrl-k v” で一発 OK
![Page 16: Visual Studio Code 入門](https://reader033.fdocuments.net/reader033/viewer/2022042907/58ce75211a28abdc578b6529/html5/thumbnails/16.jpg)
Mac でターミナルから開けるように• コマンドパレットを開く (Cmd+shift+p)• ”shell” と入力• PATH に‘ code’ コマンドの追加ができる
• ターミナルで” code .” と入力すると、そのディレクトリをVisual Studio Code で開ける
![Page 17: Visual Studio Code 入門](https://reader033.fdocuments.net/reader033/viewer/2022042907/58ce75211a28abdc578b6529/html5/thumbnails/17.jpg)
設定やショートカットの変更方法• 設定メニューを開く• Win: 「ファイル」 -> 「基本設定」 -> 「設定」• Mac: 「 Code 」 -> 「基本設定」 -> 「ユーザ設定」• 左のペインがデフォルトの設定• 右のペインがカスタマイズ用• デフォルトの設定を上書きしていく
![Page 18: Visual Studio Code 入門](https://reader033.fdocuments.net/reader033/viewer/2022042907/58ce75211a28abdc578b6529/html5/thumbnails/18.jpg)
おわりに• Visual Studio Code は軽量かつ安定なテキストエディタ• ショートカットを使いこなすととても便利!
![Page 19: Visual Studio Code 入門](https://reader033.fdocuments.net/reader033/viewer/2022042907/58ce75211a28abdc578b6529/html5/thumbnails/19.jpg)
© Copyright Microsoft Corporation. All rights reserved.