WebStorm 2019.3ヘルプ

Vue.js

WebStormは、ユーザーインターフェースと高度なシングルページアプリケーションの開発を目的としたVue.js(英語)フレームワークと統合されています。

始める前に

  1. お使いのコンピューターにNode.js(英語)がインストールされていることを確認してください。

  2. プラグインのページでVue.jsバンドルプラグインが有効になっていることを確認してください。詳細については、プラグインを管理するを参照してください。

新しいVue.jsアプリケーションの作成

新しいVue.jsアプリを作成するための推奨される方法はVue CLI(英語)です。WebStormはnpx(英語)を使用してダウンロードして実行します。

もちろん、Vue CLIを自分でダウンロードすることも、空のWebStormプロジェクトを作成してそこにVue.jsをインストールすることもできます。

アプリケーションを作成するには

  1. メインメニューからファイル | 新規 | プロジェクトを選択するか、ようこそ画面で新規プロジェクトの作成をクリックします。新規プロジェクトの作成ダイアログが開きます。

  2. 左側のペインで、Vue.jsを選択します。

  3. 右側のペインで:

    1. プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。

    2. Node インタープリターフィールドに、使用するNode.jsインタープリターを指定します。リストから設定済みのインタープリターを選択するか、追加を選択して新しいインタープリターを設定します。

    3. Vue CLIリストから、npx --package @vue / cli vueを選択します。

      または、npmバージョン5.1以前の場合、ターミナル Alt+F12npm install --g @vue/cli を実行して、@vue/cli パッケージを自分でインストールします。アプリケーションを作成するときに、@vue/cli パッケージが保存されているフォルダーを選択します。

    4. babel(英語)ESLint(英語)でアプリケーションをブートストラップするには、デフォルトのプロジェクト設定を使用するチェックボックスを選択します。

  4. 作成をクリックすると、WebStormは必要なすべての設定ファイルを含むVue.js固有のプロジェクトを生成し、必要な依存関係をダウンロードします。実行ツールウィンドウで進行状況を確認できます。

空のWebStormプロジェクトを作成するには

  1. メインメニューからファイル | 新規 | プロジェクトを選択するか、ようこそ画面で新規プロジェクトの作成をクリックします。新規プロジェクトの作成ダイアログが開きます。

  2. 左側のペインで、空のプロジェクトを選択します。

  3. プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。

  4. 作成をクリックすると、WebStormが作成され、のプロジェクトが開きます。

空のプロジェクトにVue.jsをインストールするには

  1. Vue.jsを使用する空のプロジェクトを開きます。

  2. 埋め込みターミナルAlt+F12)に次のように入力します。

    npm install vue

既存のVue.jsアプリケーションから始める

既存のVue.jsアプリケーションの開発を続けるには、WebStormで開き、必要な依存関係をダウンロードします。

既にあなたのマシンにあるアプリケーションソースを開くには

  • ようこそ画面で開くをクリックするか、メインメニューからファイル | 開くを選択します。開いたダイアログで、ソースが保存されているフォルダーを選択します。

バージョン管理からアプリケーションソースをチェックアウトするには

  1. ようこそ画面でバージョン管理から取得をクリックするか、メインメニューからVCS | バージョン管理から取得を選択します。

  2. 呼び出されたダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。

依存関係をダウンロードするには

  • ポップアップで実行 'npm install'をクリックしてください。

    Opening an Angular application and downloading the dependencies from package.json

Vue.jsコンポーネントの作成

WebStormは .vue ファイルタイプを認識し、Vue.jsコンポーネント用の専用.vueファイルテンプレートを提供します。

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

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

    ws_vue_file_template.png

また、既存のコンポーネントから新しいVue.jsコンポーネントをコピーして貼り付けることなく、専用のインテンションアクションまたはリファクタリングを使用して抽出することもできます。新しく抽出されたテンプレートで使用されるすべてのデータとメソッドは、親コンポーネントに残ります。WebStormは、プロパティーとともに新しいコンポーネントに渡し、関連するスタイルをコピーします。

コンポーネントを抽出するには

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

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

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

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

コーディング支援

.vue ファイルでは、WebStormは script , style、および template ブロックを認識します。 script タグ内にはJavaScriptとTypeScriptを、style タグ内にはスタイルシート言語を、template タグ内にはHTMLとPugを使用できます。

script タグ内でTypeScriptを使用すると、WebStormは型チェックのためにTypeScript 言語サービス(英語)を呼び出し、TypeScriptツールウィンドウのエラーおよびコンパイル・エラータブに検出されたエラーを表示します。詳細はTypeScriptの確認を参照してください。

