[整理と共有] VSCode は vue プロジェクトを開発するためにプラグインをインストールする必要があります

この記事では、vue プロジェクトを開発するときにインストールする必要がある VSCode プラグインをいくつか整理します。

以前、プロジェクトの開発にウェブストームを使用しました。ウェブストームは使いやすいですが、大きな欠点が 2 つあります。まず、スタックしすぎます。3 年前に購入したラップトップです。プロジェクトを開くのは基本的に毎日再起動する必要があり、プロジェクトを 3 つ開くとすぐにフリーズします。2 つ目は有料です。オンラインにはクラック版がありますが、時々無効になってしまうのが辛すぎます。

したがって、これを放棄し、軽量で無料の vscode (正式名は Visual Studio Code) を使用することにしました。数日間の検討の結果、vs code に以下のプラグインをインストールしたところ、基本的に Webstorm と同等かそれ以上の効果が得られ、今後はラグや障害を気にする必要がなくなりました。 [推奨学習: 「vscode 入門チュートリアル 」]

プラグインのインストールと手順

1. 中国語 (簡体字) (简体中文) ) Visual Studio Code 用言語パック

機能: VS Code の中国語版

インストール手順:

手順: インストールのステップ 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を見つけます

次のコードをコピーします。最初の 2 行はプラグインに必要です。最後の 2 行はプラグイン 12 とプラグイン 13 です。プラグイン 12 と 13 をインストールしない場合に必要なものは次のとおりです。最後の 2 行を削除できます。

{
  "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 の優れたアイコン

機能: プロジェクト構造の前に対応するアイコンを配置し、より美しく見えるようにします (必須ではありません)

13. One Dark Pro

関数: vs コードスキン、インターフェースをより美しくする (必須ではありません)

14. Markdown Preview Enhanced

機能: 通常、各プロジェクトには README.md ファイルがあり、インストール後、各 md ファイルを右クリックして効果をプレビューできます

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 サイトの他の関連記事を参照してください。