【MacOSX】VSCode導入とカスタマイズメモ

<img src="https://qiita-image-store.s3.amazonaws.com/0/312085/7eb28878-7eef-f396-97e3-8d568cfea10f.png" width=75%>

**追記(2018/11/09)**
・オススメ拡張機能に**"bracket pair colorizer"**を追加

# VSCode導入のきっかけ
**NetBeansが重すぎる(憤怒)**
常にわからないことを検索しているクソ雑魚ナメクジエンジニアである僕はMacbookAir(メモリ4GB)でブラウザを開きながら、NetBeansで開発をしようとするのだが

**MacBook先輩「イキスギィ！」**
<img src="https://qiita-image-store.s3.amazonaws.com/0/312085/bedf9e8a-1319-8260-c232-0b147f74fbd5.jpeg" width=30%>
<font color="Silver">PCが重くなってるはっきり分かんだね</font>

これまでIDEはなんとなくNetBeansを使っていたが、**これはもう...許せへんし(カーリー)**

色々調べてみると、**Visual Studio Code**(以降VSCode)というエディタが軽量でIDE並に頑張ってくれるそうなので、乗り換えることに。
**全てはチャンス！(レ)**

#拡張機能

VSCodeはバニラでもそこそこ美味しいが、豊富な拡張機能を好みに合わせて足していくのが良いようだ。
以降で自分が行ったオススメの拡張機能を紹介するが、拡張機能のインストールは基本的には以下の手順で実施する。

command + shift + Pを押下すると、VSCodeの各種機能への検索・アクセスが行える。
「Extension」でも入力すれば、Install Extensionという項目が出てくるため、押下。
表示されたウィンドウの検索バーにインストールしたい拡張機能の名前を検索すれば出てくるので、あとは適当にちゃちゃちゃっとやってオワリッ！

