🧩

私がVSCodeに入れている拡張機能

hanetsuki2022/10/13に公開1件のコメント

記事の動機

VSCodeの拡張機能何入れてますか?と聞かれることが多いので忘備録的に残します。

Language

Japanese Language Pack for Visual Studio Code

https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja

日本人なので、日本語が母国語です。
英語のUIでも操作に支障はありませんが、一眼でどういう挙動をするのか理解できる状態は作業の効率につながります。

Linter, Formatter

ESLint

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

javascript系のlinterです。
ファイルを保存時にプロジェクトにある設定ファイルを読み込んで自動修正をしてくれたりしてくれます。(要設定)

Prettier - Code formatter

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

いろんなファイルをフォーマットしてくれるやつです。
ファイルを保存時にプロジェクトにある設定ファイルを読み込んで自動修正をしてくれたりしてくれます。(要設定)

Stylelint

https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

スタイルにまつわるlinterです。
ファイルを保存時にプロジェクトにある設定ファイルを読み込んで自動修正をしてくれたりしてくれます。(要設定)

CSS in JS

vscode-styled-components

https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components

CSS in JSで記載されたスタイリングの記述を色付けしてくれたり補完してくれたりします。Emotionをよく使っているので重宝してます。

便利拡張機能

Git Graph

https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph

デフォルトで入っていた気もしますが、忘れてしまったので掲載。
GitのGUIツールです。昔は、SourceTreeなどを利用していましたがgitコマンドとこちらのGUIツールの併用に切り替えました。
Editor上で履歴を観れるのはとても便利です。ウィンドウやアプリケーションの併用が減るのは助かります。

Live Share

https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare

リモートでのペアプロなどで用います。自分のEditorの画面を共有することができます。
エディター版miroみたいな感じですかね?

Auto Rename Tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

htmlのタグを変更する際に開始タグと閉じタグを同時に編集できる

Trailing Spaces

https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces

行末にある空白をトリミングしてくれる便利な子
空白があるだけで、Gitの差分に出てしまうので、特に意味のない空白は抹消したいですね

TODO Highlight

https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight

// TODO: というコメントにハイライトをつけてくれる拡張機能。メモを見つけやすくなります。

Code Spell Checker

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

typeを事前に察知できる優れもの。vallueなどのタイポになみ線が入るのでコード品質の向上につながること間違いなし

Import Cost

https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

npmパッケージで利用しているものがどれくらいの容量なのか調べることができる拡張機能です。
今自分がどういうパッケージを使っているのか、どれくらいソースに影響が出るものなのかは知っておいて損ではないはずです。

最後に

今回は、あると便利を中心に紹介しました。
その他にも携わっているプロジェクトによっては、RailsやLaravelの拡張機能を入れたり消したりをしています。

他にも皆さんのこれおすすめだよがあればコメントを残していただけますと嬉しいです!

今回はこれにて! ほな、カイサン!!

chot Inc. tech blog

ちょっと株式会社のエンジニアブログです。

Discussion

Live Share
TODO Highlight

すごい便利そうなのでさっそく入れて使ってみたいと思います^^

ログインするとコメントできます