はじめに
個人的によく使っている・使ったプラグイン名、リンク、簡単な説明を列挙していく。なおトピックをクリックすると飛べる。自分用メモだが、なにか後続に役に立てば幸いです。
基本のやつ
ESLint
有名すぎるリンター(linter)。プログラムを静的に解析し、バグや問題点を発見するツール。
構文チェック、コーディングスタイル、セキュリティ、パフォーマンスなどのチェックをすることができる。
たとえば使わない変数を宣言したり、console 系の関数を使ったり、キャメルケースを使用していない場合、それを拾ってくれる。設定するとリンタのエラーが出る。
- no-console: console 系関数は使用できない
- camelcase: 変数名はキャメルケースにすること
Prettier - Code formatter
自動的にコードを整形してくれる。整形はファイル保存時にすることができ、インデントやセミコロンなど自動的に変換される。
EditorConfig for VS Code
エディターをカスタマイズしてコードベースのスタイルを統一できる。
文字コードの設定やインデントをスペースにするかタブにするかなどの設定を共通化できる。
見た目系
GitHub Theme
テーマが GitHub の見た目のそれになる。Git Dark Dimmed を最近は愛用している。
他にも似たプラグインがあるので、「Theme」で検索して好みに応じてインストールすると良い。
Material Icon Theme
ファイルアイコンがモダンなデザインでキレイになる。これも常に入れているのでデフォルトがどんなものか忘れるレベル。
他にも似たプラグインがあるので好みに応じてインストールすると良い。
Rainbow CSV
CSV の見た目が鮮やかで見やすくなる。
Rainbow Brackets
対になるカッコの階層に応じて変色し、見やすくなる。
zenkaku
全角のスペースを目立つようにしてくれる。このプラグインひとつで全角スペースに起因するバグが回避できると思えば最高のツール。
Code Spell Checker
英語の綴りに間違いがないかチェックする。キャメルケースケバブケースなどの変数名に対してもチェックが効く。
Git 系
GitLens — Git supercharged
Git の強力な補助ツールでファイルの編集履歴が簡単にわかる。
カーソルをあわせた行の編集者、時間帯、コミットメッセージが確認できる。
Git History
コミット履歴の検索や表示ができる。
Git Graph
Git のコミットグラフがキレイで鮮やかになる。GUI 操作もでき、直感的に操作が可能。常に入れているのでデフォルトがどんなものか忘れるレベル。
入力補完系
change-case
キャメルケースからパスカル・スネーク・ケバブケースに変換できる。逆もしかり。
要はcase スタイル変換ツールみたいなことが VS Code で可能となる。DB のカラムをアプリ側のモデルとして定義する際、コピペしてスネークからキャメルケースにまとめて変換することができて便利だった。
Insert Numbers
連続した数字を入力できる。マルチカーソルを用いてサンプルデータのコード値などまとめて生成できて仕事が捗った。
参考記事：Insert Numbers エクステンションが便利
ES7+ React/Redux/React-Native snippets
React と JS のスニペットのフルパッケージ。たとえばenfとタイプすればexport const first = (second) => {third}とコードを一気に補完できる。利用するフレームワークや言語にあわせて、スニペットをインストールすれば良い。うまく使うと爆速になるが、低スペ PC だと補完が現れず、普通に入力したほうが速いなと思った。
TypeScript Importer
別ファイルの関数やクラスなどを呼び出すときのインポート文を補完できる。
あると便利なやつ
Markdown Preview Enhanced
マークダウンのプレビューを VS Code で確認できる。
私的なメモ、README、日報、記事執筆など活躍の場は幅広い。
Database Client
DB クライアント。コンソールでログインし操作するのは手間なので、GUI でポチポチしてテーブルの中身を修正できる。
.sql ファイルを作り、select * from hogeと入力し Command + Enter するとクエリ直接実行もできる。ないと困るやつ。
Todo Tree
TODO や FIXME コメントに対しハイライトしリスト化する。修正漏れを防ぐことができるので重宝した。
詳しい使い方はこちらが参考になりそう。
JavaScript Debugger
JS のデバッグが VS Code でできる。
Thunder Client
REST API Client の一種。Postman や Advanced REST Client みたいなことを VS Code でできる。
WakaTime
日々のコーディング時間を可視化できる。コーディングのモチベーションアップに貢献できた。
プロジェクトに応じて入れる系
Live Share
ソースコードを共同編集できる。Google のスプレッドシートの如く、ひとつのファイルに複数ユーザーのカーソル現れる。ペアプロとかに使えた。
参考：VisualStudio と VSCode の LiveShare 機能を使ってみよう
Jest Runner
単体テストコードをシナリオ単位で実行できる。マウスでポチポチ実行したり、breakpoint を設定してデバッグもできる。汎用関数を作った際は単体テストコードを書くことが多かったので、即座にテスト実行できて非常に助かった。
参考：Jest で書かれたテストコードを Visual Studio Code でデバッグする
Docker
コンテナーの起動や状態を把握できる。環境が Docker で構築されている現場ではだいたい入れる。
GraphQL
GraphQL ファイルのシンタックスやコンパイルエラーをチェックしてくれる。
vscode-styled-components
単色の CSS 部分が色彩豊かに。
こちらのようになる。
テキスト校正くん
日本語を校正する。ドキュメントや記事の書き起こしをする際に大活躍した。
類似記事や参考になりそうなの
とてもわかりやすくまとまっている。たいへん勉強になる、感謝。重複するプラグインが記載されているが、それだけ役立つものと解釈できる。