VS Codeガイド

VS Codeとは、Microsoftが開発する高機能テキストエディタ「Visual Studio Code」の略称です。テキストエディタでありながら、拡張機能の導入によってIDE同等レベルの機能性を得られます。ソースコードはGitHubで公開されており、Electron製のためWindows・macOS・Linuxなど様々なOSで動作します。

テキストエディタとIDEの違い

種類	説明
テキストエディタ	コードを書く上で最小限の機能を持ったソフト。必要な機能については適宜追加していく。それ故動作が軽い。
IDE	最初から必要なものは全部入ってる。それ故ちょっと重いが、環境構築は楽。

VS Codeの導入方法

Windows

以下を参照してください。

Visual Studio Codeのダウンロードとインストール

Visual Studio Code のダウンロードと Windows 環境へのインストール方法について解説します。

www.javadrive.jp

macOS

macでもWindowsと同様に、インストーラーを用いてVS Codeをインストールできます。ただし、homebrewというパッケージマネージャを利用したほうが後々便利なため、今回はbrewを用いたインストール方法を解説します。また、詳しいhomebrewの使い方については解説しないため、興味があれば各自で調べてください。

1. homebrewを導入する

Homebrewの公式HPに行き、真ん中に表示されているコマンドをコピーする。
ターミナル.appを起動する
ターミナル上で、①でコピーした内容を貼り付け、実行する。
インストールが進み、[Installation Success]と表示されたらインストール成功。

2. VS Codeを導入する

ターミナル上で次を実行する。

brew install --cask visual-studio-code

参考文献として、以下を参照してください。

qiita.com

VS Codeの使い方

以下の内容は、以下の公式ドキュメントをもとに作られている。

User interface

A quick overview of the Visual Studio Code user interface. Learn about the editor, window management, and special UI to handle source control, extension management, full text search and more.

code.visualstudio.com

また、初歩的な使い方については、以下のサイトが体系的にまとまっていて分かりやすいのでオススメです。

Visual Studio Codeの使い方

Visual Studio Code の使い方を初心者にもわかりやすく解説します。

www.javadrive.jp

VS Codeの画面構成

VS Codeの画面は、以下の画面レイアウトから成り立っている。

A. Activity Bar 画面左端にあり、エクスプローラ画面や拡張機能画面などにサイドバーのビューを切り替えるのに使う。
B. Side Bar エクスプローラや拡張機能、デバッグ画面など様々なビューを表示する。エディターグループでの作業を支援する。
C. Editor Groups 画面真ん中の、実際のコードを書いていく画面。基本的にこの画面で作業をしていく。
D. Panel エディタ下部の、ターミナルなどを表示しておける画面。ctrl-jで表示、非表示を切り替えられる。便利。
E. Status Bar 言語や文字コードなど、開いてるプロジェクトやファイルの情報を表示する。

User Interface

markdownを書いてみる(初心者向け)

1.ファイルを作成してみよう

Ctrl+Nより、ファイルを作成する。
Ctrl+K Mで言語選択画面を開き、markdownを選択する。
Ctrl+Sで、適当な場所に保存しておく。

2. ファイルを編集してみよう

詳しいmarkdownの文法については、各自調べてもらいたい。一応、基礎的な文法は以下の通りです。

# 見出し1

## 見出し2

- リスト1
- リスト2

1. 番号付きリスト1
2. 番号付きリスト2

> 引用

**強調文字**

# 区切り

`インラインコード`

試しに、Hello worldのwikipediaの一部をmarkdownで書いてみる。

**Hello world**（ハロー・ワールド）は、画面に「Hello, world!」やそれに類する文字列を表示するプログラムの通称である。
多くのプログラミング言語において非常に単純なプログラムであり、プログラミング言語の入門書で、プログラムを動かすためのプログラミング言語の基本文法の解説例として提示される。

## 利用目的

ハロー・ワールドは伝統的にプログラミング言語をプログラム初心者に紹介するために使われる。
また、ハロー・ワールドはプログラミング言語が正しくインストールされていること、およびプログラミング言語の使用方法を理解するための[健全性テスト](https://ja.wikipedia.org/wiki/健全性テスト)にも使用される。

## 歴史

プログラミングできる[コンピュータ](https://ja.wikipedia.org/wiki/コンピュータ)の開発以来、小さなテストプログラムは存在してきたが、
テスト文言として「Hello, World!」を使う習慣はブライアン・カーニハンとデニス・リッチーによる著書
「[プログラミング言語C](https://ja.wikipedia.org/wiki/プログラミング言語C)」（1978年）のC言語バージョンから始まったと言われている。
同著書のプログラム例は`hello, world`（大文字なし、感嘆符なし）を標準出力に出力する。

以上の内容を書き込んだら、ctrl+sで保存をする。 ctrl+k vでプレビューをしてみて、正常に見られたら成功。

VS Codeをカスタムする

keymapについて

VS Codeでは、キーマップの設定を自由に変更できる。また、標準で設定されているキーマップについては、Ctrl+K Ctrl+RでPDF形式のチートシートが表示される。最初のうちはどこかにプリントアウトして手元に置いておくと便利です。

以下の日本語訳が参考になります。

【Windows版】VS Code キーボードショートカット一覧（オススメ付き） - Qiita

VS Codeのデフォルトショートカット一覧です。 ★が付いているのは個人的なオススメです。キー設定をカスタマイズしたい場合は末尾を御覧ください。 2020/10/06追記：未だにLGTMしてくださる方が多いので更新しました。 Mac版はこちら：【Mac版】 Visual...

qiita.com

キーマップの設定方法

Ctrl+K Ctrl+Sでショートカットキーの設定画面を開く。もしくは、Ctrl+Shift+PからOpen Keyboard Shortcutsと検索しても良い
適当に変えたいキーバインドを検索して、keybindingの値を変更する。 (検索窓右側にあるキーボードアイコンを押すと、キー入力から検索できる)

拡張機能について

ジャンル別におすすめの拡張機能を紹介していく。

themeについて

VS Codeのthemeは、拡張機能と同様にインストール出来る。

themeの入れ方

今回は、以下のサイトから好きなthemeを探し、インストールしてみる。

vscodethemes.com

vscodethemes.comを開く。
入れたいthemeを探し、クリック。
OPEN WITH VSCODE をクリック。
VS Code上で開かれた画面上部にあるインストールをクリック。
どのthemeを適用するか聞かれるので、好きなものを選ぶ。

細かいthemeのいじり方(中・上級者向け)

基本的に設定はjsonファイルからのみ可能です。 "workbench.colorCustomizations"と、"editor.tokenColorCustomization"に設定を上書きすることで、カスタマイズしていきます。また、細かい設定の値については、実際のThemeのソースコードと以下の公式ドキュメントを参考にしてください。

GitHub - primer/github-vscode-theme: GitHub's VS Code themes

GitHub's VS Code themes. Contribute to primer/github-vscode-theme development by creating an account on GitHub.

github.com

GitHub's VS Code themes. Contribute to primer/github-vscode-theme development by creating an account on GitHub.

Theme Color

Theme Color reference that lists all themable colors in Visual Studio Code.

code.visualstudio.com

themeをいじる

具体的には、次のように書きます。

"workbench.colorCustomizations": {
  "設定項目": "値"
}

また、特定のthemeでのみ適用させたい場合は次のように書きます。

"workbench.colorCustomizations": {
  "[テーマ名]": {
    "設定項目": "値"
  }
},

Ex. Community Material Theme Darker High ContrastでのfocusBorderの色を赤にする。

"workbench.colorCustomizations": {
  "[Community Material Theme Darker High Contrast]": {
    "focusBorder": "#ff0000"
  }
},

syntax highlightをいじる

具体的には、次のように書きます。

"editor.tokenColorCustomizations": {
  "comments": {
    "foreground": "#008800",
    "fontStyle": "underline"
  },
  "functions": {
    "foreground": "#000088",
    "fontStyle": "bold"
  },

ここで指定できるものには、以下のものがあります。

comments: コメントの色とスタイル
functions: 関数やメソッドの色とスタイル
keywords: キーワードの色とスタイル
numbers: 数値リテラルの色とスタイル
strings: 文字列リテラルの色とスタイル
types: 型の色とスタイル
variables: 変数の色とスタイル
textMateRules: TextMateエディタで定められているルールにのっとった構文ハイライト指定（後述）

そして、commentsやfunctionなど大まかなジャンル指定では対応できないものについては、textMateRulesを用いて指定していきます。

textMateRulesをいじる

具体的には、以下のように書きます。

"textMateRules": [
  {
    "scope": [
      "comment",
      "comment.block",
      "comment.block.documentation",
      "keyword.control",
      "storage.type"
    ],    "settings": {
      "fontStyle": ""
    }
  }
],

"scope"の値は、コマンドパレットからDeveloper: Inspect Editor Tokens and Scopesを有効化して確認できる。カーソル位置の構文に対応するtextMateScopesが表示される。
"settings"の中に、変更したいスタイル("fontStyle"や"foregroundColor"など)を指定する。