見出し画像

VSCodeを自分が使いやすいよういい感じにした道のり

Play Technologies

こんにちは。プレテクのchidakiyoです。

ここ数年、ずっとコードを書くときはIntelliJを利用していましたが、直近でTypeScriptを書く必要があり、なんかTypeScriptを書いてる人はみんなVSCodeを利用してるんじゃない？と思ったのでちょっと改宗してみようと思ったのでメモです。

ちなみに、感想としては依然やはりIntelliJにはIntelliJの良さがあるな、とおもいつつ、まぁなんとかスタンダード的なVSCode使えるようになってきたかな、という感じです。
正直言うとめちゃくちゃ苦労しました。。

では入れていったプラグインをダーっと羅列していきます。

ファイル一覧のインデントが浅いので深くする

  • エディタの左下の歯車マーク `Manage` を選択する

  • `Settings` を選択する

  • 検索窓に `workbench.tree.indent` と入力する

  • 初期値が多分 `8` ぐらいなので自分の場合は一旦 `15` ぐらいにしてみた

vscode-icons プラグインの追加

ファイルツリーのアイコンを綺麗にビジュアライズしてくれるプラグイン。
ファイルツリーが見やすくなったような気がするが、ただなんとなく色味は好きな感じではないかな。

indent-rainbow プラグインの追加

インデントを虹色に強調してくれるプラグイン。
ネストが深いと虹色になって気持ち悪くなるという作用があるので、インデント深くしないようにするという矯正力がありそう（適当）

Bracket の有効化（標準機能）

  • エディタの左下の歯車マーク `Manage` を選択する

  • `Settings` を選択する

  • 検索窓に `bracket` と入力する

  • `Editor > guides: Bracket Pairs` がdefaultではfalseになっているので、 `active` にする。

括弧の対応がちょっと豪華な表示でわかるようになる設定だが、表示がちょっとうるさいのでもしかすると将来的には無効化するかもしれない。
一旦試しにON.

TODO Highlight プラグインの追加

コードにTODOと書いたところをハイライトしてくれる。
適当にTODOしちゃうので気づきやすいように入れてみた。IntelliJだと標準でこういうのあるので。

困ったところは、MarkdownのテキストなどもTODOと書くとハイライトされてしまうこと。
テキストファイルでのTODO管理する場合にちょっと困る。

TODO Tree プラグインの追加

TODO Highlightプラグインを入れたならTODOを一覧化できるプラグインもあったほうが良さそうなので入れてみた。
IntelliJだとこれも標準であったはず。

Git Graph プラグインの追加

なんとなく入れてみた。
普段はSourceTree使ってる。

GitLens プラグインの追加

ファイルを誰がコミットしたかとかとかそのコミットのコメントなどが見えるようになる。
IntelliJだとgit blameのannotation機能みたいな感じかな。まだちゃんと使ってない。

Auto Close Tag、Auto Rename Tag 相当の機能を有効化する（標準機能）

Auto Close Tag、Auto Rename Tag というプラグインもあるようだが、今は標準機能で対応できるっぽいのでその方法で設定する。

  • エディタの左下の歯車マーク `Manage` を選択する

  • `Settings` を選択する

  • 検索窓に以下を入力して全て有効化する。

`editor.linkedEditing`
`html.autoClosingTags`
`javascript.autoClosingTags`
`typescript.autoClosingTags`

自分の環境では下の3つはデフォルトで有効になっていた気がする。

Rainbow CSV プラグインの追加

CSVファイルを使うことなんてないだろ、って気持ちもありながら、悲しいことにCSVを結構触ることがありそうなので入れておいた。

HTML CSS Support プラグインの追加

classとかIDとかを保管してくれるらしい。
よくわかんないので助けてくれるのは嬉しいですね。

JavaScript (ES6) code snippets プラグインの追加

これもよくわからないので助けてくれるのは嬉しい。

ES7+ React/Redux/React-Native snippets プラグインの追加

これはすでにインストール済みだった。
スニペットのショートカットとかあって便利なやつ。

Material Icon Theme プラグインの追加

これも入れてみたので、切り替えつつ使ってみたい


最後に

こんな感じで色々入れた環境でコードをもりもり書いています。
まだそんなに長期間書いてないのでまだ設定した良さもわかってない部分もあるので今後まだまだ更新されていきそうです。

もし、こんなプラグイン入れたほうがいいよーという情報があれば大大大歓迎ですのでコメントでもDMでもなんでもください。（溺れる者）

ではまた次回をおたのしみに..