コードを完成させる

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

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

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

  • WebStormは、ライブラリーコンポーネントおよびプロジェクトで定義されたコンポーネントからのスロット(英語)名の補完を提供します。

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

    Completion for named Vue.js slots defined in your project

    Vuetify(英語)Quasar(英語)、またはBootstrapVue(英語)を使用している場合、スロット名にコード補完も使用できます。

    Completion for named Vue.js slots from library components
  • コンポーネントが複数のファイル(英語)定義されている場合(英語)、WebStormはコンポーネントのパーツ間のリンクを認識し、プロパティー、データ、およびメソッドに適切なコード補完を提供します。

    例:コンポーネントの一部が src 属性を介して vue ファイルにリンクされている個別のJavaScriptファイルとスタイリングファイルで定義されている場合、JavaScriptで定義されたプロパティーはメソッドのようにテンプレートで適切に完了します。

    Completion for vue.js components defined in separate files
  • コンポーネントの template プロパティーのテンプレートリテラル内のテンプレートは、このコードが template タグ内にあるかのように完了します。

    Completion for templates inside template literals within a template property

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

TSLintを使用したVue.jsコンポーネントのLint TypeScript

typescript-tslint-plugin(英語)を使用して、Vue.js単一ファイルコンポーネントのTypeScriptコードをリントできます。

typescript-tslint-plugin は現在のプロジェクトにインストールされているTypeScriptでのみ機能するため、プロジェクト node_modules フォルダーの typescript パッケージが、設定/環境設定ダイアログ(Ctrl+Alt+S)のTypeScriptページのTypeScriptフィールドで選択されていることを確認してください。

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

  1. 埋め込みターミナルAlt+F12)に次のように入力します。

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

  2. tsconfig.json ファイルの plugins プロパティーで、次のように入力します。

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

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

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

Vue.jsライブテンプレートによるコードの生成

WebStormを使用すると、Sarah Drasnerによって作成(英語)されたコレクション(英語)から調整されたVue.jsのLiveテンプレートのコレクションを使用できます。

Vue.js Liveテンプレートを使用するには

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

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

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

PrettierによるVue.jsコードの再フォーマット

Prettier(英語).js , .ts , .css , .less , .scss , .vue、および .json コードをフォーマットするためのツールです。WebStormでは、Prettier で再フォーマットアクションを使用して、選択したコードフラグメントとファイル全体またはディレクトリー全体をフォーマットできます。WebStormは、Prettierをプロジェクト内の依存関係としてインストールすると同時に、またはグローバルにコンピューターにインストールすると同時に追加します。Prettierからさらに学びましょう。

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

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

  • あるいは、Ctrl+Shift+A を押してアクションの検索リストからPrettier で再フォーマットを選択します。

    ws_reformat_with_prettier_vue.png

WebStormは、Prettierの構成からWebStormコードスタイル設定にキーコードスタイルルールを適用して、生成されたコード(リファクタリングやクイックフィックス後など)とPrettierですでに処理されたコードが一貫してフォーマットされるようにできます。

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

  • Prettierが有効になっているプロジェクトで、package.json を開き、タブ上部のペインで はい をクリックします。

    Pane above package.json: apply Prettier code style

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

最終更新日: 2019年11月24日

関連ページ:

プラグイン

WindowsとLinux用のmacOS用このページを使用してプラグインを管理します。プラグインリポジトリの閲覧、プラグインのインストール、削除、有効化、無効化、および更新を行います。主なコントロール:マーケットプレースこのタブを使用して、JetBrainsプラグインリポジトリからプラグインをブラウ...

プラグインを管理する

プラグインはWebStormのコア機能を拡張します。バージョン管理システム、アプリケーションサーバー、その他のツールとの統合を提供、さまざまな言語およびフレームワークに対するコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどを使用して、生産性をBoo...

一般

WindowsとLinux用のmacOS用設定/環境設定ダイアログの一般ページを使用して、エディターの動作を設定し、その表示をカスタマイズします。マウス動作の詳細ダブルクリックで選択したときに「キャメルハンプ」の単語設定を尊重するダブルクリックして単語を選択したときに、WebStormがキャメルハン...

TypeScript

WebStormはTypeScriptソースコードの開発、実行、およびデバッグをサポートしています。WebStormは.tsファイルを認識し、あなたからの追加のステップなしで編集するためのコーディング支援のフルレンジを提供します。TypeScriptファイルはアイコンでマークされています。TypeS...

Prettier

Prettierは.js,.ts,.css,.less,.scss,.vue、および.jsonコードをフォーマットするためのツールです。WebStormでは、Prettier で再フォーマットアクションを使用して、選択したコードフラグメントとファイル全体またはディレクトリー全体をフォーマットできます...

TSLint

WebStormの内部からTSLintコード検証ツールを使用し、アプリケーションを実行することなくTypeScriptコードでよくある間違いを確認できます。ツールが起動すると、開いているすべてのTypeScriptファイルが検出され、検出された問題がマークされます。また、TypeScriptコードを...