visual studio code 入門

Visual Studio Code 入門

さっくる　 @sakkuru日本マイクロソフト株式会社デベロッパーエバンジェリズム統括本部テクニカルエバンジェリスト

さっくる @sakkuru本間咲来 / Saki Homma~2016/12

NTT コミュニケーションズリサーチエンジニア

2017/01~日本マイクロソフト株式会社テクニカルエバンジェリスト

自己紹介

Visual Studio Code

最近のテキストエディタといえば

Visual Studio Code の特徴• 軽量（起動早いし動作も軽い！）• カスタマイズしなくても結構使える• 各言語のシンタックスハイライト• Git 連携• Gulp, Grunt 等のタスクランナーと連携• IntelliSense• マークダウンプレビュー• etc..• プラグインがたくさん

便利ショートカット• Ctrl+n: 新しいタブを開く• Ctrl+Shift+n: 新しいウィンドウを開く• Ctrl+Shift+x: エクステンションメニュー

• Ctrl-shift-p: コマンドパレット。とても良く使う

• Ctrl+d: 同じ単語を同時に編集• Ctrl+k v: ウィンドウを分割してマークダウンのプレビュー• Ctrl+k m: 言語シンタックスの切替

Mac の場合は Ctrl を Cmd キーに置き換えてください

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf

プラグインのインストール• エクステンションメニューを開く (Ctrl+shift+x)• 検索し、インストール

◎ プラグインをインストールしよう◎• エクステンションメニューを開く (Ctrl+shift+x)• “angular v2 typescript” と入力• 一番上の “ johnpapa” のプラグインを選択

し、” Install”

プラグインのアンインストール• エクステンションメニューを開く (Ctrl+shift+x)• “@installed” と入力• エクステンションを選択し、” Disable” もしく

は” Uninstall”

テーマのインストール• エクステンションメニュー (Ctrl-shift-x) で、” theme” と入

力• 好きなものを選んで、” Install”

テーマの簡単切り替え• コマンドパレット (Ctrl-shift-p) を開いて、” theme” と入力• “Preferences: Color Theme” を選択• もしくは “ Ctrl-k, Ctrl+t” で一発 OK• 上下キーでテーマを切り替えられる

マークダウンプレビュー• マークダウンを書く• 　　をクリックし、ウィンドウを分割する• 　　をクリックし、プレビューを表示• もしくは “ Ctrl-k v” で一発 OK

Mac でターミナルから開けるように• コマンドパレットを開く (Cmd+shift+p)• ”shell” と入力• PATH に‘ code’ コマンドの追加ができる

• ターミナルで” code .” と入力すると、そのディレクトリをVisual Studio Code で開ける

設定やショートカットの変更方法• 設定メニューを開く• Win: 「ファイル」 -> 「基本設定」 -> 「設定」• Mac: 「 Code 」 -> 「基本設定」 -> 「ユーザ設定」• 左のペインがデフォルトの設定• 右のペインがカスタマイズ用• デフォルトの設定を上書きしていく

おわりに• Visual Studio Code は軽量かつ安定なテキストエディタ• ショートカットを使いこなすととても便利！

visual studio code 入門

Technology