Visual Studio Code入門

マイクロソフトが開発する多機能エディタであるVisual Studio Codeについて見ていきます。
0%
#01 Visual Studio Codeを使ってみよう
2019年8月27日

公式サイトから「Download for Windows」をクリックすると、セットアップウィザードが開くので、手順に従ってインストールしていけばOKです。インストールの途中で細かい設定をする箇所がありますが、そのままの設定で「次へ」をクリックしていってください。インストールが完了すると、Visual Studio Codeが自動的に起動するので、レッスンどおりに進めていきましょう。

#03 ファイルを編集してみよう
2019年7月12日

動画内ではmacOSを使っているので、Windowsをお使いの方はフォルダの作成方法が異なります。Windowsマシンでレッスンと同じように進めたい場合は、次のようにしてフォルダを作成してください。

  • VS Codeで「Open Folder」とする
  • エクスプローラーが開くので「デスクトップ」を選択する
  • フォルダやファイルではないところで、右クリックする
  • 「新規作成」をクリック
  • 「フォルダー」をクリック
2019年7月12日

Visual Studio Codeの動作確認を行いながら、Web系の開発を進めていく手順についてもみていきます。
HTMLの基本については、以下のレッスンを参照してみてください。

#04 Emmet記法を使ってみよう
2019年7月25日

Emmet記法については以下のレッスンで詳しく解説しています。
興味がある方は参照してみてください。

#05 CSS、JavaScriptを読み込もう
2019年7月12日

動画内で紹介されている操作ですが、Windowsでは次のショートカットキーをご利用ください。

  • リンク先に飛ぶ → Ctrl + Click
  • サイドバーを閉じる → Ctrl + B
2019年7月12日

CSS, JavaScriptの基本については、以下のレッスンを参照してみてください。

#06 CSSを編集してみよう
2019年7月12日

動画内で紹介されている操作ですが、Windowsでは次のショートカットキーをご利用ください。

  • コメントにする → Ctrl + /
#08 設定を変更してみよう
2019年7月12日

動画内で紹介している内容がWindowsだと少々異なるので、以下にまとめました。

  • 設定画面を開く → SettingsはFileメニューの中にあります
  • Font Size → デフォルトでFont Sizeが14なので変更が不要です
#09 コマンドパレットを使ってみよう
2019年7月12日

動画内で紹介されている操作ですが、Windowsでは次のショートカットキーをご利用ください。

  • コマンドパレットを開く → Ctrl + Shift + P
#10 実践的なショートカットキーを使おう
2019年7月12日

動画内で紹介されている操作ですが、Windowsでは次のショートカットキーをご利用ください。

  • 行の移動 → Alt + 上下矢印
  • 行の複製 → Shift + Alt + 上下矢印
  • 次の行を挿入 → Ctrl + Enter
  • 前の行を挿入 → Shift + Ctrl + Enter
#11 マルチカーソルを使ってみよう
2019年7月12日

動画内で紹介されている操作ですが、Windowsでは次のショートカットキーをご利用ください。

  • クリックした箇所にカーソルを増やす → Alt + Click
  • 同じ単語を選択する → Ctrl + D
  • 同じ単語をいっきに選択する → Ctrl + Shift + L
  • カーソルを垂直方向に増やす → Ctrl + Alt + 上下矢印
#12 検索、置換をしてみよう
2019年7月12日

動画内で紹介されている操作ですが、Windowsでは次のショートカットキーをご利用ください。

  • ファイル内での検索 → Ctrl + F
  • 次の検索結果に移動 → F3
  • 前の検索結果に移動 → Shift + F3
  • ファイル内での置換 → Ctrl + H