JavaScript は急速に進化しており、JavaScript を取り巻くツールのエコシステムも急速に進化しています。

開発者は、ワークフローをできるだけ効率的かつスムーズにしたいと考えています。そこで Visual Studio Code (VS Code) が登場します。

JavaScript 開発エクスペリエンスを大幅に向上させる 5 つの VS Code 拡張機能を厳選しました。各拡張機能がどのように基本を超えてコーディングを強化するかを詳しく見てみましょう。

1. Quokka.js: リアルタイム コード フィードバック
エディターとブラウザーを頻繁に切り替えずに、コードに関するフィードバックをすぐに確認したい場合は、これで十分です。 Quokka.js は VS Code をインタラクティブなプレイグラウンドに変え、リアルタイムの結果をエディターに直接表示します。

• VS Code 内でリアルタイムのログを取得できるようになり、console.log が煩雑になることがなくなりました。
• ランタイム値をコード内に直接表示し、デバッグを高速化します。
• すべてを再実行せずにテスト出力を表示するため、TDD (テスト駆動開発) に最適です。

私のヒントは、特に新しい JavaScript 機能をテストするときに、小規模なコードの実験に Quokka を使用することです。環境間を行ったり来たりするのにかかる時間を大幅に節約できます。

2. ESLint: クリーンなコード、常に
当たり前のことのように聞こえるかもしれませんが、ESLint を使用していない場合は、lint を実行するだけではなく、それ以外の機能も逃していることになります。構成可能なルールにより、バグを早期に発見し、チーム全体に一貫したコーディング標準を適用できます。

• 通常はデプロイ後にのみ発見される一般的なバグ (偶発的なグローバルなど) を捕捉します。
• 厳密または緩和されたコーディング環境用のカスタマイズ可能なルール。
• Prettier とうまく統合できるため、フォーマットとリンティングのどちらかを選択する必要はありません。
• ESLint を Airbnb の JavaScript スタイルガイドと組み合わせて、最も広く尊敬されているコーディング標準の 1 つを即座に適用します。

3.パス インテリセンス: インポートでタイプミスがなくなりました
長いファイルパスを入力するのにうんざりしていませんか?パス Intellisense は、入力時にファイル パスを自動補完し、JavaScript モジュールでのインポート エラーやタイプミスを最小限に抑えます。

私の意見では、これは命の恩人です:

• ファイルまたは画像をインポートすると、リアルタイムでパスが自動補完されます。
• タイプミスを見つけてインポートを中断するリスクを軽減します。
• jsconfig.json または tsconfig.json で定義されたエイリアスとカスタム パスを使用します。

プロのヒント: 大規模なプロジェクトの場合は、これをワークスペース相対パスと組み合わせます。フォルダー間の移動が超高速になります!

4.ブラケット ペア カラーライザー 2: コードを整理する
JavaScript は、ネストされたコールバック、Promise、およびアロー関数をすべて使用すると、非常に面倒になる可能性があります。ブラケット ペア カラーライザー 2 は、一致するブラケットを色分けしてコード ブロックを追跡しやすくします。

インストールする価値がある理由:

• ネストされた括弧間の視覚的な区別。
• テーマに合わせて色をカスタマイズできます。
• 深くネストされたオブジェクトや関数などの複雑なコード構造を扱うときの認知負荷を軽減します。

プロのヒント: 括弧だけでなく色を付けるように設定を構成します。このツールは角括弧、中括弧などを処理できます。

5.ターボ コンソール ログ: 1 つのショートカットによる迅速なデバッグ
単純な問題をデバッグするためだけに、どこにでも console.log を手動で入力するのは時代遅れです。 Turbo Console Log は、キーストロークでそれらを自動的に挿入し、同様に簡単に削除します。

時間の節約になる理由:

• 変数、関数パラメータ、または式の console.log ステートメントを自動的に生成します。
• コードをプッシュする前に、すべてのデバッグ ログをワンクリックでクリーンアップします。
• コードを煩雑にすることなく、オブジェクトのプロパティや関数の出力をすばやく検査するのに最適です。

プロのヒント: 究極のリアルタイム デバッグとフィードバックを得るには、これを Quokka.js と組み合わせて使用​​します。

次の拡張機能のうちどれを使用しますか? JavaScript 開発者にとって他にお気に入りはありますか?以下にコメントをドロップしてください!