Hello VS Code ハンズオン 参加者向けガイド

ハンズオンのターゲットレベル

ターゲット

• 初めて高機能テキストエディタとして VS Code にふれる方 -> この体験でテキストエディタを積極的に使おうと思えるようになる
• 他の高機能テキストエディタを使用していて、VS Code を味見をしてみたい方 -> VS Code の作法がわかること
• なんとなく VS Code を使っている方 -> VS Code の一通りの使い方、カスタマイズ方法を体験できること

ターゲットにしない

• プログラミング言語での活用方法を知りたい人 -> このハンズオンは*"テキストエディタ"*としての使い方をサポートします

事前に準備していただきたいこと

以下の Topic 0.1、0.2 を実施して、Visual Studio Code のインストールをお願いします。

• Topic 0.1 : VS Code のインストールしよう
  • やってもらうこと: VS Code をインストールして、表示言語を日本語に設定する
  • 扱うこと: インストール、日本語設定
  • ゴール: インストールが完了し、日本語設定ができていること
• Topic 0.2 : GitHub のリポジトリを VS Code で開こう
  • やってもらうこと: このリポジトリのチェックアウトして、VS Code で開く
  • 扱うこと: フォルダーをワークスペースとして開く
  • ゴール: リポジトリを VS Code で開くことができること

進め方

• VS Code に初めて触られる方は、最初のところから、ご自身のスピードで進めてみてください。
• 各 Topic の内容を以下に記載していますので、できそうなところはスキップして、気になるところから進めていただいて構いません。
• 各 Topic 課題が設定されていますが、課題をクリアーしなければいけないことはありません。興味のある部分から進めていただければと思います。
• Topic 6 は、Git の操作を扱いますが、既に Git を使われている方向けのページになっております。Git を使われていないようであれば、スキップして進めていただければと思います。

参加についての心構え

• VS Code は直感的に使えると言われますが、それは使える人が言っていることです。操作で悩む所、よくわからないところがあれば、気にせず質問して下さい。

コンテンツ

• Topic 0.1 : VS Code のインストールしよう
  • やってもらうこと: VS Code をインストールして、表示言語を日本語に設定する
  • 扱うこと: インストール、日本語設定
  • ゴール: インストールが完了し、日本語設定ができていること
• Topic 0.2 : GitHub のリポジトリを VS Code で開こう
  • やってもらうこと: このリポジトリのクローンして、VS Code で開く
  • 扱うこと: フォルダーをワークスペースとして開く
  • ゴール: リポジトリを VS Code で開くことができること
• Topic 1 : VS Code の画面と、ワークスペースを理解しよう
  • やってもらうこと: 画面構成、エディターウィンドウの操作、パネルの操作
  • 扱うこと: 画面構成、ワークスペース、エディター、パネル
  • ゴール: フォルダーを開くことができること
• Topic 2 : Markdown を書いてみよう
  • やってもらうこと: エクスプローラービューでファイルを新規作成し、README.md を開いて編集し、ファイルを保存して、プレビューする
  • 扱うこと: エクスプローラービュー、ファイルの保存、プレビュー
  • ゴール: エクスプローラービューからファイルを開いて、編集ができること
• Topic 3 : 検索して、ファイルを一気に置換しよう
  • やってもらうこと: ファイル内置換を使って、
  • 扱うこと: ファイル内検索、検索ビュー
  • ゴール: ファイル内検索と、検索ビューを使って、一括置換ができること
• Topic 4 : 拡張機能をインストールして、コマンドパレットから呼び出そう
  • やってもらうこと: 拡張機能 Prettier をインストールして、フォーマットを行う。Markdown All in Oneをインストールして、Table of Contents を追加する。Markdown PDF をインストールして、PDF を出力する
  • 扱うこと: 拡張機能のインストール、コマンドパレット、コマンド検索、ファイル検索、シンボル検索
  • ゴール: 拡張機能がインストールできること、コマンドパレットの呼び出し方がわかること
• Topic 5 : 拡張機能をインストールして、Markdown をチェックさせよう
  • やってもらうこと: 拡張機能 Markdown Lint と、Code Spell Checker をインストールして、リントエラーを修正する
  • 扱うこと: 問題パネル
  • ゴール: 目的のリントツールが実行できること、問題パネルが使えること
• Topic 6 : Git でファイルをコミットしよう
  • やってもらうこと: Git のファイルコミットする、github アカウントを持っている場合、フォークして push する
  • 扱うこと: Git タブ、コミット、ブランチの作成、ブランチの変更
  • ゴール: ソースコントロールビューを使った変更差分の確認と、コミットができること。ステータスバーのブランチの変更ができるようになること。
• Topic 7 : 自分好みにカスタマイズしよう
  • やってもらうこと: 保存した時に自動でフォーマットがかかるように設定する、好みのキーにフォーマットのコマンドを設定する
  • 扱うこと: キーバインド、ユーザ設定 UI、ワークスペース設定の概念
  • ゴール: UI でユーザ設定を変更できること
• Topic 8 : スニペットで定型文を簡単に入力しよう
  • やってもらうこと: 週報スニペットを作成してもらい、スニペットでテンプレートを作成する
  • 扱うこと: スニペットの作成、スニペットの使用
  • ゴール: スニペットを使うことができること
• Topic 9 : ターミナルを活用しよう
  • やってもらうこと: ターミナルから、ZIP ファイルを解凍する
  • 扱うこと: ターミナル
  • ゴール: ターミナルを操作できること

逆にこのコンテンツでは扱わないこと

• デバッグ
• タスク
• 拡張機能の開発
• ユーザ設定 JSON

コントリビュータ向けガイド

• スクリーンショットは以下の環境で撮影する
  • .vscode/settings.json に設定済み
    • Color Theme: Dark+(default dark)
    • Icon Theme: VS Seti
    • Product Icon Theme: Default
  • Display Language : ja
• キーボードショートカットを紹介する場合には、macOS: Cmd+P、Windows・Linux: Ctrl+P と、Windows、macOS、Linux の各環境のキーバインドを書くようにする。
• Prettier でフォーマットする（自動でフォーマットされます）

カスタマイズに影響を受けずに、このリポジトリを開くには以下のように cli で実行します。

code --extensions-dir ./tmp/extensions --user-data-dir ./tmp/user .