検索
ホームページ開発ツールVSCode【整理と共有】2023年のフロントエンドに必須となるVSCodeプラグイン

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

Mar 21, 2023 pm 07:05 PM
javascriptvscodeフロントエンドvisual studio code

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

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

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


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


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

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

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

VSCode React Refactor

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

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

シンプルな React スニペット

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

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

Typescript React コード スニペット

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

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

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

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

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

Vue 言語機能 (Volar)

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

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

【整理と共有】2023年のフロントエンドに必須となるVSCodeプラグイン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) 構文とその最新の追加

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール