Visual Studio Code 入門 : 0回 : イントロダクション

## 記事ガイド

読みたいところだけ読めばよいように記事を分割してあるので、順番に読んで行く必要はありません。気になったところだけ好きにお読みください。

- [0回 : イントロダクション](https://qiita.com/wraith13/items/1942a5c306e674fd39ad)
- [1回 : コマンドパレット](https://qiita.com/wraith13/items/f7c9f60a7fe3b0d1e4aa)
- [2回 : 設定](https://qiita.com/wraith13/items/afb752a4b4d159f9e587)

### 対象読者

- VS Code をこれからメインのテキストエディタとして使い始めようとしてる人、あるいはそれを検討してる人。
- VS Code とは別にお気に入りのテキストエディタがあるけど、 VS Code も基本的なところは抑えておきたい人、あるいはそれを検討してる人。

## 支配的シェアトップに躍り出た VS Code

こちらの記事 [Visual Studio Code時代の到来 - ITnews](https://itnews.org/news_contents/the-era-of-visual-studio-code) でも解説されていますが、 VS Code は既に支配的シェアトップに躍り出ました。

例えばバージョン管理システムって本来的には別に何を使ったっていいんですが、それでも流石に Git が支配的状況になっている現状では Git を避けて通るのは厳しいでしょう。そして現在、テキストエディタにおいてその地位に立ったのが VS Code です。VS Code の Web 版である GitHub Codespaces もあれば Google Cloud の Cloud Shell Editor も VS Code の亜種である Eclipse Theia ベースです。もう VS Code は好き嫌いで選ぶモノではなく、避けて通れない、そう言う存在です。

テキストエディタとしてここまで圧倒的なシェアを獲得したのは初の快挙でしょうし、いままでは発生し得なかったようななんらかの現象がこれから発生し得る、そういう怖さすらあるのが現状です。

まだ VS Code をご利用されてない方には、まずは基本的なところだけでも抑えておくことを強くオススメします。

## 既に VS Code を利用されている方へのお願い。

他のテキストエディタやそのユーザーを馬鹿にしたり、 VS Code を利用する事を他者に強要したり( しつこい勧誘なども含む )なんて類いの事は絶対にやらないでください。それは VS Code アンチを生む行為でしかありません。

チームの全員が同一のツールを使った方が効率的・合理的だと考え、同じテキストエディタを使って欲しい場合でも、どうしても VS Code を使ってもらう必要がある場面以外は自由にさせてあげてください。

## 他のテキストエディタを深く使い熟してる方へのお願い。

別にテキストエディタに限った話ではないのですが、例えば Android を深く使い熟してるユーザーほど、別のスマートフォンを使う事になった時に「不便なAndroid」としてしか使えないという問題が発生します。 Android を深く使い熟してるユーザーほど **無意識のうちに** 「スマートフォンとは Android の事」という思考・思想・感情が染みついてしまい、別のスマートフォンを触った時に Android と違う挙動/仕様をなにか目にする度に「Android ならｘｘｘなのに、なんだこれは？？？」としかならず、そのスマートフォンならではの良い挙動/仕様があっても「そんなもの求めてない！　要らない！」となってしまう事がよくあります。

同様に Windows を深く使い込んでるユーザーほど Mac を触った時に「不便な Windows」としてしか使えない、 Mac を深く使い込んでるユーザーほど Windows を触った時に「不便な Mac」としてしか使えない、と言う事が発生します。

こういった無意識のうち刷り込まれてしまった思考・思想・感情のトラップを回避するには、先の Android の事例で言えば他のスマートフォンを触る時に「スマートフォン」だと思って触るのではなく「スマートフォンっぽい事ができるけどスマートフォンではないなにか」だと思って触る事です。 Windows / Mac の件であれば「PCっぽい事ができるけどPCではないなにか」だと思って触る事です。

ここまで読んで頂ければ、私が言いたい事を既にご理解頂けているかと思いますが、そう、「VS Code はテキストエディタっぽい事ができるテキストエディタではないなにか」だと思って触ってください。 VS Code を「不便な Vim」や「不便な Emacs」等々にしないでください。

( 昔、Apple が Mac の宣伝で「MacはPCではない、MacはMacだ。」という趣旨の事を訴えていましたが、アレはこの観点から非常に正しいモノだったと思うのですが、当の Apple が最近 iPhone を自ら「不便なAndroid」にしたて上げていってしまっててとても悲しい・・・ )

## 表記/略称

正式名称としては言うまでもなく `Visual Studio Code` と表記され、略称としては `VS Code` あるいは `VSCode` と表記されます。初期の頃は公式に `VS Code` と言う略称を推奨していたのですが、空白文字を含む為、検索性の問題やSNS上のハッシュタグなどとの相性の悪さを気にしてか、いまは特にどの略称を推奨すると言う事はしていないようです。

## そもそも VS Code とは？

VS Code とはどのようなソフトウェアでしょうか？　基本的にはテキストエディタですが、ワークスペースという概念を持ち、入力補完機能を備え、ソースコードを編集中にエラーや警告表示等々も行い、デバッグを含め各種タスクを実行する機能があり、と言った感じでかなり IDE よりでもあり、IDE と呼んでも差し支えないかもしれません。

機能的な特徴としては１つのウィンドウごとに１つのフォルダ/ワークスペースを扱い、様々な拡張と合わせて Language Server Protocol により様々なプログラミング言語に対応でき、デバッグやタスクを設定することで、非常に多種多様な開発に対応できますし、開発プロジェクトに限らず、執筆プロジェクトなどにも対応できる上に Windows版、 Mac版、Linux版、Web版( GitHub Codespaces )が提供され、プラットフォームをあまり選びませんし、 [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack) や [Remote Development](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack) などを始めとした飛び道具的な [Microsoft 公式の拡張](https://marketplace.visualstudio.com/publishers/Microsoft) にも恵まれています。

内部的な特徴としては、現状は若干変わってきてるところもありますが

- エンジンは [Electron](https://www.electronjs.org/) ( [GitHub](https://github.com/electron/electron) )
- テキストエディタは [Monaco Editor](https://microsoft.github.io/monaco-editor/) ( [GitHub](https://github.com/Microsoft/monaco-editor) )
- カラースキームは [TextMate](https://macromates.com/)
- パッケージシステムは [npm](https://www.npmjs.com/) ( [GitHub](https://github.com/npm/npm) )
- アイコンは [octicons](https://primer.style/octicons/) ( [GitHub](https://github.com/primer/octicons) )

と言った構成で、利用できるものは積極的に利用し、注力すべき箇所に注力するという姿勢が貫かれてるように見受けられます。アイコンに関しては現在は octioncs から VS Code 独自の [codicon](https://microsoft.github.io/vscode-codicons/dist/codicon.html) ( [GitHub](https://github.com/microsoft/vscode-codicons) ) に変わっています。

Electron ベースのソフトウェアであるにも関わらず比較的プアな環境でも快適に動作しますが、サイズの大きいファイルには弱いです。ログファイルとか場合によっては数百MB、数GB以上になる事もあるかと思いますが、 VS Code をメインで使うにしてもそういうファイルを扱う場合は別のテキストエディタ等が必要になります。Electron ベースのアプリであろうとも頑張れば巨大なファイルの対応はできない事はないでしょうけど、恐らく VS Code がそういう巨大なファイルの対応を進める事は将来的にもないように思われます。

## キーボードショートカットについて

VS Code の default のキーボードショートカットは概ね Windows 版と Linux 版で同じ割り当てになっており、 Mac 版では Windows / Linux で `Ctrl` キーになっているところを `⌘ Command` キー に置き換えた形にほぼなっていますが、一部、`Ctrl` + `R` ( `File: Open Recent...` コマンド )のように Mac 版でも `Ctrl` のままだったりする変則的なところがあるので、複数環境で使われる際はご注意ください。

## 注意事項

VS Code を使うにあたって、自分的にここは気をつけた方が良いと思ってる点を２つ上げてます。

まず１つ目ですが、 VS Code を利用する時はまず最初に直接起動する事を強く推奨します。と、言うのも、既に VS Code が起動してる状態からなら問題無いのですが、 GitHub Desktop やファイラー( Explorer, Finder, Nautilus 等々 )から特定のフォルダーやファイルを開く形で VS Code が起動されると、 Hot Exit により編集中だった未保存のファイルがどこかに消えてしまったり、前回、複数のフォルダを開いてて再開時にはそれらが全て開かれる設定を行っていても開かれなかったりします。

２つ目は１つ目と若干被る話にもなるのですが、 Mac で VS Code を利用する場合、まず最初に Terminal から `code` コマンドを叩いて起動する事を推奨します。これは VS Code というより Mac の問題なのですが、 Dock や Spotlight などの GUI から起動すると環境変数が引き継がれない問題があって、ロケール等の環境変数が正しく設定されている事に依存する VS Code 拡張が正常に動作できなくなったりします。

## 公式情報

- 公式サイト: [Visual Studio Code - Code Editing. Redefined](https://code.visualstudio.com/)
- GitHub: https://github.com/microsoft/vscode/
- Twitter: https://twitter.com/code
- YouTube: https://www.youtube.com/channel/UCs5Y5_7XK8HLDX0SLNwkd3w
- 拡張のマーケットプレイス: [Extensions for Visual Studio family of products | Visual Studio Marketplace](https://marketplace.visualstudio.com/)

## その他の情報源等

- VS Code Meetup ( Microsoft 主催の日本での VS Code のコミュニティ ): https://vscode.connpass.com/
- VS Codeの会 コミュニティ ( Twitter 上での VS Code のコミュニティ ): https://twitter.com/i/communities/1498865559353511941
- VS Code に関する Twitter 上のツイート検索: https://twitter.com/search?q=vscode%20OR%20%22VS%20Code%22%20OR%20%22Visual%20Studio%20Code%22&src=typed_query&f=live
- VS Code に関する Twitter 上の日本語ツイートの検索: https://twitter.com/search?q=vscode%20OR%20%22VS%20Code%22%20OR%20%22Visual%20Studio%20Code%22%20lang%3Aja&src=typed_query&f=live
- VS Code に関する Twitter 上の英語語ツイートの検索: https://twitter.com/search?q=vscode%20OR%20%22VS%20Code%22%20OR%20%22Visual%20Studio%20Code%22%20lang%3Aen&src=typed_query&f=live