Edited at

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

追記(2018/11/09)

・オススメ拡張機能に"bracket pair colorizer"を追加


VSCode導入のきっかけ

NetBeansが重すぎる(憤怒)

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

MacBook先輩「イキスギィ!」



PCが重くなってるはっきり分かんだね

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

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

全てはチャンス!(レ)


拡張機能

VSCodeはバニラでもそこそこ美味しいが、豊富な拡張機能を好みに合わせて足していくのが良いようだ。

以降で自分が行ったオススメの拡張機能を紹介するが、拡張機能のインストールは基本的には以下の手順で実施する。

command + shift + Pを押下すると、VSCodeの各種機能への検索・アクセスが行える。

「Extension」でも入力すれば、Install Extensionという項目が出てくるため、押下。

表示されたウィンドウの検索バーにインストールしたい拡張機能の名前を検索すれば出てくるので、あとは適当にちゃちゃちゃっとやってオワリッ!


おすすめ拡張機能


Japanese Language Pack for Visual Studio Basic

VSCodeの日本語化を行う拡張機能

スクリーンショット 2018-11-08 18.00.34.png

日本語化プラグインが提供されているのに、日本語化しないなんて私には理解に苦しむね(ペチペチ)

インストール後、日本語化する手順は以下のサイトを見ろよ見ろよ

参考サイト:http://www.atmarkit.co.jp/ait/articles/1805/18/news032.html


Visual Studio Code Setting Sync

VSCodeの設定、拡張機能を自身のGithubに保存してくれる拡張機能

スクリーンショット 2018-11-08 16.24.52.png

一度セットアップしたVSCodeを別の環境で再度構築するときにこの機能を利用すれば、すぐに同じ環境が再現できる。

設定変更時に自動で設定をアップロードするようにしておくと、なおよし。

結構設定がめんどくさいけど、下のサイトを見ろよ見ろよ

参考サイト:https://www.lisz-works.com/entry/vscode-setting-sync


VSCode-icons

アイコンをリッチに

スクリーンショット 2018-11-08 17.40.33.png

ぱっと見て何のファイルか分かりやすくしてくれる神機能




右が適用後


jumpy

エディタのカーソルをすぐに違う箇所にジャンプさせる

スクリーンショット 2018-11-08 17.48.30.png

jumpy.gif

表示された二文字のアルファベットを入力した地点にジャンプする

インストールしただけでは機能しないため、キーボードショートカットでjumpyの起動ショトカを登録する必要あり。

shift + jで起動するようにしていいゾ〜これ


TrailingSpaces

末尾の空白がわかるようにマーキングしてくれる

スクリーンショット 2018-11-08 17.53.32.png

いつの間にかに紛れ込んで、気が付かずにコミットして変な差分が出たりするのもう許せんぞオイ!


Path Intellisense

パスを書く場面で、インテリセンスで表示してくれる

スクリーンショット 2018-11-08 15.09.06.png

スクリーンショット 2018-11-08 15.13.09.png

候補が表示される

ファイル名が一文字間違えたりしてて、画像を読み込まなかったりすることがあるのを防止できるのいいゾ〜。


REST Client

VSCode上でHTTPリクエストとレスポンス確認が可能に

スクリーンショット 2018-11-08 17.57.01.png

REST APIの開発時とか、テストするときcurlを叩いてたけど、あ〜いいっすね〜。

参考サイト:https://qiita.com/toshi0607/items/c4440d3fbfa72eac840c


sftp

VSCode上でsftpができるように

スクリーンショット 2018-11-08 17.58.16.png

NetBeansには標準でついてた機能なだけにないと、ストレスがマッハ。

設定とか使い方は下のサイトを見ろよ見ろよ。

参考サイト:http://westhillworker.com/vsc-sftp/


GitLens

VSCodeのGitの色々な機能を便利に

スクリーンショット 2018-11-08 15.19.09.png

VSCodeは標準でも、GitをサポートされているがGitクライアントと比べたら少し弱いので。

Gitのhisotryが見れるようになったり、ファイルの行毎にいつコミットされたのかが表示されたり...。

使える機能は下のサイトを見ろよ見ろよ。

参考サイト:https://kakkoyakakko2.hatenablog.com/entry/2018/07/19/003000


bracket pair colorizer

コードブロックを色分け

スクリーンショット 2018-11-09 15.34.10.png

コメントでangeart兄貴に教えてもらった拡張機能ですゾ。

1.png

こんな感じでコードブロックが色分けされて分かりやすくなる

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

angeart兄貴ありがとナス!


おまとめ

軽すぎぃ!!!

もっと早く乗り換えればよかったもぉぉぉん

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