自分の 2022 年のよく使うフロントエンドプラグインとツールをまとめました。vscode に標準で備わっているプラグイン同期機能は非常に充実していますが、念のために自分でまとめたものです。元の Feishu 文書リンク：2022 フロントエンド開発 vscode よく使うプラグインとその他のツールのおすすめ
vscode よく使うプラグイン#
開発系#
GitLens — Git supercharged#
vscode に統合された Git 機能を拡張し、多くの便利な機能を提供します。
Auto Close Tag#
HTML、JSX タグを自動で閉じます。
Auto Rename Tag#
タグを自動でリネームします。
change-case#
名前の変換 Ctrl+Shift+P で change case を入力します。
Code Spell Checker#
コード内のスペルチェックを行います。
ES7 React/Redux/GraphQL/React-Native snippets#
React のコードスニペットです。
Commit Message Editor#
複数人での協力に必須、git のコミットメッセージの編集を行います。
ESLint#
Prettier#
指定の設定ファイル .prettierrc.js を使用し、プロジェクト内で自分のプロジェクトの prettier 設定ファイルを使ってフォーマットします。
Why Prettier？ https://prettier.io/docs/en/why-prettier.html
Tailwind CSS IntelliSense（Tailwind 使用推奨）#
tailwind の自動補完、インテリジェントなヒントを提供します。
Error Lens#
エラー、警告、その他の言語診断のハイライトを改善します。
CSS Modules#
CSS モジュールモード必須です。
px to rem & rpx & vw (cssrem)#
その名の通り、便利な単位変換を行います。
Template String Converter#
文字列内で ${を入力すると自動的にテンプレート文字列に変換します。
TabOut#
慣れると戻れなくなるプラグイン、Tab を押して括弧から出ます。
vscode-styled-components（styled-components 使用推奨）#
Highlight Matching Tag#
その名の通り、タグをハイライトするプラグインです。
Live Server#
比較的古典的なプラグインです：https://juejin.cn/post/7006338919767736357
Dev Containers （docker 開発適用）#
docker コンテナ内のファイルを開く、docker 開発をしている人には好評です。
補助系#
Code Runner#
これは言うまでもなく、右上の小さな三角でコードを実行します。
Image Gallery#
画像リソースを見るのに非常に便利です、おすすめです。
Image preview#
画像リンクのプレビュー、言うまでもなく便利です。
Project Manager#
vscode のプロジェクトマネージャー、一発でプロジェクトを切り替えます。
Todo Tree#
その名の通り、プロジェクト内のコメントの TODO を表示します。TODO が自動的にハイライトされます。
Comment Translate#
コメントの翻訳です。
Live Share#
複数人での協力、共同編集、ターミナルの共有です：https://juejin.cn/post/6844903603182764039
実用ツール系#
Bookmarks#
vscode のブックマークです。
Typora#
vditorを vscode の markdown エディタとして使用していますが、非常に便利です。ただし、時々git と衝突するため、無効にする必要があります。
:emojisense:#
便利な絵文字入力です。
CodeTour#
ソースコードを読むときに適しています。
vscode-pdf#
vscode 内で pdf ファイルを閲覧します。
Office Viewer(Markdown Editor)#
pdf を見れるなら、office ファイルもプラグインがあります。このプラグインは typora と同様にVditorを統合して md ファイルを作成できます。
CodeSnap#
コードを選択して美しいスクリーンショットを生成します（コードを見せるのに適しています）。
Draw.io Integration#
拡張子が.drawio のファイルでフローチャートなどを描くことができ、技術文書を書くのに適しています。多くは語りません。
外観改善系#
One Dark Pro#
Atom の象徴的な One Dark テーマで、VS Code で最もインストールされているテーマの一つです！
vscode-icons#
vscode のファイルアイコンを改善し、見た目がずっと良くなりました。
自動補完 / インテリジェントヒント系#
GitHub Copilot#
有名な自動補完機能です。
Tabnine AI#
Copilot には及びませんが、良い自動補完機能があります。無料で申請不要なのが利点です。
Mintlify Doc Writer for Python, JavaScript, TypeScript, C++, PHP, Java, C#, Ruby & more#
コードを自動分析してコメントを生成します。ドキュメントを書くのが面倒な人に適しています。
Parameter Hints#
関数のパラメータにインテリジェントなヒントを提供しますが、使いすぎると少し干渉を感じることがあります。
問題解決系#
Quokka.js#
リアルタイムで js の出力を表示します。問題解決に適しています。
Competitive Programming Helper (cph)#
競技プログラミングの学生や ACM に適しています（もちろん面接のアルゴリズム問題を解くのにも適していますが、言語は C++ です）。
algorithm#
LeetCode の問題解決に適しています。
ツールのおすすめ#
ブラウザプラグイン#
- 翻訳プラグイン
- VisBug - Microsoft Edge Addons
スクリーンショット & gif ツール#
- Snipaste スクリーンショットツール、使った人は皆良いと言っています：https://www.snipaste.com/
- ScreenToGif 名前の通り、gif を録画するのに最適なツールです：https://www.screentogif.com/
- OBS 有名な動画録画とライブストリーミングツールです：https://obsproject.com/
実用ツール#
- Everything 超高速でファイルを検索します：https://www.voidtools.com/zh-cn/downloads/
待補充#
... おすすめのプラグインがあればコメントしてください。