#おすすめ拡張機能
###<font color="DarkCyan">Japanese Language Pack for Visual Studio Basic</font>
**VSCodeの日本語化を行う拡張機能**
![スクリーンショット 2018-11-08 18.00.34.png](https://qiita-image-store.s3.amazonaws.com/0/312085/1a392331-169e-f4dd-791b-398464fad4c7.png)
日本語化プラグインが提供されているのに、日本語化しないなんて私には理解に苦しむね(ﾍﾟﾁﾍﾟﾁ)
インストール後、日本語化する手順は以下のサイトを見ろよ見ろよ
参考サイト:http://www.atmarkit.co.jp/ait/articles/1805/18/news032.html

###<font color="DarkCyan">Visual Studio Code Setting Sync</font>
**VSCodeの設定、拡張機能を自身のGithubに保存してくれる拡張機能**
![スクリーンショット 2018-11-08 16.24.52.png](https://qiita-image-store.s3.amazonaws.com/0/312085/a52413f6-2dc0-f775-56da-a21e5500f676.png)
一度セットアップしたVSCodeを別の環境で再度構築するときにこの機能を利用すれば、すぐに同じ環境が再現できる。
設定変更時に自動で設定をアップロードするようにしておくと、なおよし。
結構設定がめんどくさいけど、下のサイトを見ろよ見ろよ
参考サイト:https://www.lisz-works.com/entry/vscode-setting-sync

###<font color="DarkCyan">VSCode-icons</font>
**アイコンをリッチに**
![スクリーンショット 2018-11-08 17.40.33.png](https://qiita-image-store.s3.amazonaws.com/0/312085/48555e09-b4ab-568a-b207-0726e0c5deb6.png)
ぱっと見て何のファイルか分かりやすくしてくれる神機能

<div align="center">
<img src="https://qiita-image-store.s3.amazonaws.com/0/312085/fdc57689-9ffc-676a-bb69-c9cd32c70024.png" "before" height="400px">
<img src="https://qiita-image-store.s3.amazonaws.com/0/312085/f191089a-9cc6-7451-9466-12ed9f532af8.png" "after" height="400px">
</div>
<font color="Silver">右が適用後</font>

###<font color="DarkCyan">jumpy</font>
**エディタのカーソルをすぐに違う箇所にジャンプさせる**
![スクリーンショット 2018-11-08 17.48.30.png](https://qiita-image-store.s3.amazonaws.com/0/312085/aa6df09f-0042-1178-4f45-94f882f3da9d.png)
![jumpy.gif](https://qiita-image-store.s3.amazonaws.com/0/312085/10503e3b-8df4-d3cb-658f-8bb6586e997a.gif)
<font color="Silver">表示された二文字のアルファベットを入力した地点にジャンプする</font>

インストールしただけでは機能しないため、キーボードショートカットでjumpyの起動ショトカを登録する必要あり。
shift + jで起動するようにしていいゾ〜これ

###<font color="DarkCyan">TrailingSpaces</font>
**末尾の空白がわかるようにマーキングしてくれる**
![スクリーンショット 2018-11-08 17.53.32.png](https://qiita-image-store.s3.amazonaws.com/0/312085/68ecd7c1-f916-d58f-6f80-712019fe1eef.png)
いつの間にかに紛れ込んで、気が付かずにコミットして変な差分が出たりするのもう許せんぞオイ！

###<font color="DarkCyan">Path Intellisense</font>
**パスを書く場面で、インテリセンスで表示してくれる**
![スクリーンショット 2018-11-08 15.09.06.png](https://qiita-image-store.s3.amazonaws.com/0/312085/d7dd9975-4aaf-b6b4-6529-7d6260f52b6b.png)
![スクリーンショット 2018-11-08 15.13.09.png](https://qiita-image-store.s3.amazonaws.com/0/312085/9fe1b9ff-e162-b59e-c2a6-fdfef64603dd.png)
<font color="Silver">候補が表示される</font>
ファイル名が一文字間違えたりしてて、画像を読み込まなかったりすることがあるのを防止できるのいいゾ〜。

###<font color="DarkCyan">REST Client</font>
**VSCode上でHTTPリクエストとレスポンス確認が可能に**
![スクリーンショット 2018-11-08 17.57.01.png](https://qiita-image-store.s3.amazonaws.com/0/312085/55d74c67-c5cc-0c5d-2870-359d4932e30b.png)
REST APIの開発時とか、テストするときcurlを叩いてたけど、あ〜いいっすね〜。
参考サイト:https://qiita.com/toshi0607/items/c4440d3fbfa72eac840c

###<font color="DarkCyan">sftp</font>
**VSCode上でsftpができるように**
![スクリーンショット 2018-11-08 17.58.16.png](https://qiita-image-store.s3.amazonaws.com/0/312085/9e6fea73-5481-7e9e-b239-ac6e9e823fcc.png)
NetBeansには標準でついてた機能なだけにないと、ストレスがマッハ。
設定とか使い方は下のサイトを見ろよ見ろよ。
参考サイト:http://westhillworker.com/vsc-sftp/

###<font color="DarkCyan">GitLens</font>
**VSCodeのGitの色々な機能を便利に**
![スクリーンショット 2018-11-08 15.19.09.png](https://qiita-image-store.s3.amazonaws.com/0/312085/ca227b49-a38c-5bd3-b1c9-c21bb6e05ccb.png)
VSCodeは標準でも、GitをサポートされているがGitクライアントと比べたら少し弱いので。
Gitのhisotryが見れるようになったり、ファイルの行毎にいつコミットされたのかが表示されたり...。
使える機能は下のサイトを見ろよ見ろよ。
参考サイト:https://kakkoyakakko2.hatenablog.com/entry/2018/07/19/003000

###<font color="DarkCyan">bracket pair colorizer</font>
**コードブロックを色分け**
![スクリーンショット 2018-11-09 15.34.10.png](https://qiita-image-store.s3.amazonaws.com/0/312085/c0b08d79-92bf-5324-55d5-a404781a71e3.png)
コメントでangeart兄貴に教えてもらった拡張機能ですゾ。
![１.png](https://qiita-image-store.s3.amazonaws.com/0/312085/124de1f6-e35d-adb2-53ec-13dae0c55215.png)
<font color="Silver">こんな感じでコードブロックが色分けされて分かりやすくなる</font>

ずーっとコード見てるとこれもう分かんねぇな(迷子)になりがちなので、すっげーありがたいゾ〜。
angeart兄貴ありがとナス！

#おまとめ
<h3>軽すぎぃ！！！</h3>
もっと早く乗り換えればよかったもぉぉぉん

これからRuby書いてみようと思うので、Ruby周りの便利な拡張機能があれば、追記しますよ〜するする。