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

この記事はなにか

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

対象者

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

目次

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

0.基本編

Visual Studio Code(VSCode)とはなにか
世界的なシェアが最も高いエディター¹のひとつです。
特徴は、豊富な設定項目や拡張機能があり多様なカスタマイズが可能なことです。

VSCodeのダウンロードはこちらから

先に日本語化をしておいたほうが良いと思うので順番前後しますが、
拡張機能をインストールしてVSCodeを日本語化しておきましょう。

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

重要ワード② ワークスペース
任意のディレクトリを好きな構成で配置でき、プロジェクト毎にまとめることができます。
ワークスペースという存在だけ覚えておきましょう²。

1.設定編

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

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

ファイルオープン時にエンコーディングを自動判別する
files.autoGuessEncodingをtrueに設定³。

補足：何を設定したかわからなくなったとき
設定を開き、右上のファイルのアイコンをクリックするとsetting.jsonというファイルが出てきます。
そこに変更した設定が記録されています。マウスオンをすれば説明が出てきます。

2.拡張機能編

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

VSCodeを日本語化する
Japanese Language Pack for Visual Studio Code
0.基本編で既出。日本語にならない、日本語⇔英語で切り替えたいときはこちら⁵。

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を実行すると、大文字・小文字・キャメルケース・ケバブケースのプレビューを確認してから変換できます⁸。

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**
↑これらについては後ほど説明します。

設定と拡張機能のインストールは完了です。お疲れさまでした。

これより下はショートカット集と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

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

• ソフトウェア：Git For Windows
• 拡張機能：GitLens — Git supercharged

所感

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

1. 2019年開発環境ランキング - Stack Overflow｜マイナビニュース ↩

2. vscodeの利用に必須な”ワークスペース”の概念｜今日も元気にIT屋さん ↩

3. VS Codeでエンコーディングを変更、自動判別するには｜＠IT
   　
   文字の拡大/縮小をより簡単にできるようにする
   Mouse Wheel Zoomの「Ctrl キーを押しながらマウス ホイールを使用してエディターのフォントをズームします。」をチェック⁴します。 ↩

4. VS Codeでフォントを拡大／縮小するには｜＠IT
   　
   TabキーでスペースではなくTabを挿入する
   Editor: Insert Spacesの「Tab キーを押すとスペースが挿入されます。」のチェックを外します。
   一時的に変更する場合は右下の「タブのサイズ」をクリックすれば変更が可能。
   ちなみに、デフォルトのサイズは4。設定のEditor: Tab Sizeで他のサイズに固定できます。
   （Rubyだとスペースでサイズ2のインデントが主流。社内やプロジェクトの規定に合わせましょう。） ↩

5. 【Visual Studio Code 入門】MacのVSCodeを日本語化する｜kitanote
   　
   最後尾のスペースを赤く表示する
   Trailing Spaces⁶ ↩

6. Visual Studio Codeの拡張機能「Trailing Spaces」でコードの中にある余計なスペースを表示する｜WebDesigner's Memorandum ウェブデザイナーの備忘録
   　
   アイコンをPOPな感じで見やすくする
   1.vscode-icons　←1番人気
   2.Material Icon Theme　←2番人気
   私はMaterial Icon Themeにしています。他にも色々ありそう⁷です。
   複数インストールした場合はActivateしたものが適用されます。 ↩

7. Visual Studio Code のファイルアイコンを変える｜Qiita
   　
   全角スペースをわかりやすく表示する
   zenkaku
   全角スペースがあった場合にそれを白く表示してくれます。 ↩

8. change-case｜Visual Studio Marketplace
   　
   ブックマーク（ラベル）をつけれるようにする
   Bookmarks
右クリック→Bookmarks:Toggle or Ctrl + Alt + Kでブックマークをつけたり外したりできます。
   あとで戻って参照するソースがある場合によく使用します。
   設定でBookmarks: Background Line Colorの色をrgba(238, 238, 0, 0.1)などに指定すると見やすくなります。
   
   　
   MarkDown記法でメモをとる
   VSNotes
   MarkDown記法でノートが取れます。
   初期設定が必要で、コマンドパレットVSNotes: run setupor 設定Default Note PathでPATHの設定をします。
   また、タイトルがDefault Note Titleで{title}_{dt}.{ext}とするとタイトルが前に日時が後にきて見やすいと思います。 ↩