この記事では、vue プロジェクトを開発するときにインストールする必要がある VSCode プラグインをいくつか整理します。
![[整理と共有] VSCode は vue プロジェクトを開発するためにプラグインをインストールする必要があります](https://img.php.cn/upload/article/000/000/024/6310a08c1aaf3272.jpg?x-oss-process=image/resize,p_40)
以前、プロジェクトの開発にウェブストームを使用しました。ウェブストームは使いやすいですが、大きな欠点が 2 つあります。まず、スタックしすぎます。3 年前に購入したラップトップです。プロジェクトを開くのは基本的に毎日再起動する必要があり、プロジェクトを 3 つ開くとすぐにフリーズします。2 つ目は有料です。オンラインにはクラック版がありますが、時々無効になってしまうのが辛すぎます。
したがって、これを放棄し、軽量で無料の vscode (正式名は Visual Studio Code) を使用することにしました。数日間の検討の結果、vs code に以下のプラグインをインストールしたところ、基本的に Webstorm と同等かそれ以上の効果が得られ、今後はラグや障害を気にする必要がなくなりました。 [推奨学習: 「vscode 入門チュートリアル 」]
プラグインのインストールと手順
1. 中国語 (簡体字) (简体中文) ) Visual Studio Code 用言語パック
機能: VS Code の中国語版
インストール手順:
![[整理と共有] VSCode は vue プロジェクトを開発するためにプラグインをインストールする必要があります](https://img.php.cn/upload/image/841/271/515/166203413142758%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%20VSCode%20%E3%81%AF%20vue%20%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E9%96%8B%E7%99%BA%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B%E5%BF%85%E8%A6%81%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99?x-oss-process=image/resize,p_40 "166203413142758[整理と共有] VSCode は vue プロジェクトを開発するためにプラグインをインストールする必要があります")
手順: インストールのステップ 123 はどのプラグインでも同じです。ほとんどのプラグインにはステップ 123 のみがあります。このプラグインには追加のステップ 4 があるため、特に注意する必要があります。
2. Vue 言語機能 (Volar)
機能: vs code 内のデフォルトの vue ファイルはすべて同じテキストを持ち、クリックできません。このプラグインを使用すると、vue ファイルのコンテンツを色分けでき、相対パス ファイルをクリックしてジャンプし、クラス名のスタイル配置をサポートします (クラス名とスタイルが同じファイル内に存在する必要があります)
3. vue-helper
機能: テンプレート内の vue コンポーネント、vue 変数、または vue メソッドをクリックすると、対応するファイルまたは場所を見つけることができます。 vueコンポーネントをクリックすると該当ファイルにジャンプできますが、コンポーネントは相対パス導入（つまりエイリアス導入はサポートされていません）でインストールされており、コンポーネント名はコンポーネントのファイル名と同じであることが前提となります。たとえば、コンポーネント ファイル名は select.vue ですが、コンポーネントが導入されるとクリックできなくなるため、コンポーネント ファイル名を common-select.vue
4 に変更する必要があります。 Peak
機能: テンプレート内の vue コンポーネントをクリックすると、対応するファイルにジャンプでき、エイリアスによって導入された vue コンポーネントをサポートできます。たとえば、次のインポート方法がサポートされています: import commonSelect from '@/components/common-select'; これはプラグイン 3 の欠点を補います。
5. css ピーク
関数: ファイル間のクラス名ジャンプをサポートします。つまり、クラス名とそのスタイルが同じファイル内にないため、プラグイン 2 の欠点を補います。
6. エイリアスパスジャンプ
機能: プラグイン2の欠点を補うエイリアスファイル導入方法の調整をサポート(プラグイン2)エイリアスを使用しないでください (エイリアスをインストールする必要はありません)
7. タグの自動名前変更
機能: タグの名前を自動的に変更します。つまり、開始タグを変更し、終了タグも自動的に変更されます
#8 . コード スペル チェッカー #機能: 単語のスペル チェッカー、スペルが間違っている単語は波線で通知されます
9. GitLens — Git のスーパーチャージ機能: マウス カーソルがコード行に留まると、そのコード行の git 変更情報が表示され、効果的に変更を回避できます。コードに問題がある場合の責任
#10. Git Graph
機能: インストールが完了すると、左下隅に Git Graph ボタンが表示されます。クリックすると、すべての git コミットの詳細情報と各コミットのコードの明らかな変更が表示されます
11 Prettier - コード フォーマッタ
機能: ファイルのフォーマット、あなたはファイルを保存するときにフォーマットされるように設定できます
手順: プラグインをインストールした後、setting.jsonを見つけます![[整理と共有] VSCode は vue プロジェクトを開発するためにプラグインをインストールする必要があります](https://img.php.cn/upload/image/447/945/542/166203415461635%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%20VSCode%20%E3%81%AF%20vue%20%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E9%96%8B%E7%99%BA%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B%E5%BF%85%E8%A6%81%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99?x-oss-process=image/resize,p_40 "166203415461635[整理と共有] VSCode は vue プロジェクトを開発するためにプラグインをインストールする必要があります")
次のコードをコピーします。最初の 2 行はプラグインに必要です。最後の 2 行はプラグイン 12 とプラグイン 13 です。プラグイン 12 と 13 をインストールしない場合に必要なものは次のとおりです。最後の 2 行を削除できます。
![[整理と共有] VSCode は vue プロジェクトを開発するためにプラグインをインストールする必要があります](https://img.php.cn/upload/image/796/809/506/166203415796996%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%20VSCode%20%E3%81%AF%20vue%20%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E9%96%8B%E7%99%BA%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B%E5%BF%85%E8%A6%81%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99?x-oss-process=image/resize,p_40 "166203415796996[整理と共有] VSCode は vue プロジェクトを開発するためにプラグインをインストールする必要があります")
{
"editor.formatOnSave": true, // 保存时是否格式化
"editor.defaultFormatter": "esbenp.prettier-vscode", // 格式化插件
"editor.tabSize": 2, // tab健空格
"editor.fontSize": 14, // 字体大小
"workbench.iconTheme": "vscode-great-icons",
"workbench.colorTheme": "One Dark Pro"
} 他のルールを設定する場合は、プロジェクトのルート ディレクトリに新しい .prettierrc ファイルを作成し、次のコードをコピーします。各行の意味を入力してください。 1. 一重引用符、2. オブジェクトの最後の要素にカンマは使用しない、3. アロー関数のパラメータが 1 つだけの場合は括弧は使用しない、4. 100 文字を超える場合は改行。
{
"singleQuote": true,
"trailingComma": "none",
"arrowParens": "avoid",
"printWidth": 100
}
12. VSCode の優れたアイコン
機能: プロジェクト構造の前に対応するアイコンを配置し、より美しく見えるようにします (必須ではありません)
![[整理と共有] VSCode は vue プロジェクトを開発するためにプラグインをインストールする必要があります](https://img.php.cn/upload/image/928/189/639/166203418524732%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%20VSCode%20%E3%81%AF%20vue%20%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E9%96%8B%E7%99%BA%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B%E5%BF%85%E8%A6%81%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99?x-oss-process=image/resize,p_40 "166203418524732[整理と共有] VSCode は vue プロジェクトを開発するためにプラグインをインストールする必要があります")
13. One Dark Pro
関数: vs コードスキン、インターフェースをより美しくする (必須ではありません)
14. Markdown Preview Enhanced
機能: 通常、各プロジェクトには README.md ファイルがあり、インストール後、各 md ファイルを右クリックして効果をプレビューできます
![[整理と共有] VSCode は vue プロジェクトを開発するためにプラグインをインストールする必要があります](https://img.php.cn/upload/image/359/651/415/166203419060386%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%20VSCode%20%E3%81%AF%20vue%20%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E9%96%8B%E7%99%BA%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B%E5%BF%85%E8%A6%81%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99?x-oss-process=image/resize,p_40 "166203419060386[整理と共有] VSCode は vue プロジェクトを開発するためにプラグインをインストールする必要があります")
15. karaFileHeader
機能: 主にファイルヘッダーのコメントと関数のコメントに使用されます。つまり、ショートカット キーを押すと、設定したコメント。設定がない場合は、プラグインのデフォルトのアノテーションが生成されます。
ファイルヘッダーコメントのショートカットキーwindow：ctrl win i，mac：ctrl cmd i
関数コメントのショートカット キーwindow：ctrl win t,mac：ctrl cmd t、にカーソルを置く必要があります。まずは機能を選択してOKし、ショートカットキーを押します。
設定ドキュメント: https://github.com/OBKoro1/Koro1FileHeader/wiki/インストールとクイック スタート
VSCode の詳細については、次のサイトを参照してください: vscode チュートリアル!
以上が[整理と共有] VSCode は vue プロジェクトを開発するためにプラグインをインストールする必要がありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
Visual Studioの価格設定：サブスクリプションモデルの理解Apr 27, 2025 am 12:15 AMVisualStudioサブスクリプションは、さまざまな開発者のニーズに適した複数のレベルで利用できます。 1.基本バージョンは無料で、個人や小さなチームに適しています。 2。プロフェッショナルやエンタープライズなどの高度なバージョンは、エンタープライズユーザーに適した高度なツールとチームコラボレーション機能を提供します。
Visual Studio Vs. VSコード：パフォーマンスとリソースの使用Apr 26, 2025 am 12:18 AMパフォーマンスとリソースの使用におけるVisualStudioとVSCodeの違いは、主に以下に反映されています。1。起動速度：VSCODEは高速です。 2。メモリの使用量：VSCODEは低くなります。 3。CPUの使用法：VisualStudioは、コンピレーションとデバッグ中に高くなります。選択するときは、プロジェクトの要件と開発環境に基づいて決定する必要があります。
ビジュアルスタジオ：C＃、CなどのIDEApr 25, 2025 am 12:10 AMVisualStudio（VS）は、Microsoftが開発した強力な統合開発環境（IDE）であり、C＃、C、Pythonなどの複数のプログラミング言語をサポートします。1）コード編集、デバッグ、バージョン、テストなどの機能セットを提供します。 2）強力な編集者とデバッガーを介したプロセスコード、RoslynおよびClang/MSVCコンパイラプラットフォームを使用した高度なコード分析と再構築をサポートします。 3）基本的な使用法は、C＃コンソールアプリケーションの作成に似ており、高度な使用は多型を実装するようなものです。 4）ブレークポイントの設定、出力ウィンドウの表示、インスタントウィンドウの使用により、一般的なエラーをデバッグできます。 5）パフォーマンス最適化の提案には、非同期プログラミングの使用、コード再構成、パフォーマンス分析が含まれます。
Visual Studio：コードコンパイル、テスト、展開Apr 24, 2025 am 12:05 AMVisualStudioでは、コードをコンパイル、テスト、展開する手順は次のとおりです。1。コンパイル：VisualStudioのコンパイラオプションを使用して、ソースコードを実行可能ファイルに変換し、C＃、C、Pythonなどの複数の言語をサポートします。 2。テスト：組み込みのMSTESTとNUNITを使用してユニットテストを実行して、コードの品質と信頼性を向上させます。 3。展開：セキュリティとパフォーマンスを確保するために、Web展開、Azure展開などを通じて、開発環境から生産環境へのアプリケーションを転送します。
ビジュアルスタジオ：統合開発環境の紹介（IDE）Apr 23, 2025 am 12:02 AMVisualStudioismicRosoft'sFlagshipide、サポートMultipleMingLanguagesAndenHancingCodingEfficiency.1）itOffersfeatureSlisensensenseforCodeprediction、Multi-tabbedinterfaceforprojectmanagement、およびtoolsfordebugging、Refactoring、およびversionControl.2
Visual Studio：無料および有料の提供物を探索しますApr 22, 2025 am 12:09 AMVisualStudioの無料バージョンと有料バージョンの主な違いは、機能の豊富さとサポートされているサービスです。無料版（コミュニティ）は、個々の開発者や小チームに適しており、基本的な開発ツールを提供しています。有料版（プロフェッショナルおよびエンタープライズ）は、大規模なプロジェクトやエンタープライズレベルの開発に適した高度なデバッグやチームコラボレーションツールなどの高度な機能を提供します。
Visual Studio Community Edition：説明した無料オプションApr 21, 2025 am 12:09 AMVisualStudioCommunityeditionは、個々の開発者、小規模チーム、教育機関に適した無料のIDEです。 1）コード編集、デバッグ、テスト、バージョンの制御などの機能を提供します。 2）Roslynコンパイラプラットフォームに基づいて、複数のプログラミング言語をサポートし、GITとTFVCを統合します。 3）高度な機能には、ユニットテストが含まれます。最適化の提案には、不要な拡張機能の電源を切ること、軽量エディターの使用が含まれます。
ビジュアルスタジオ：簡単にアプリケーションを構築しますApr 20, 2025 am 12:09 AMVisualStudioは、Microsoftが開発した統合開発環境（IDE）であり、C＃、C、Pythonなどを含むさまざまなプログラミング言語をサポートしています。 2.デバッガーでは、ブレークポイントの設定、ステップバイステップのコード実行、および問題の識別が可能になります。 3。初心者にとっては、シンプルなコンソールアプリケーションを作成することは、始めるのに最適な方法です。 4.高度な使用には、プロジェクト管理や依存関係の注入などの設計パターンの適用が含まれます。 5.一般的なエラーは、デバッグツールを段階的に解決できます。 6.パフォーマンスの最適化とベストプラクティスには、コードの最適化、バージョン制御、コード品質検査、自動テストが含まれます。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!
mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。
ホットトピック
7749
15164314139752129325123429