Web 開発者の生産性を向上させるVS Code 拡張機能

こんにちは！ 株式会社アルシエで教育に関するサポートをしている岸本です。

今回は「Web 開発者向上させるVS Code 拡張機能」についてお伝えしていきます。

ライブプレビュー

Live Preview 拡張機能を使用すると、VS Code 内の小さなブラウザーで Web サイトを表示できます。

そのため、Web サイトへの変更を確認するためにコード エディターを終了する必要はありません。

HTML、CSS、または JavaScript ファイルに変更を加えると、自動的に更新されます。

ESLint

ESLint 拡張機能は JavaScript 開発者にとって必須です。

コードをチェックして、セミコロンの忘れや未定義の変数の使用などの間違いがあるかどうかを知らせ、より良いコードを書くようにガイドします。

Prettier

Prettier 拡張機能は、保存するたびに、好みのスタイル ガイドに一致するようにコードを自動的にフォーマットするコード フォーマッタです。

コードは常にクリーンで整然とした状態で表示されます。

Path Intellisense

Path Intellisense 拡張機能は、ファイル パスのオートコンプリート候補を提供します。

これにより、エラーが発生する可能性が減り、長いパスを手動で入力する手間が省けます。

Peacock

Peacock は、さまざまな VS コード ワークスペースにさまざまな色を選択できるようにする独自の拡張機能です。

これは、複数のプロジェクトを同時に作業している場合に便利です。

各プロジェクト ワークスペースに異なる色を指定して、簡単に区別できます。

VSCode アイコン

VSCode-icons 拡張機能は、フォルダーとファイルにアイコンを追加します。

視覚的により魅力的で直感的なものになります。

Tabnine

Tabnine は、AI を利用したコード補完拡張機能です。

入力パターンをチェックし、コードの行全体またはブロックを提案して、コーディング プロセスのスピードアップに役立ちます。

コードランナー

Code Runner 拡張機能を使用すると、エディタ内でコード スニペットを実行できます。

複数の言語とフレームワークをサポートしています。

ES7+ React/Redux/React-Native スニペット

ES7+ React/Redux/React-Native スニペットにより、定型コードにすばやく簡単にアクセスできます。React、Redux、または React Native を使用している場合、これらのスニペットは時間を節約し、開発ワークフローをスピードアップします。

Postman

Postman 拡張機能は、API 関連プロジェクトに取り組む Web 開発者にとって必須の機能です。

これにより、コード エディター内で API を簡単に操作し、テストすることができます。