Visual Studio Code のおすすめ拡張機能と設定値(2018/3 版 随時更新)

# <i class="fa fa-map-marker"></i> 前書き
　Atom でも Kobito でもなく、Visual Studio Code を使っています。比較的軽量なのと、Visual Studio (2005) で開発をしていたこともあり UI がなじみます。**あと Markdown で書けるので好きです。**
![image](https://qiita-image-store.s3.amazonaws.com/0/130874/17340b5c-1d78-9652-04c7-c26079b32e37.png)

　ここには設定値と、インストールしているおすすめな拡張機能を書いておきます。

# <i class="fa fa-cog"></i> ユーザ設定
　Windows のデフォルトではここ。json 形式です。

` C:\Users\USERNAME\AppData\Roaming\Code\User\settings.json `

　すべての設定値、および設定値変更、およびすべての設定値はこちらで確認できます。

- ファイル
    - 基本設定
        - ユーザ設定

　こんな設定をいれています。

```settings.json
// 既定の設定を上書きするには、このファイル内に設定を挿入します
{
        // 認証プロキシ設定
        "http.proxy": "http://USERNAME:PASSWORD@PROXYSERVER:8080",
        // シンタックスハイライトの判定を追加
        "files.associations": 
        {
            "*.txt": "markdown",
            "*.json.txt": "json"
        },
        // 空白文字列の表示
        "editor.renderWhitespace": true,
        // ウィンドウサイズで折り返し
        "editor.wordWrap": true,
        // Bash on Ubuntu on Windows on Visual Studio Code (Windows 10 only)
        "terminal.integrated.shell.windows": "C:\\Windows\\sysnative\\bash.exe",
        "termnial.integrated.shell.unixlike": "bash.exe",
        // 文字コードの自動認識
        "files.autoGuessEncoding": true, 
        ...
```

# <i class="fa fa-terminal"></i> Bash on Ubuntu on Windows on Visual Studio Code (Windows 10 only)
　Windows 10 限定になりますが、上記の settings.json では cmd.exe を bash.exe に差し替える設定をいれています。Ctrl + @ で開くコンソールで bash を実行することができます。

![image](https://qiita-image-store.s3.amazonaws.com/0/130874/e19389ca-b214-8130-4eb1-5ed94708db6d.png)

# <i class="fa fa-cogs"></i> 拡張機能
## [vscode-icons](https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons)

![image](https://qiita-image-store.s3.amazonaws.com/0/130874/fd8f8014-6b86-51af-9967-e7d515e42e25.png)
　エクスプローラメニューはもともとシンプルなツリー表示しかできないのですが、それにカラーアイコンを付ける拡張です。Atom にも同様のがありましたね。
### 追記
　コメント欄でおしえて頂きました、[File Icon Theme](https://code.visualstudio.com/blogs/2016/09/08/icon-themes) 機能でアイコン変更の機能は既に実装されていました。上記拡張の人気がすごいので標準機能に入れたそうな。デフォルトでは「Minimal」「Seti」の2パターン設定可能でした。

![image](https://qiita-image-store.s3.amazonaws.com/0/130874/43c99365-89cc-93dd-265b-9f2197b4ada0.png)　![image](https://qiita-image-store.s3.amazonaws.com/0/130874/4b154722-2cba-96ca-d201-dfb38c0098f5.png)
　[Marketpace](https://marketplace.visualstudio.com/search?term=tag%3Aicon-theme&target=VSCode&sortBy=Relevance) から、テーマの追加も可能でした。ユーザ設定ファイル(settings.json)で指定することはいまのところできないようです。

## [Insert Date String](https://marketplace.visualstudio.com/items?itemName=jsynowiec.vscode-insertdatestring)
![image](https://qiita-image-store.s3.amazonaws.com/0/130874/76cdace2-8213-1b71-a96d-2a253e697c0c.png)
　Ctrl + Shift + I で 日付「2016-09-29 13:10:07」とかを入れる(だけ)の機能です。一番使うかもしれません。

## [encdetect jp](https://marketplace.visualstudio.com/items?itemName=inoueben.encdetectjp)
![image](https://qiita-image-store.s3.amazonaws.com/0/130874/055cd06f-a8f1-4715-7f22-0f5a119c3a00.png)
　日本語の文字コードを自動判定して警告を出してくれるものです。SJIS がよく化けるんですがデフォルト文字コードをSJISにするのも嫌ですよね。

## [REST Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client)
![image](https://qiita-image-store.s3.amazonaws.com/0/130874/f29e23f6-2b10-cba8-ffeb-97188ad128c2.png)
　REST API の呼び出しがサクっとできます。開発に使います。

## [Local History](https://marketplace.visualstudio.com/items?itemName=xyz.local-history)
![image](https://qiita-image-store.s3.amazonaws.com/0/130874/906fdf13-ea8c-651c-aa62-53ca976963c7.png)
　保存ファイルを世代管理するもの。適当にバックアップしてくれます。

## [Prettify JSON - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=mohsen1.prettify-json)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/130874/7a0d6ba3-230b-5961-5d33-709dfc3c8a5e.png)
JSON を整形してくれます。

## [Python - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ms-python.python)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/130874/c348704d-5a62-de7f-a369-10eb60994a27.png)


Python デバッグのお供に。

## [PowerShell - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ms-vscode.PowerShell)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/130874/464b4eea-4350-5b81-f9d1-322f6166d12e.png)
PowerShellデバッグのお供に。

## [Prettier - Code formatter - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/130874/189e2f6b-5022-b474-d41b-6650c62c88cb.png)

## [zenkaku - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/130874/17da63c5-48cf-667f-9b64-8a2411c9a10d.png)
全角スペースを強調表示してくれる、地味に便利。

## [Power Mode - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-power-mode)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/130874/693bc36f-bc92-8811-66e0-9bc573574b5f.png)
カタカタッターンしたくなるやつ。

## [Visual Studio Code Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)
![image](https://qiita-image-store.s3.amazonaws.com/0/130874/718d1e8c-c6e8-1865-e093-1e2236be76e8.png)
　Visual Studio Code の設定を GIST 経由で同期するもの。Atomでも同様のものがありますね。

# <i class="fa fa-warning"></i> わけあって使えなかった拡張機能

## [Vim - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=vscodevim.vim)
![image](https://qiita-image-store.s3.amazonaws.com/0/130874/c28a94e9-797b-1f8c-8b15-59afbac4fcc7.png)
　Vimmer じゃないので紹介だけ。


# <i class="fa fa-external-link"></i> 参考文献
[![image](https://qiita-image-store.s3.amazonaws.com/0/130874/c38175be-c050-b9c9-6adc-4597e2b98e7e.png)
はじめてのVisual Studio Code (I・O BOOKS) : 清水 美樹 : 本 : Amazon.co.jp](https://www.amazon.co.jp/dp/4777519481?tag=qiitak-22)
　日本語書籍がありましたが、初心者向けの本でした。ほかのエディタを使いこなしていたことがある方には向かないので、以下を見てショートカットキーとカスタマイズ方法を覚えたほうがよいです。

- [Visual Studio Code Key Bindings](https://code.visualstudio.com/docs/customization/keybindings)
- [Visual Studio Code User and Workspace Settings](https://code.visualstudio.com/Docs/customization/userandworkspace)
- [Customize Visual Studio Code](https://code.visualstudio.com/docs/customization/overview)

## <i class="fa fa-external-link"></i> 参考リンク
　設定変更方法(settings.json)、ショートカットキーいくつか、コマンドパレットの開き方（Ctrl+Shift+P）、コマンドプロンプト（Ctrl+@）、拡張機能インストール方法、だけ覚えればなんとかなります。

- 設定の変更方法はこちら
    - [時代を先取り！「Visual Studio Code」のカスタマイズ方法 | MONSTER DIVE【モンスターダイブ】](http://www.monster-dive.com/blog/web_creative/20160115_001432.php)
- ショートカットキーの解説はこちら、必要なものだけ覚えればよいと思います。
    - [【Windows版】VS Code キーボードショートカット一覧 （オススメ付き） - Qiita](http://qiita.com/TakahiRoyte/items/cdab6fca64da386a690b)
    - [【Mac版】 VisualStudioCode キーボードショートカット - Qiita](http://qiita.com/naru0504/items/99495c4482cd158ddca8)
- 拡張機能のインストールはこちら
    - [特集：Visual Studio Code早分かりガイド：Visual Studio Codeの拡張機能を使ってみよう (1/2) - ＠IT](http://www.atmarkit.co.jp/ait/articles/1511/27/news029.html)
    - [特集：Visual Studio Code早分かりガイド：Visual Studio Codeのおすすめ拡張機能 (1/3) - ＠IT](http://www.atmarkit.co.jp/ait/articles/1606/22/news044.html)
- VSCode + Markdown
    - [Visual Studio Code を Markdown プレビュー付きエディタとして使う - Qiita](http://qiita.com/akira6592/items/da5271a4987eab2c7a5a)
    - [Visual Studio Code を使って Markdown のプレビュー - Qiita](http://qiita.com/poemn/items/8094c04bba86bd4fbe54)
- その他読み物
    - [第2回 Qiita プライド: Atom 対 Brackets 対 Lime Text 対 Visual Studio Code - Qiita](http://qiita.com/raccy/items/50c176d0458e0c686970)
    - [MicrosoftのVisualStudioCodeがオープンソースになったので使ってみた - Qiita](http://qiita.com/naru0504/items/9a16b50f7425727b66cd)
- Bash
    - [Windows10とBashとVisual Studio Codeで整えるChef Cookbook開発環境 - Qiita](http://qiita.com/anikundesu/items/a2a442008c0287d0393d)

（以上）