Vue テンプレート構成と Webstorm コード形式仕様設定

Vue テンプレート構成と Webstorm コード形式仕様設定

1. コンパイラコードフォーマット仕様設定

通常、コードを書くとき、コードのインデントは 4 スペースですが、フロントエンドでは、グローバル投票統計によると、コードのインデントには 2 スペースを使用することが推奨されています。

まず、 webstormで設定を開きます。Mac mac使用している場合は、 command + , ショートカットを使用して、 Editor-->Code Style-->HTMLに移動し、 Tab sizeIndentの値を 2 に変更します。同様に、 JavaScriptでも 2 に変更します。

2. Vueテンプレートの設定

htmlを使用してvueを実践する場合、毎回vueインスタンス オブジェクトを作成したくない場合は、 htmlでテンプレートを設定し、 vueタグを使用して直接コードを導入することができます。

webstormの設定を開き、 Editor-->Live Templatesに移動し、 vueを選択して、 +をクリックします。

Live Templateを選択し、 Abbrevitionvueと入力し、 Template textに設定する必要があるテンプレート テキスト コンテンツを書き込みます。

最後に、現在のページの「!」の部分でDefineクリックします。

次にHTMLをチェックし、 okをクリックして完了します。

最終的な効果を得るには、 HTMLvueを直接入力し、 tabを押すと、設定したテンプレート コードがすぐに表示されます。


これで、 vueテンプレートの構成とwebstormコードフォーマット仕様の設定に関するこの記事は終了です。vue vue webstorm関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Webstorm と Chrome を使用して Vue プロジェクトをデバッグする方法
  • WebStormはVue3統合APIのソリューションを正しく識別できません
  • Idea または Webstorm を使用して Vue プロジェクトを実行する方法 (詳細な手順)
  • Vueプロジェクトに基づいてresolves.alias: ''@''パスを設定し、Webstormに適応します
  • Webstorm で vue-cli スキャフォールドを構築する方法に関する簡単なチュートリアル
  • Idea および WebStorm の Vue cli スキャフォールディング プロジェクトで Webpack エイリアスが使用できない問題を解決します
  • webstorm+vueでプロジェクトを初期化する方法
  • vue: WebStorm で高速コンパイルと実行を設定する方法
  • WebStormにおけるVue構文サポートの詳細な説明
  • Webstorm と .vue の es6 構文エラーの解決策

<<:  mysqlにコメント情報を追加する実装

>>:  docker を使用した pxc クラスターのインストールに関する詳細なチュートリアル

推薦する

スタートアップ企業が丹念に作り上げた優れたウェブデザイン17選

スタートアップ企業は、型破りな仕事のやり方、ユニークなビジネスモデル、特徴的な製品やサービス、パーソ...

モバイル開発におけるHTML5開発の現状を深く理解する

「私たちは次の一連のモバイル製品を HTML5 で作成しています。」 「ええ、最近は多くの人が Ap...

React+axios は github 検索ユーザー機能を実装します (サンプル コード)

負荷リクエスト成功リクエストに失敗しました cmdをクリックし、ファイルパスでEnterキーを押しま...

Linux におけるゼロコピー技術の使用に関する簡単な分析

この記事では、Linux におけるいくつかの主要なゼロコピー テクノロジと、ゼロコピー テクノロジを...

Apache ab同時負荷ストレステストの実装方法

腹筋コマンドの原則Apache の ab コマンドは、マルチスレッドの同時リクエストをシミュレートし...

テーブルはセルとimg画像を結合してtd HTML全体を埋めます

ソースコード(一部のクラスは削除されています):コードをコピーコードは次のとおりです。 <テー...

Docker を使用した Redis マスタースレーブレプリケーションの実践の詳細説明

目次1. 背景2. 操作手順3. Dockerをインストールする4. 主なサービス構成5. サービス...

シェル スクリプトを使用してワンクリックで MySQL 5.7.29 をインストールする方法

この記事は51CTOブログの著者wjw555の作品を参照しています。スクリプトの内容: vim イン...

Linux システムの busybox に mkfs.vfat コマンドを移植する

オーディオおよびビデオ ファイルを保存するためのディスク寿命を延ばすには、ディスクをフォーマットする...

DockerToolBox ファイルマウント実装コード

docker を使用すると、ファイルをマウントできない場合があります。これは、仮想マシンの共有フォル...

CSS3 でテキストの点滅効果を実現する 3 つの方法 サンプルコード

1. 透明度を変更してテキストを徐々に点滅させると、次のような効果が得られます。 <!DOCT...

JS で async と await を使用する方法

目次1. 非同期2. 待つ: 3. 包括的なアプリケーション1. 非同期async 、非同期コードが...

MySQL 条件付きクエリと使用法および優先順位の例の分析

この記事では、例を使用して、MySQL 条件クエリ and or の使用方法と優先順位を説明します。...

HTML 選択タグにリンクを追加する 3 つの方法

最初のもの:コードをコピーコードは次のとおりです。 <html> <ヘッド>...

SSL を実装するために nginx を設定する方法の例

環境説明サーバーシステム: Ubuntu 18.04 64ビットnginx: 1.14この記事では主...