VScode オススメ設定

# はじめに
エディターは種類が豊富だが、私はVSCodeが一番使いやすいと感じている
VSCode の布教も兼ねて、初心者向けに VSCode を快適に使える設定と拡張機能をまとめておく
見つけ次第、良さそうなのを追記していく予定

#0 準備編

VSCodeはここの [公式サイト](https://code.visualstudio.com/) でダウンロードできる
プログラミングする上では見やすいフォントも大事
[Programing Fonts](https://www.programmingfonts.org/) では、紛らわしい文字も比較しながら探せるからオススメ
お気に入り: [Fantasque Sans Mono](https://www.programmingfonts.org/#fantasque-sans)

#1 設定編

設定は、GUI での設定画面もあるが、 `settings.json` に直接書き込むことで詳細な設定ができるようになる
`F1` キーを押すと検索画面 (コマンドパレット) が出てくるので、そこで `Open Settings (JSON)` を開く 
　　注) mac では `fn` キーを押しながらでないと反応しない
<img width="605" alt="スクリーンショット 2020-07-10 11.27.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669543/d2299375-5bdd-439d-d5bd-4d666c20d4a0.png">

ひとまずオススメ設定は以下のとおりです

　　注) フォントの設定は、1番目から順に適用される 
　　　　(1番目に無い文字なら、2番目、3番目...のフォントが適用される)
　　　　→ お気に入りのフォントを1番目にしておくと良い 
　　　　　(日本語非対応のフォントでも、後ろに日本語をおけばOK)


```JSON:settings.json
{
    //パンくずの設定
    "breadcrumbs.enabled": true,
    "breadcrumbs.icons": true,
    "breadcrumbs.filePath": "last",

    //ターミナルの設定
    "terminal.integrated.fontSize": 16,
    "terminal.integrated.copyOnSelection": true, //ターミナルの文字列の選択範囲を自動コピー<img width="1071" alt="スクリーンショット 2020-07-10 11.59.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669543/583fb24d-a889-7453-f647-9f2f444eee1e.png">


    //マークダウンの設定
    "markdown.preview.fontFamily": "'Fantasque Sans Mono', -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', 'Ubuntu', 'Droid Sans', sans-serif", 
    "markdown.preview.fontSize": 18,


    //エディターの設定
    "editor.fontFamily": "'Fantasque Sans Mono', Consolas, 'Courier New', monospace",
    "editor.fontSize": 18,
    "editor.fontLigatures": true,
    "editor.renderControlCharacters": true, // 制御文字を表示
    "editor.renderIndentGuides": true,
    "editor.suggestSelection": "recentlyUsedByPrefix",
    "editor.acceptSuggestionOnEnter": "off",
    "editor.renderLineHighlight": "all", // 選択行を行番号含めすべてハイライト
    "editor.formatOnPaste": true, // ペースト時に自動でフォーマット
    "editor.formatOnType": true, // 入力した行を自動でフォーマット
    "editor.snippetSuggestions": "inline", // Emmet などのスニペット候補を優先して表示
    "editor.wordWrap": "off", // エディターの幅で折り返し
    "editor.minimap.enabled": false, //ミニマップの表示
    "editor.highlightActiveIndentGuide": true, //インデントの強調表示

    //Emmetの設定
    "emmet.showSuggestionsAsSnippets": true, // Emmet などのスニペット候補を優先して表示
    "emmet.triggerExpansionOnTab": true, // TAB キーで Emmet を展開
    "emmet.variables": {"lang": "ja"}, // Emmet で展開される HTML の言語を指定


    "html.format.wrapLineLength": 0, //行の文字数制限（0で自動改行無効）

    //ワークベンチの設定
    "workbench.editor.enablePreview": false, //タブの上書き
    "workbench.tree.renderIndentGuides": "always",
    "workbench.view.alwaysShowHeaderActions": true,
    "workbench.editor.tabSizing": "shrink",// タブの表示設定
    "workbench.editor.labelFormat": "short", // タブに表示する文字列の設定
    "workbench.activityBar.visible": true,


    "zenMode.hideActivityBar": false, //禅モード時のアクティビティバー表示(間違えて入ったときに助かる)

  
    "window.title": "${activeEditorMedium}${separator}${rootName}", // ウインドウ上部に表示する文字列の設定
    "window.zoomLevel": 0,


    //保存時の動作設定
    "files.trimFinalNewlines": true, // ファイルの保存時に最終行以降を削除
    "files.trimTrailingWhitespace": true, // ファイルの保存時に行末の空白を削除
　　"files.insertFinalNewline": true, // ファイルの保存時に最終行に改行を追加

    "[markdown]": {"files.trimTrailingWhitespace": false}, // Markdown のファイルは行末の空白を削除しない


    "diffEditor.renderSideBySide": true, // Git の差分を行内に表示

}
```



#2 拡張機能編
マーケットプレイスにいろんな拡張機能がアップされているので、便利なものを並べておく
VSCode の画面左端の、□が4つ並んだマークのところで拡張機能を管理できる

<img width="214" alt="market" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669543/43638ad2-d4bf-0001-cfda-8895fabc2e97.png">


##2-1 とにかく入れた方がいいもの

- [Japanese Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)

<img width="999" alt="Japanese Language Pack for Visual Studio Code" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669543/de678538-c9b9-fbb0-de0a-7f48633a62c9.png">

これは必須
だって日本人だもの...
英語だと疲れる


**日本語化のやり方**
インストール完了後、locale.jsonで `"locale": "ja"` とする必要がある
再び `F1` キーでコマンドパレットを開き、  `display` を選択
<img width="596" alt="display" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669543/918c15bc-4bed-c102-cc33-a6737a762a13.png">

<img width="602" alt="Configure Display Language" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669543/ba37e895-0593-657a-d239-ae0a4df899e0.png">

ここで `ja` を選択し、再起動するか聞かれるので `Restart` をする

---

- [Visual Studio IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)

<img width="736" alt="Visual Studio IntelliCode" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669543/0b7d7534-7be9-4e27-c2ce-915e5f9c3a45.png">

AI?による入力予測を出してくれる
めちゃくちゃ便利
一度慣れたら、他のエディタが使えない体になってしまう...

---

- [Bracket Pair Color 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)

<img width="752" alt="Bracket Pair Color 2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669543/9d8c7a67-5342-d543-96bc-e99580331acd.png">

カッコを自動でカラーにしてくれる
めっちゃ見やすくなる
設定で色もカスタマイズ可能

---

- [Indicator](https://marketplace.visualstudio.com/items?itemName=SirTori.indenticator)

<img width="597" alt="Indenticator" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669543/b35489ff-186a-5ec6-bf5e-abbdf4aa2de5.png">

インデント(スペース)を見えるようにできる
Pythonとかのインデントが重要なの言語で大活躍する

設定編 で編集した `settings.json` に下記を追加

```JSON:settings.json
    "indenticator.showHighlight": true,
    "indenticator.inner.showHover": true,
```

---

- [Output Colorizer](https://marketplace.visualstudio.com/items?itemName=IBM.output-colorizer)

<img width="665" alt="Output Colorizer" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669543/62171ad8-71c0-2cb4-5d9d-5b875e2b469a.png">

OUTPUT を色分けしてくれる
かなり見やすくなるから便利

---

- [vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)

<img width="814" alt="vscode-icons" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669543/9895ac4b-dfe9-2eee-6015-9bef97e67a3c.png">
ファイルとかフォルダをアイコン化し、エクスプローラ風にしてくれる

---

- [Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)


<img alt="スクリーンショット 2020-07-10 12.00.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669543/b3e906d6-3dd3-09f4-fd9c-5ba07b0b8147.png">

GitHub Gist で自分の VSCode の設定 (拡張機能も) を保存できる
複数台のPCを使うときだけでなく、機種変更 (PCでも言うのかは分からないが) でも設定をそのまま引き継げる

[GitHub](https://github.com/) は、作ったプログラムをアップするブログのようなもの
他の人の書いたものに、修正依頼するだけでなく自分で改訂版を上げれたりする
プログラミングをするならアカウントを持っていた方がいい

設定編 で編集した `settings.json` に下記コードを追加

```JSON:settings.json
    "sync.gist": "自分のGistコード",
    "sync.autoUpload": true, //変更を自動でアップロード
    "sync.forceUpload": false, //強制アップロード
    "sync.syncExtensions": true,  //拡張機能の保存
    "sync.removeExtensions": false,
    "sync.autoDownload": false, //設定の自動ダウンロード
    "sync.forceDownload": false, //強制ダウンロード
    "sync.quietSync": false, //同期の通知オフ
```


##2-2 あると便利なもの

###2-2-1 Python 使う人向け
- [Python](https://marketplace.visualstudio.com/items?itemName=ms-python.python)

<img width="1059" alt="Pylance" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669543/84a91f8e-dae3-0e91-60fc-2798350e429a.png">

インタプリタのバージョン選択や、実行をGUIでできるので初心者にもおすすめ
もちろんコマンドパレットからでも

---

- [Pylance](https://marketplace.visualstudio.com/items?itemName=ms-python.vscode-pylance)

<img width="1059" alt="Pylance" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669543/7e9037bc-b8dd-28bb-9d71-51ff4cb3090a.png">

Pythonの言語サポート
宣伝通り、予測もすぐ出てくる
宣言・インポート後、使っていない変数やライブラリは暗い色に変えて教えてくれる。
上のPythonのインストールが必須

---

###2-2-2 リモート (WSLとか) をやる人向け

- [Remote Development](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack)

<img width="1059" alt="Remote Development" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669543/f58f8b4c-f772-3eb9-caab-c41fe0118f7d.png">

VSCode で直接、リモート作業できるようになる
むしろ、リモートには必須
WSL には最適化されてるから使いやすい

　　注) 軽く調べたところ VM を接続先サーバで立ち上げることで操作する模様(たぶん)
　　　　接続先によっては使えない場合も...

---

###2-2-3 グループワークする人むけ
- [Live Share Extension Pack](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)

<img width="619" alt="Live Share Extension Pack" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669543/11d4bca4-79b8-2019-9a33-426463f2d9fe.png">

GitHubもしくはMicrosoftアカウントでログインすると、共同ワークスペースが作れる
デフォルトでは鯖主となる人がVSCodeで開いているディレクトリが作業スペースとなり、その中身はすべて公開される
また、入室?の承認機能もある
権限も色々いじれるようになっており、ターミナルの操作権限やファイルの閲覧権限も変えれるとか
テキストチャットチャンネルがあったり、コードに直接コメント(コメントアウトではない)をつけれたりする

少し試してみたが、どうやら回線の強度もある程度はいるらしい
また初回時にはデータDLがあるため、少し時間を要する

関連する拡張機能を有効化すれば、ボイスチャットやホワイトボードが使えるようになるので会議もVSCodeだけで完結するようになる

- [Live Share Audio](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-audio) 
- [Live Share Whiteboard](https://marketplace.visualstudio.com/items?itemName=lostintangent.vsls-whiteboard)

など

---

###2-2-4 Web系とかやる人向け
- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

<img width="619" alt="Auto Rename Tag" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669543/b4a41fe6-485a-b824-4769-c8dc019224d2.png">

HTML, PHP, JavaScript, XML のタグを前後同時に変更してくれる。
あとからタグ変更するのがめっちゃラク
設定編 で編集した `settings.json` に下記を追加

```JSON:settings.json
"auto-rename-tag.activationOnLanguage": ["*"], //Auto Rename Tag の有効化
```

---

- [HTML Preview](https://marketplace.visualstudio.com/items?itemName=tht13.html-preview-vscode)

<img width="855" alt="HTML Preview" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669543/bd66b5fe-d08c-73c5-40e5-3218ef535b20.png">
<img width="1219" alt="スクリーンショット 2020-07-10 13.27.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669543/aee3f871-0f5f-3b73-8347-17e10428d27e.png">

リアルタイムでHTMLの結果を表示してくれる
ブラウザで何度もリロードする必要がなくなる
埋め込み外部サイトは表示できない？(やり方があれば知りたい)

###2-2-5 その他オススメなもの
- [Starbound JSON File Syntax](https://marketplace.visualstudio.com/items?itemName=KyleeTehKitty.StarboundJson)

<img width="693" alt="Starbound JSON File Syntax" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669543/004df6b5-66f9-755c-4f0e-e29458a62fd4.png">

JSON はイジる回数は少ないかもしれないが、あると助かる