【整理と共有】2023年のフロントエンドに必須となるVSCodeプラグイン

Visual Studio Code は、最新の Web およびクラウド アプリケーションを作成するために Microsoft が開発した無料のクロスプラットフォーム ソース コード エディターです。豊富なプラグイン マーケットが含まれており、多くの実用的なプラグインが提供されています。 2023 年のフロントエンドに必須の VS Code プラグインを共有しましょう。

#フロントエンド フレームワーク

---

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

このプラグインは、開発をスピードアップし、開発者が React、Redux、GraphQL、および React Native のコード スニペットと構文を作成できるようにするための短縮プレフィックスを多数提供します。

たとえば、新しいファイルを作成し、「rfce」と入力して Enter キーを押すと、React 関数コンポーネントが生成され、React をインポートしてコンポーネントをエクスポートします。

VSCode React Refactor

これは、React 開発者向けに特別に設計された VS Code 拡張機能です。大規模なプロジェクトに取り組んでいる場合、リファクタリングは困難になる場合があります。 JSX コード スニペットを新しいクラスとコンポーネントに抽出する VSCode React Refactor を使用すると、コードを迅速にリファクタリングできます。さらに、TypeScript、TSX、通常の関数、クラス、アロー関数もサポートしています。

シンプルな React スニペット

このプラグインは、コード中に数文字を入力するだけで簡単にコードに追加できる、厳選された React スニペットのセットを提供します。たとえば、「imr」と入力すると、React がコンポーネントにインポートされます。

Typescript React コード スニペット

このプラグインには Typescript を使用した React コード スニペットが含まれており、Typescript(.ts) または言語をサポートしています。 TypeScript React (.tsx) など。以下は、TypeScript を使用して React コンポーネントを作成する 2 つのスニペットです。

デフォルトのエクスポート React:

エクスポート React コンポーネント:

Vue 言語機能 (Volar)

デフォルトでは、Vue コンポーネントは次のようになります:

Useこのプラグインを使用すると、美しい構文の強調表示、エラー チェック、コードの書式設定が可能になります。また、入力中に優れた提案を提供するために、多くの Vue ディレクティブとイベント ハンドラーが追加されます。

volar は、Vue 3 専用に構築された言語サポート プラグインです。これは、オンデマンドですべてを計算する

@vue/reactivity

に基づいており、ネイティブ TypeScript 言語のサービス レベルのパフォーマンスを実現します。 Vue 3 TypeScript の人気が高まるにつれて、Vuetur (Vue の公式 VS Code 拡張機能) では、TypeScript で Vue を使用すると CPU 使用率が高くなる、Vue 3 New

< をサポートしないなどの問題が発生し始めます。 ;スクリプト設定>

構文。 Volar は Vetur の問題を解決し、Vue 3 TypeScript ユーザーに最高の開発エクスペリエンスを提供します。標準のシングル ファイル セット (SFC) 構文とその最新の追加

著者別の最新記事

• Redis のセンチネルを詳しく理解する
  2023-04-26 17:59:18
• 【整理と共有】人気のReact状態管理ツール7選
  2023-04-26 17:47:48
• Vue2 のキーと Vue3 のキーの違いについて説明した記事
  2023-04-26 17:41:42
• Nodeのメモリ制御に関する記事
  2023-04-26 17:37:05
• Excelの実践スキルをシェア：重複値を削除する4つのヒント！
  2023-04-26 17:31:25
• Wordの実践スキルを共有：簡体字→繁体字変換機能はこんな使い方もできる！
  2023-04-26 17:27:32
• クロスドメインの問題を解決するにはどうすればよいですか?一般的なソリューションの簡単な分析
  2023-04-25 19:57:58
• JavaScript のシングルトン パターンを理解するための 1 つの記事
  2023-04-25 19:53:11
• ノードのバッファーについて詳しく見る
  2023-04-25 19:49:11
• Vue3 で単体テストを作成する方法を調べる
  2023-04-25 19:41:54

最新の問題

ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...

から 2024-04-06 21:58:04

0

1

800

数独チェッカーが動作しないのですが？エラーの特定を手伝ってくれる人はいますか? オンラインエディターですべてを試しましたが、それでもエラーが発生します。しかし、私のマシンのVSCodeでこれを実行すると、正常に動作します。混乱していて、バグを見つけずにコードを...

から 2024-04-06 21:21:07

0

1

474

私のページには HTML にタイトルがありますが、表示されません 私はコーディングを始めたばかりなので、私を批判しないでください。 vscodeを使用してWebサイトを作成しようとしています。HTMLとCSSを使用していますが、コードの左上隅に配...

から 2024-04-01 18:24:53

0

1

364

VSCode id 属性をカスタマイズするにはどうすればよいですか? 最近 Atom から VSCode に移行しました。エディタの大部分を自分の好みに合わせてカスタマイズすることができましたが、気に入っている Atom の機能がまだ欠けています。そ...

から 2024-03-31 14:13:45

0

1

373

/bin/sh: 1: C:xamppphpphp.exe: 見つかりません 私はWSL2、Ubuntu20.04を使用し、VSCodeを実行しています。 Windows 上の VSCode および XAMPP で CodeRunner 拡張機能を使用してお...

から 2024-03-31 09:10:37

0

1

333

関連トピック

詳細>

• 配列の長さを取得するjsメソッド
• vscode
• jsで現在のページを更新する
• jsの丸め
• vscodeでコードを実行する方法
• Python はフロントエンドですか、それともバックエンドですか?
• ノードを削除するjsメソッド
• JavaScript エスケープ文字