フロントとAPI開発してたエンジニアが VS Code の良さげなプラグインをはる


# はじめに

個人的によく使っている・使ったプラグイン名、リンク、簡単な説明を列挙していく。なおトピックをクリックすると飛べる。自分用メモだが、なにか後続に役に立てば幸いです。

# 基本のやつ

## [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

有名すぎるリンター(linter)。プログラムを静的に解析し、バグや問題点を発見するツール。
構文チェック、コーディングスタイル、セキュリティ、パフォーマンスなどのチェックをすることができる。

たとえば使わない変数を宣言したり、console 系の関数を使ったり、キャメルケースを使用していない場合、それを拾ってくれる。設定するとリンタのエラーが出る。

- no-console: console 系関数は使用できない
- camelcase: 変数名はキャメルケースにすること

## [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

自動的にコードを整形してくれる。整形はファイル保存時にすることができ、インデントやセミコロンなど自動的に変換される。

## [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)

エディターをカスタマイズしてコードベースのスタイルを統一できる。
文字コードの設定やインデントをスペースにするかタブにするかなどの設定を共通化できる。

# 見た目系


## [GitHub Theme](https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme)

テーマが GitHub の見た目のそれになる。`Git Dark Dimmed` を最近は愛用している。
他にも似たプラグインがあるので、「Theme」で検索して好みに応じてインストールすると良い。

## [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)

ファイルアイコンがモダンなデザインでキレイになる。これも常に入れているのでデフォルトがどんなものか忘れるレベル。
他にも似たプラグインがあるので好みに応じてインストールすると良い。

## [Rainbow CSV](https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv)

CSV の見た目が鮮やかで見やすくなる。

## [Rainbow Brackets](https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets)

対になるカッコの階層に応じて変色し、見やすくなる。

## [zenkaku](https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku)

全角のスペースを目立つようにしてくれる。このプラグインひとつで全角スペースに起因するバグが回避できると思えば最高のツール。

## [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)

英語の綴りに間違いがないかチェックする。キャメルケースケバブケースなどの変数名に対してもチェックが効く。

# Git 系

## [GitLens — Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

Git の強力な補助ツールでファイルの編集履歴が簡単にわかる。
カーソルをあわせた行の編集者、時間帯、コミットメッセージが確認できる。

## [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)

コミット履歴の検索や表示ができる。

## [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)

Git のコミットグラフがキレイで鮮やかになる。GUI 操作もでき、直感的に操作が可能。常に入れているのでデフォルトがどんなものか忘れるレベル。

# 入力補完系

## [change-case](https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case)

キャメルケースからパスカル・スネーク・ケバブケースに変換できる。逆もしかり。
要は[case スタイル変換ツール](https://lazesoftware.com/ja/tool/casestyle/)みたいなことが VS Code で可能となる。DB のカラムをアプリ側のモデルとして定義する際、コピペしてスネークからキャメルケースにまとめて変換することができて便利だった。

## [Insert Numbers](https://marketplace.visualstudio.com/items?itemName=Asuka.insertnumbers)

連続した数字を入力できる。マルチカーソルを用いてサンプルデータのコード値などまとめて生成できて仕事が捗った。

参考記事：[Insert Numbers エクステンションが便利](https://kekaku.addisteria.com/wp/20200714160757)

## [ES7+ React/Redux/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)

React と JS のスニペットのフルパッケージ。たとえば`enf`とタイプすれば`export const first = (second) => {third}`とコードを一気に補完できる。利用するフレームワークや言語にあわせて、スニペットをインストールすれば良い。うまく使うと爆速になるが、低スペ PC だと補完が現れず、普通に入力したほうが速いなと思った。

## [TypeScript Importer](https://marketplace.visualstudio.com/items?itemName=pmneo.tsimporter)

別ファイルの関数やクラスなどを呼び出すときのインポート文を補完できる。

# あると便利なやつ

## [Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)

マークダウンのプレビューを VS Code で確認できる。
私的なメモ、README、日報、記事執筆など活躍の場は幅広い。

## [Database Client](https://marketplace.visualstudio.com/items?itemName=cweijan.vscode-database-client2)

DB クライアント。コンソールでログインし操作するのは手間なので、GUI でポチポチしてテーブルの中身を修正できる。
.sql ファイルを作り、`select * from hoge`と入力し Command + Enter するとクエリ直接実行もできる。ないと困るやつ。

## [Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)

TODO や FIXME コメントに対しハイライトしリスト化する。修正漏れを防ぐことができるので重宝した。
詳しい使い方は[こちら](https://zenn.dev/posita33/articles/vscode_extension_todo_tree)が参考になりそう。

## [JavaScript Debugger](https://marketplace.visualstudio.com/items?itemName=ms-vscode.js-debug)

JS のデバッグが VS Code でできる。

## [Thunder Client](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client)

REST API Client の一種。Postman や Advanced REST Client みたいなことを VS Code でできる。

## [WakaTime](https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime)

日々のコーディング時間を可視化できる。コーディングのモチベーションアップに貢献できた。

# プロジェクトに応じて入れる系

## [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)

ソースコードを共同編集できる。Google のスプレッドシートの如く、ひとつのファイルに複数ユーザーのカーソル現れる。ペアプロとかに使えた。

参考：[VisualStudio と VSCode の LiveShare 機能を使ってみよう](https://www.w2solution.co.jp/tech/2021/04/26/visualstudio%E3%81%A8vscode%E3%81%AEliveshare%E6%A9%9F%E8%83%BD%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86/)

## [Jest Runner](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner)

単体テストコードをシナリオ単位で実行できる。マウスでポチポチ実行したり、breakpoint を設定してデバッグもできる。汎用関数を作った際は単体テストコードを書くことが多かったので、即座にテスト実行できて非常に助かった。

参考：[Jest で書かれたテストコードを Visual Studio Code でデバッグする](https://blog.chick-p.work/blog/debug-jest-vscode)

## [Docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker)

コンテナーの起動や状態を把握できる。環境が Docker で構築されている現場ではだいたい入れる。

## [GraphQL](https://marketplace.visualstudio.com/items?itemName=orsenkucher.vscode-graphql)

GraphQL ファイルのシンタックスやコンパイルエラーをチェックしてくれる。

## [vscode-styled-components](https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components)

単色の CSS 部分が色彩豊かに。
[こちら](https://qiita.com/bonjour_ken/items/85c7ff5f345c69ad48f1)のようになる。

## [テキスト校正くん](https://marketplace.visualstudio.com/items?itemName=ICS.japanese-proofreading)

日本語を校正する。ドキュメントや記事の書き起こしをする際に大活躍した。

# 類似記事や参考になりそうなの

[VSCode のおすすめ拡張機能](https://qiita.com/mayobimu/items/12c65c27c2098385283b)

とてもわかりやすくまとまっている。たいへん勉強になる、感謝。重複するプラグインが記載されているが、それだけ役立つものと解釈できる。