15分でできる！最低限のVisual Studio Codeの設定と拡張機能のインストール

# この記事はなにか
秀丸やサクラエディタを使ってるけど、Visual Studio Code(以降、VSCodeと表記)を使用してみたい、VSCodeを初めて使うという方向けに、私の体験をもとに
**<font color='red'>初めての方が必要そうな設定と拡張機能のインストールを15分くらいでできる</font>**ように作成しました。
また、**業務によく使いそうなショートカットやGitの導入方法（リンク）**も記載しています。
既に別のエディタを使い慣れている場合は、業務上支障が出ない範囲でスモールスタートしましょう。

# 対象者
- Windows10(MacでもOK)を使っている
- SQLやJavaScriptなどを書いたりしている
- VSCodeを導入してみたい

# 目次
- 0.基本編
- 1.設定編
- 2.拡張機能編
- 3.ショートカット編
- 4.Gitでバージョン管理編
- 所感

# 0.基本編

**Visual Studio Code(VSCode)とはなにか**
世界的なシェアが最も高いエディター[^1]のひとつです。
特徴は、豊富な設定項目や拡張機能があり多様なカスタマイズが可能なことです。
[^1]: [2019年開発環境ランキング - Stack Overflow｜マイナビニュース](https://news.mynavi.jp/article/20190412-807200/)

[VSCodeのダウンロードはこちらから](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)

先に日本語化をしておいたほうが良いと思うので順番前後しますが、
[拡張機能をインストールして**VSCodeを日本語化**](https://qiita.com/HiroCh/items/481adfa969dbe689f566)しておきましょう。

**重要ワード① コマンドパレット**
`F1` or `Ctrl + Shift + P` or `⚙マーク→コマンドパレット`
すべての機能にアクセスできるショートカット。
VSCodeのメリットを活かすにはこれを最初に覚えましょう！

**重要ワード② ワークスペース**
任意のディレクトリを好きな構成で配置でき、プロジェクト毎にまとめることができます。
**ワークスペース**という存在だけ覚えておきましょう[^0]。
[^0]: [vscodeの利用に必須な”ワークスペース”の概念｜今日も元気にIT屋さん](https://prius.cc/itya/20181218_vscode-workspace)

# 1.設定編
**設定画面について**
`Ctrl + ,` or `左下の⚙マーク`→`設定`の順で設定画面に行けます。
ex)「設定の検索」検索バーに`editor.renderWhitespace`を入力すると項目が出現。

**スペースを白く表示させる**
`editor.renderWhitespace`をallに設定。

**ファイルオープン時にエンコーディングを自動判別する**
`files.autoGuessEncoding`をtrueに設定[^2]。
[^2]: [VS Codeでエンコーディングを変更、自動判別するには｜＠IT](https://www.atmarkit.co.jp/ait/articles/1806/01/news051.html)
　
**文字の拡大/縮小をより簡単にできるようにする**
`Mouse Wheel Zoom`の「Ctrl キーを押しながらマウス ホイールを使用してエディターのフォントをズームします。」をチェック[^3]します。
[^3]: [VS Codeでフォントを拡大／縮小するには｜＠IT](https://www.atmarkit.co.jp/ait/articles/1811/30/news032.html)
　
**TabキーでスペースではなくTabを挿入する**
`Editor: Insert Spaces`の「Tab キーを押すとスペースが挿入されます。」のチェックを外します。
一時的に変更する場合は右下の「タブのサイズ」をクリックすれば変更が可能。
ちなみに、デフォルトのサイズは4。設定の`Editor: Tab Size`で他のサイズに固定できます。
（Rubyだとスペースでサイズ2のインデントが主流。社内やプロジェクトの規定に合わせましょう。）

**補足：何を設定したかわからなくなったとき:sob:**
設定を開き、右上のファイルのアイコンをクリックすると`setting.json`というファイルが出てきます。
そこに変更した設定が記録されています。マウスオンをすれば説明が出てきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224314/07e1e25f-266e-28f9-4ce3-be771a0841df.png)

# 2.拡張機能編

**拡張機能(Extentions)について**
画面右側にあるExtensionsのアイコンをクリックすると、既にインストールしたものを確認する、MARKETPLACEで検索するなどできます。インストールは無料です。
インストール数も表示されるので、人気なので気になるものがあればインストールしてみましょう。

**VSCodeを日本語化する**
**`Japanese Language Pack for Visual Studio Code`**
`0.基本編`で既出。日本語にならない、日本語⇔英語で切り替えたいときはこちら[^5]。
[^5]: [【Visual Studio Code 入門】MacのVSCodeを日本語化する｜kitanote](https://kita-note.com/vsc-change-language)
　
**最後尾のスペースを赤く表示する**
**`Trailing Spaces`**[^4]
[^4]: [Visual Studio Codeの拡張機能「Trailing Spaces」でコードの中にある余計なスペースを表示する｜WebDesigner's Memorandum ウェブデザイナーの備忘録](https://webrandum.net/vscode-trailing-spaces/)
　
**アイコンをPOPな感じで見やすくする**
1.**`vscode-icons`**　←1番人気:point_up:
2.**`Material Icon Theme`**　←2番人気:v:
私は`Material Icon Theme`にしています。他にも色々ありそう[^6]です。
複数インストールした場合はActivateしたものが適用されます。
[^6]: [Visual Studio Code のファイルアイコンを変える｜Qiita](https://qiita.com/aoi70/items/388c9ce772d11a9bad8f)
　
**全角スペースをわかりやすく表示する**
**`zenkaku`**
全角スペースがあった場合にそれを白く表示してくれます。

**CSVデータを確認する①**
**`Excel Viewer`**
CSVファイルを開くと、エディタ右上に出てくる虫眼鏡のようなアイコンをクリックするとEXCELライクに表示してくれます。
☆おすすめ設定☆`Csv-preview: Format Values`を`never`とすることで、数値も文字列として扱うことで「*00001*」のデータを「*0*」の省略なしに表示することができます。

**CSVデータを確認する②**
**`Rainbow CSV`**
CSVデータをカラフルに見やすくしてくれる拡張機能です。
左下の`Query`を押すとSQLライクな式で情報を抽出でき、`Align`または`Shrink`を押すと文字間隔を広げたり狭めたりすることができます。
※秀丸の「TSVモード」や「CSVモード」のように真っ直ぐに区切ってくれません。

**入力補完**
**`Visual Studio IntelliCode`**
いろいろな言語の入力補完の拡張機能があります。言語によって不足があれば探しましょう。

**ソースを見やすくする**
**`Bracket Pair Colorizer 2`**
どこからどこまでがつながっているか色違いの線で結んでくれます。

**大文字・小文字・その他ケースに変換**
**`change-case`**
変換したい文字を選択してからコマンドパレットで`Change Case Commands`を実行すると、大文字・小文字・キャメルケース・ケバブケースのプレビューを確認してから変換できます[^7]。
[^7]: [change-case｜Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case)
　 
**ブックマーク（ラベル）をつけれるようにする**
**`Bookmarks`**
`右クリック→Bookmarks:Toggle` or `Ctrl + Alt + K`でブックマークをつけたり外したりできます。
あとで戻って参照するソースがある場合によく使用します。
設定で`Bookmarks: Background Line Color`の色を`rgba(238, 238, 0, 0.1)`などに指定すると見やすくなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224314/2f16b508-135c-1710-c3da-3b53fbc5e8cb.png)
　
**MarkDown記法でメモをとる**
**`VSNotes`**
MarkDown記法でノートが取れます。
初期設定が必要で、コマンドパレット`VSNotes: run setup`or 設定`Default Note Path`でPATHの設定をします。
また、タイトルが`Default Note Title`で`{title}_{dt}.{ext}`とするとタイトルが前に日時が後にきて見やすいと思います。

Tagはファイルの最上部に設置し、下記のように記述します。

```.md
---
tags:
 - WIP
 - MarkDown
---
```

**MarkDown記法のサポート**
①**`Markdown All in One`**
Markdown記述時に補完機能とフォーマットが適用されます。`Ctril + B`で**太文字**とかできます。
②**`markdownlint`**
MarkDownを書くときに書き方が正しくないときに指摘してくれる拡張機能です。
エディタによっては許してくれる書き方も別のになると表記が崩れてしまう場合があるので、入れておいたほうが無難かと思います。

**画像の貼り付け**
**`Paste Image`**
特に上記のVSNotesと一緒に使います。
1.画像をクリップボードに保存→2.貼り付けたい場所を選択→3.コマンドパレットで`Paste Image`を選択し貼付
同じフォルダ内だとにカオスなってしまうので、設定の`Paste Image`で`Path${currentFileDir}/images`としカレントディレクトリの直下にimagesフォルダを作成するようにしています。
尚、文字列を選択しながら`Paste Image`を実施すると、その文字列がタイトルとなって保管されます。結構便利。

**Git関係**
①**`GitLens — Git supercharged`**
②**[ソフトウェア：Git For Windows](https://gitforwindows.org/)**
↑これらについては後ほど説明します。

**<font color='blue'>設定と拡張機能のインストールは完了です。お疲れさまでした。</font>**

これより下はショートカット集とGitの説明です。
使いながら参考にしてください。

# 3.ショートカット編
**コマンドパレット**
`F1`もしくは`Ctrl + Shift + P`
先述しましたが、VSCodeのすべての機能にアクセスできるショートカットです。

**サイドバーの開閉**
`Ctrl + B`
画面を広く使えます。

**一時的な差分の確認**
ショートカットとは違いますが、`比較対象のファイルを2つ選択して右クリック→選択項目の比較`をすると差分を確認できます。
コマンドパレットで`Compare Active File With Clipboard`とすれば、「クリップボード」などとも比較できます。

**矩形の選択**
`Alt + Shift + 右クリックしながら選択`

**フォーマット(成形)**
`Ctrl + Shift + F`もしくはコマンドパレットで`Format Document`
「〇〇ファイルのフォーマッタがインストールされていません」と出る場合はフォーマッタをインストールします。
（正式にコミットする場合は社内の規定に従いましょう）。

**ファイルの検索**
`Ctrl + P`で設定したディレクトリやワークスペース、直近開いたファイルの検索ができます。
エディタ内の文字列検索は`Ctrl + F`、フォルダやワークプレイスの文字列検索は`Ctrl + Shift + F`です。

**言語モードを選択**
`Ctrl + K M`もしくは画面右下のところをクリック。
英数字入力に切り替えないと聞かないと思うので注意ください。

**行の移動**
`Alt + ↑または↓`

**行の複製**
`Alt + Shift + ↑または↓`

**行の選択**
`Ctrl + L`

**エディタ全体の拡大/縮小**
`Ctrl + '+' or '-'`

**選択している文字すべてを変更**
`Ctrl + F2`もしくは`右クリック後「すべての出現箇所を変更」`

**その他**
`⚙マーク→キーボードショートカット`でショートカット一覧が確認できます。割当の変更が可能なだけでなく、拡張機能で他のエディタのキーマップを使用することも可能なようです。

# 4.Gitでバージョン管理編
SVNの場合はGitを特に使う必要はないですが、ファイル整理のためにもGitで管理すると良いと思います。差分の確認もより簡単です。
これ以上よい記事はないかと思うので、こちら参照ください。

[君には1時間でGitについて知ってもらう(with VSCode)｜Qiita](https://qiita.com/jesus_isao/items/63557eba36819faa4ad9)

先述もしましたが、必要なものは以下の通りです。

- [ソフトウェア：Git For Windows](https://gitforwindows.org/)
- 拡張機能：GitLens — Git supercharged

# 所感
業務でVSCodeを数ヶ月使用してきた中で「私はこうしています」というものを目的別にまとめました。最低限で設定するのが目標なので文字多めです。
無意識に設定やインストールしているものが多く、思い出しながら記述するのは大変でした。
備忘録を兼ねているので、書き足りなかったりした部分は随時追記します。