窓を作っては壊していた人のブログ

この謎のブログタイトルの由来を知るものはもういないだろう

TypeScriptとScalaを書いてるWebエンジニアが使ってるVSCodeの拡張機能を一部晒す

普段はTypeScript+Reactでフロントエンドの開発をし、APIScala、インフラはAWSのサービスをTerraformで構成管理しているエンジニアです。

各レイヤーで割と使って価値を感じているものを自分が記憶をなくした時のために書き残しておきます。 こんなおすすめあるよ!みたいなのがありましたら、コメントやブコメや引用RTなどで色々投げてくれると喜びます。

フロントエンド

Debugger for Chrome

Debugger for Chrome - Visual Studio Marketplace

言わずもがなですね。 ChromeのDeveloper Toolsは割と狭かったり、その時に思いついたものをすぐに書いて反映みたいのが出来ないのでVSCodeで出来ると楽ってことで入れています。

Prettier - Code formatter

Prettier - Code formatter - Visual Studio Marketplace

とりあえずCode formatしたいなぁって時に、configなくてもいい感じになるってことで入れています。 最近はカッコの数合ってるかな、みたいな確認でformat on saveな状態で保存してフォーマットされれば構文はある程度正しいみたいなチェックにも使っています。

JavaScript and TypeScript Nightly

JavaScript and TypeScript Nightly - Visual Studio Marketplace

オススメ………は多分しないと思うのですが、最新のTypeScriptの構文を今すぐにでも補完とかで味わいたい!みたいな人にはぴったりです。 入れたキッカケは

teitoku-window.hatenablog.com

なのですが、これを入れて次のTSではこんな構文になるのか、みたいなのがわかるようになったので、最新の情報を追いやすくなりました。

API

前はScalaVSCodeである程度書いていたので入れていたので、ScalaのLanguage Serverをいい感じにするみたいな拡張を入れていたのですが最近はIntelliJをガッツリ使うみたいになったので消し去りました。 それでもAPIを叩くのに便利ってことで以下のものを入れています。

REST Client

REST Client - Visual Studio Marketplace

UIが出来上がっていないけど、雰囲気API書けた、UIからはこういうのを送りたいんだよなぁ〜みたいのが決まっている段階で重宝します。 普段はcurlでやっていますが、人に共有する時にこれ!って感じでファイルを渡せばGUIでポチポチ出来るので重宝しています。

インフラ

Terraform

Terraform - Visual Studio Marketplace

ある程度補完してくれたり、Lintっぽくなってたはずです(多分

YAML

YAML - Visual Studio Marketplace

docker-composeだったり、Circle CIの設定はyamlで書くので入れました。 ここは文字列だぞ!みたいに怒ってくれてます。 lint代わりに使ってる感じです。

Docker

Docker - Visual Studio Marketplace

ある程度docker-composeとかDockerfileで補完してくれたりするのでコピペじゃなくて空の状態から作るみたいな時に重宝しています。

共通

GitHub Pull Requests

GitHub Pull Requests - Visual Studio Marketplace

ブラウザ開くのが面倒な時にこれでPRをちょこっと覗いてます。 もっと色んなことが出来るんだろうけど使いこなせてない。

GitLens — Git supercharged

GitLens — Git supercharged - Visual Studio Marketplace

すごいGitいい感じツール。 言葉に出来ないので、とりあえず入れてみて。

indent-rainbow

indent-rainbow - Visual Studio Marketplace

入れたらネスト深くてもある程度読みやすくなった。 Tab幅2でも普通に見える。

ネスト深くなるようなコード書くんじゃねえよっていうのは、それはそう。

Rainbow Brackets

Rainbow Brackets - Visual Studio Marketplace

カッコの対応が見やすくなる。 どんどん引数にメソッドの戻り値入れまくって見づらくするなっていうのは、それはそう。

Remove backspace control character

Remove backspace control character - Visual Studio Marketplace

Markdownとか書いてる時にBSとかの制御文字が入りがちだけど、こいつでどうにかなってる気がしている。

EditorConfig for VS Code

EditorConfig for VS Code - Visual Studio Marketplace

Prettierでもそうなんだけど、うちではこういうフォーマットでやりますみたいのを規定できるから。

Code Spell Checker

Code Spell Checker - Visual Studio Marketplace

めちゃくちゃお世話になってる拡張。 これ入れてない時期に書いてたコードを見たらtypoばっかりで悲しくなった。

PRでそこまでtypo突っ込まれないけど、あとから見てプークスされないように絶対いれたほうがいい。

番外編

自分が今やっているサービスの性質上CSVを多く扱うことがあります。 Excelで開くとか、もしくはSpread Sheetにimportして読めばいいじゃん、みたいにはなるんですけど、そのひと手間すら惜しい時に以下の2つがすごい重宝しているので紹介しています。

VSCodeのreopen with encodingと組み合わせてShift-JISなCSVもいい感じで読めるので最高。

Excel Viewer

Excel Viewer - Visual Studio Marketplace

Rainbow CSV

Rainbow CSV - Visual Studio Marketplace

この2つを使ってると大体やりたいことができてる感じがある。

色付けして、どこのHeaderに対応しているのか直感的にわかりやすくなるし、Previewを使うとTableみたいに表示されるし、なによりもRainbow CSVのRBQLっていう機能が神。 SQLじゃんみたいな感じで扱えるので、えっとこのカラムはなんマス目にあるから、cut -d',' -f... してawkしてみたいなことをしなくてもいい感じに出来る。

github.com

詳しくは以上のdocumentを参照。

一言しか載せてないから何が嬉しいの?みたいな紹介ばかりだけども、本当に今回載せたのは再インストールしても絶対に入れるみたいな拡張ばかりなので、ぜひとも試してみて下さい。