Vue.js

Vue.jsコンポーネントを作成する

• プロジェクトツールウィンドウで、新しいコンポーネントの親フォルダーを選択し、リストからVue コンポーネントを選択します。

  

コンポーネントの抽出

1. 抽出してコンポーネント抽出を呼び出すテンプレートフラグメントを選択します。

   • インテンションアクションを使用するには、Alt+Enterを押してから、リストからVue コンポーネントの抽出を選択します。

   • リファクタリングを使用するには、メインメニューまたは選択範囲のコンテキストメニューからリファクタリング | 抽出 | Vue コンポーネントの抽出を選択します。

2. 新しいコンポーネントの名前を入力します。この名前が既に使用されているか無効である場合、WebStormは警告を表示します。それ以外の場合は、新しい単一ファイルコンポーネントが作成され、親コンポーネントにインポートされます。

   

スクリプト、スタイル、テンプレートブロック内の完全なコード

• デフォルトでは、WebStormは script ブロック内のECMAScript 6および style ブロック内のCSSにコード補完を提供します。

  

• template タグ、コード補完 Ctrl+Space 内、およびVue.jsコンポーネントと属性の定義 Ctrl+B へのナビゲーションが利用可能です。

  

完全なVue.jsプロパティとメソッド

• WebStormは、Vue.jsのプロパティ、data オブジェクトのプロパティ、計算されたプロパティ、およびメソッドの補完も提案します。

  

完全なスロット名

• WebStorm provides completion for the names of slots(英語) from library components and from components defined in your project.

  プロジェクトに名前付きスロットを持つコンポーネントが含まれている場合、WebStormは template タグの v-slot ディレクティブにこれらの名前の提案を表示します。

  

• If you’re using Vuetify(英語) , Quasar(英語) , or BootstrapVue(英語) , code completion for slot names is also available.

  

別のファイルで定義された完全なコンポーネント

• If a component is defined in several files(英語), WebStorm recognizes the links between the parts of the component and provides proper code completion for properties, data, and methods.

  For example, if the parts of your component are defined in separate JavaScript and stylesheet files that are linked in the vue file through the src attribute, properties defined in JavaScript are properly completed in the template as methods do.

  

• コンポーネントの template プロパティのテンプレートリテラル内のテンプレートは、このコードが template タグ内にあるかのように補完されます。

  

  テンプレートが別のHTMLファイルで定義され、template プロパティにリンクされている場合、完了も使用できます。

Vue.jsインジェクション内の完全なコード

HTMLファイル内のVue.jsインジェクション内で、WebStormはVue.js構文を認識し、それに応じてコードを強調表示します。これらのライブラリをプロジェクトの依存関係に追加せずに、HTMLファイルのCDNからリンクされているVue.jsライブラリからシンボルの補完を取得することもできます。

1. 外部Vue.jsライブラリへのCDNリンクを含むHTMLファイルを開きます。WebStormはリンクを強調表示します。

2. ライブラリの補完を有効にするには、リンク上で Alt+Enter を押し、リストからライブラリをダウンロードを選択します。または、リンクの上にマウスを置いてライブラリをダウンロードをクリックします。

ライブラリが環境設定 | 言語とフレームワーク | JavaScript | ライブラリページのJavaScriptライブラリのリストに追加されます。詳細については、CDNリンクを介して追加されたライブラリの構成を参照してください。

パラメータのヒントを設定する

1. 設定/環境設定ダイアログ Ctrl+Alt+S を開き、エディター | インレイ・ヒント | Vueに進みます。

2. リストからパラメーターのヒントを選択し、パラメーターのヒントの表示チェックボックスが選択されていることを確認してから、パラメーターヒントを表示するコンテキストを指定します。

3. 一部のメソッドおよび関数では、WebStormはどのコンテキストでもパラメーターヒントを表示しません。ブラックリスト...をクリックして、これらのメソッドと機能を表示したり、それらのパラメーターヒントを有効にしたり、リストに新しいアイテムを追加したりします。

1. 使用するテンプレートの省略形を入力するか、Ctrl+J を押して、使用可能なテンプレートのリストから選択します。

2. テンプレートを展開するには、Tabを押します。

3. テンプレート内のある変数から別の変数に移動するには、Tab をもう一度押します。

   

Prettierでコードを再フォーマットする

• エディターで、再フォーマットするコードフラグメントを選択して Ctrl+Alt+Shift+P を押すか、コンテキストメニューからPrettier で再フォーマットを選択します。ファイルまたはフォルダーを再フォーマットするには、プロジェクト ツールウィンドウでそれを選択し、Ctrl+Alt+Shift+P を押すか、コンテキストメニューからPrettier で再フォーマットを選択します。

• 現在のプロジェクトのファイルが変更されたときにPrettierを自動的に実行するには、設定/環境設定ダイアログ Ctrl+Alt+Sを開き、言語とフレームワーク | JavaScript | Prettierに移動し、ファイルの保存時に実行チェックボックスを選択し、そのようなファイルが保存されるたびに再フォーマットされるファイルのセットを定義するパターンを指定します。

Prettierコードスタイルルールを適用する

• In the project where Prettier is enabled, open package.json and click Yes in the pane at the top of the tab.

  

• Prettierコードスタイルを再適用するには（ペインでいいえをクリックするかコードスタイルを変更した後）、Ctrl+Shift+A を押してアクションの検索リストからPrettierコードスタイルルールを適用を選択します。

typescript-tslint-pluginをインストールして構成する

1. 埋め込まれたターミナル（Alt+F12）で、次のように入力します。

   npm install --save-dev typescript-tslint-plugin

2. In the plugins property of your tsconfig.json file, type:

   { "compilerOptions": { "plugins": [{"name": "typescript-tslint-plugin"}] } }

3. typescript-tslint-pluginを使用している場合、TSLintはTypeScript 言語サービス(英語)を介して実行されているため、WebStormとのTSLint統合を無効にして、エラー報告の重複を回避できます。

   これを行うには、設定/環境設定ダイアログ Ctrl+Alt+Sを開き、言語とフレームワーク | TyprScript | TSLintに移動してTSLint を使用不可にするを選択します。