記事の動機
VSCodeの拡張機能何入れてますか？と聞かれることが多いので忘備録的に残します。
Language
Japanese Language Pack for Visual Studio Code
日本人なので、日本語が母国語です。
英語のUIでも操作に支障はありませんが、一眼でどういう挙動をするのか理解できる状態は作業の効率につながります。
Linter, Formatter
ESLint
javascript系のlinterです。
ファイルを保存時にプロジェクトにある設定ファイルを読み込んで自動修正をしてくれたりしてくれます。（要設定）
Prettier - Code formatter
いろんなファイルをフォーマットしてくれるやつです。
ファイルを保存時にプロジェクトにある設定ファイルを読み込んで自動修正をしてくれたりしてくれます。（要設定）
Stylelint
スタイルにまつわるlinterです。
ファイルを保存時にプロジェクトにある設定ファイルを読み込んで自動修正をしてくれたりしてくれます。（要設定）
CSS in JS
vscode-styled-components
CSS in JSで記載されたスタイリングの記述を色付けしてくれたり補完してくれたりします。Emotionをよく使っているので重宝してます。
便利拡張機能
Git Graph
デフォルトで入っていた気もしますが、忘れてしまったので掲載。
GitのGUIツールです。昔は、SourceTreeなどを利用していましたがgitコマンドとこちらのGUIツールの併用に切り替えました。
Editor上で履歴を観れるのはとても便利です。ウィンドウやアプリケーションの併用が減るのは助かります。
Live Share
リモートでのペアプロなどで用います。自分のEditorの画面を共有することができます。
エディター版miroみたいな感じですかね？
Auto Rename Tag
htmlのタグを変更する際に開始タグと閉じタグを同時に編集できる
Trailing Spaces
行末にある空白をトリミングしてくれる便利な子
空白があるだけで、Gitの差分に出てしまうので、特に意味のない空白は抹消したいですね
TODO Highlight
// TODO: というコメントにハイライトをつけてくれる拡張機能。メモを見つけやすくなります。
Code Spell Checker
typeを事前に察知できる優れもの。vallueなどのタイポになみ線が入るのでコード品質の向上につながること間違いなし
Import Cost
npmパッケージで利用しているものがどれくらいの容量なのか調べることができる拡張機能です。
今自分がどういうパッケージを使っているのか、どれくらいソースに影響が出るものなのかは知っておいて損ではないはずです。
最後に
今回は、あると便利を中心に紹介しました。
その他にも携わっているプロジェクトによっては、RailsやLaravelの拡張機能を入れたり消したりをしています。
他にも皆さんのこれおすすめだよがあればコメントを残していただけますと嬉しいです！
今回はこれにて！ ほな、カイサン！！
ちょっと株式会社（chot-inc.com）のエンジニアブログです。 フロントエンドエンジニア募集中！ カジュアル面接申し込みはこちらから chot-inc.com/recruit/iuj62owig
Discussion
Live Share
TODO Highlight
すごい便利そうなのでさっそく入れて使ってみたいと思います＾＾