とーますメモ

Ruby on Rails / Goなどの学習メモ

MacでVSCodeを使用してみた

公式サイトからダウンロードして解凍し起動。
以下が設定した内容

日本語化

拡張機能から「Japanese Language Pack for Visual Studio Code」をインストールし設定

配色

Atomのデフォルト配色である「One Dark」と同じものが使用したかったので
拡張機能から「One Dark Pro」という拡張機能をインストールして設定

Emmet

デフォルトでEmmetが使用できるようだが、
erb拡張子でEmmetを使用するには以下の設定が必要

1)設定 => 拡張機能 => Emmetを選択
2)Include Languagesより以下を設定

"emmet.includeLanguages": { "erb": "html", "ruby": "html"}

3)Trigger Expansion On Tabを有効化

以上で、キーワードを入力後、Tabを押せばEmmetが動作する。

How to configure Emmet in VS Code for erb files | by Nick Haralampopoulos | Medium

その他拡張機能

1)Ruby => Ruby言語をサポート
2)RailsとRuby on Rails => Railsをサポート
3)Rails DB Schema => DB Schemaに沿って、モデルのカラム名を補完
4)endwise => endを自動挿入
5)Material Icon Theme => ファイル毎に固有のアイコンを設定してくれる。vscode-iconsもあるが個人的にはこっちのほうが好み
6)Git Lens => 以前の状況との比較がしやすい
7)Git History => ログが読みやすい
8)TODO Highlight => TODOやFIXMEがハイライト表示される。
9)Rainbow CSV => CSVが列ごとに色付けされて、列がみやすくなる。

その他設定

・Tab size: 2を設定
・Render Whitespace: allを有効
・Trimで検索し「Trim Final Newlines」と「Trim Trailing Whitespace」を有効
・プロジェクト毎に色を付ける。
Visual Studio Codeエディタの色をプロジェクトごとに違うものにする - Qiita