こんな拡張機能を入れてます。現状入れてるものを全部書き出してみました。
Vue を使って開発することが多いのでこれは必須のものになりますね。
おすすめ、とかではなく必須なので、Vue で開発してる人は嫌でも入れることになるはず。
XML サポート。XML ファイルを触ることは滅多にないので、いつ入れたんだろ？ という感じです。この機会にいったん削除しておくことにしました。また必要になったときに導入しようかと。
sitemap.xml を開くために入れてました。再度インストールしておきました。
Vue + TypeScript の環境で開発するときには必須のもの。ないと困ります。
余計なスペースに色を付けて教えてくれるもの。
この拡張機能を入れてみたら、そこかしこに余計なスペースがありました。ここにも雑菌が！ みたいな感じで。
余計なスペースが付いてたからといって実際に困った記憶はないので、要らないといえば要らないかもしれません。余計なスペースのことを気にするだけ時間の無駄というか。
ただ、コードレビューの機会がある場合、余計なスペースのことを指摘されるかもしれないので、まあ入れておいても良いのでは。
VSCode 標準で行末の余計なスペースを消してくれる機能があったので、そちらを有効にすることにしました。
"files.trimTrailingWhitespace": true
ファイルやパスを補完してくれるようになります。地味ですが、地味に便利なのでおすすめです。
複数のコマンドをひとつのキーに割り当てられるようになります。
たとえばこんな感じで設定してます。
{
"command": "formatDocumentAndRestartServers",
"sequence": [
"editor.action.formatDocument",
"eslint.restart",
"workbench.action.restartExtensionHost",
"volar.action.restartServer",
]
},
ファイルのフォーマットを行って、ESLint をリスタートして、拡張機能をリセットして、Volar サーバーをリスタートして、と、要するに何もかもをリセットしたいケースがあるんですが、そのために４回コマンドを実行するのは嫌なのでこのように設定しています。
私にとっては必須の拡張機能になります。おすすめです。
ファイルツリーに付くアイコンを良い感じのデザインにしてくれるもの。
デフォルトのデザインがそこまで悪いとも思わないんですが、みんなおすすめするので入れてみた、という感じですね。
今はもうこのデザインに慣れてしまったので、今更デフォルトのデザインに戻すのもな…という感じです。
必須、というほどでもないですね。
日本語の方が疲れないので日本語パックを入れてます。
Emacs ライクに kill ができるようになる拡張機能です。
Emacs を使ったことのない人には不要のものだと思いますが、私の場合は完全に指が Emacs のそれになってしまってるので必須の機能です。
CSS のクラス名を補完してくれる機能です。普通におすすめです。
外部 CSS などを使ってる場合に大量に候補が出てきてしまう、という問題はありますが、それを差し引いても入れておいたほうが楽、という感じですね。
HTML の Lint みたいな機能ですね。HTML のエラーを指摘してくれます。直接 HTML ファイルを触ることはあんまりないですが、たまに触るので入れておいて損はないはず。
対応するタグを強調表示してくれる拡張機能です。VSCode にデフォルトで備わってるものより良いらしいです。詳しく調べてないので正直良くわかってないですが、とりあえずより見やすく強調してくれますね。
VSCode で ESLint が使えるようになります。これは必須ですね。これがないとコーディングの際の生産性がめちゃくちゃ下がると思います。
EJS ファイルを触ることがあるので入れてます。
CSV ファイルを表形式で修正することができるようになります。ゲームのデータを CSV で管理することがあるので、便利に使ってます。
ただ、微妙に不具合があって、画面上の表と実際のファイルとが同期されない、というケースが何回かありましたね。結構致命的なバグなので、手放しでおすすめはできないですが、CSV ファイルをめちゃくちゃ編集する必要がある、というは試してみてはどうでしょうか。
選択したテキストを翻訳してくれます。普通に便利。コメントだけでなく、どんな場所のテキストでも翻訳してくれます。
#ff0000 みたいに書いた場合、こんな感じで #ff0000 表示してくれます。ゲーム作るときは色を参照することが多いので非常に便利です。おすすめ。
これは必須ですね。スペルチェックをしてくれます。これを入れてから、自分がこれまでいかにスペルミスを無意識で気にして生きていたか、ということに気付かされました。
日本語をそのままローマ字にした変数名などがあると全部エラー扱いにしてしまうので、そこだけなんとかならないかなと思ってます。たとえば kaginawa みたいなものはエラーになっちゃうんですよね。そのたびに辞書に追加するようにしていますが、面倒ではあります。
UML 形式でクラス図を生成してくれます。しょっちゅう使うわけではありませんが、リファクタリングのときには重宝します。生成したクラス図を単純に眺めるだけでも「へ〜」となります。
camelCase を PascalCase にしたり、snake_case にしたり、といった変換ができます。これもしょっちゅう使うわけではないですが、こういうのを使いたいときは大抵大量の変換をしないといけないときなので、必須といえば必須の拡張機能になります。
一方のタグを編集すると対応するタグも同時に変更してくれます。地味に便利なのでおすすめ。いったん慣れてしまうと元に戻れなくなる系ですね。
VSCode から DeepL を直接呼び出せる拡張になります。日本語で考えた変数名や関数名を英語に翻訳するときに便利です。
この拡張を使う前に DeepL に登録して API キーを取得して…という手続きを行わないといけないので、インストールの手間はだいぶありますが、個人的には手間を惜しまず入れておいて良かったなと思ってます。
使っている拡張機能の紹介でした。また増えたら追記したいと思います。
いろいろなサイトでおすすめされていたので一回入れてはみたものの、実際に入れてみて微妙に合わないなというのがあり外したものになります。
インデントに色がついて分かりやすくなる、という拡張機能。
たしかにインデントは分かりやすくなるんですが、インデントの色が目立ちすぎてコードのロジックの方に集中できなくなる、という感じがして結局外しました。
日本語のテキストを校正してくれる、という拡張機能です。
かなり細かくテキストの書き方をチェックしてくれます。そして指摘内容も、たしかに、というものではあるんですが、あんまり細かく指摘されるとそもそも文章を書く気力がなくなくってしまう、という本末転倒なことになってしまったので外しました。
たとえば私の文章の場合、読点（、）が多すぎる、という指摘が多々あるんですが、自分自身で見ても読点が多すぎるとは思うんですが、これはもう書き方の癖なので直すのがしんどいんですよね。ちゃんと直そうと思うと最初に書いたとき以上の時間がかかってしまうのというのもあり、その時間があったら別の文章を書いたほうがいいかな、という感じです。
どの項目を指摘するか、というのをオプションで選択することもできるんですが、文章校正を行うということ自体につらさを感じはじめてしまったので外した、という次第です。
コードのフォーマットをしてくれる拡張機能です。
実際に入れてみてフォーマットしてみたんですが、ちょっとフォーマットしすぎという気がして外しました。デフォルトのフォーマッタで十分かな、と思ったんですね。
ただ Prettier についてはちゃんと理解して細かく設定したほうが良いかもとも思っているので、デフォルトのフォーマッタだと痒いところに手が届かないと思ったら入れ直すかもしれません。
Git の履歴をエディタ上に表示してくれる、という機能なんですが、これもコードのロジックに集中できなくなってしまうため外しました。
コードを履歴を追いたい、というケースもたまにあるので入れても良いとは思うんですが、まあ今のところはいいかという感じです。
対応するカッコに色を付ける拡張。VSCode 標準でサポートされるようになったので非推奨ということを知り外しました。