WebStorm 2020.1ヘルプ

Vue.js

Vue.js(英語) is a framework for developing user interfaces and advanced single-page applications. WebStorm provides support for the Vue.js building blocks of HTML, CSS, and JavaScript with Vue.js-aware code completion for components, including components defined in separate files, attributes, properties, methods, slot names, and more.

With the built-in debugger, you can debug your Vue.js code right in WebStorm, which can automatically generate the necessary run/debug configurations you need: an npm configuration that launches the development server and starts your application in the development mode and a JavaScript デバッグ configuration that launches a debugging session.

始める前に

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

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

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

The recommended way to create a new Vue.js app is Vue CLI(英語) , which WebStorm downloads and runs for you using npx(英語).

Of course, you can still download Vue CLI yourself or create an empty WebStorm project as described in プロジェクトを作成 and bootstrap it with Vue.js and other tools, such as babel(英語), webpack(英語), ESLint(英語) , etc.

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

  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. To bootstrap your application with babel(英語) and ESLint(英語) , select the デフォルトのプロジェクト設定を使用する checkbox.

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

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

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

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

    npm install vue

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

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

既にマシン上にあるアプリケーションソースを開きます

  • Click Open on the ようこそ screen or select ファイル | 開く from the main menu. In the dialog that opens, select the folder where your sources are stored.

バージョン管理からアプリケーションのソースを確認してください

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

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

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

コードの作成と編集

In .vue files, WebStorm recognizes script , style , and template blocks. You can use JavaScript and TypeScript inside script tags, Style Sheet languages inside style tags, and HTML and Pug inside template tags.

script タグ内でTypeScriptを使用すると、WebStormはタイプチェックのためにTypeScript 言語サービス(英語)を呼び出し、検出されたエラーをTypeScriptツールウィンドウのエラーおよびコンパイル・エラータブに表示します。詳細については、TypeScriptの検証を参照してください。または、TSLintを使用したVue.jsコンポーネントのLint TypeScriptに従ってTsLintを使用できます。

Vue.jsコンポーネント

WebStorm recognizes the .vue file type and provides a dedicated .vue file template for Vue.js components.

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

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

    ws_vue_file_template.png

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

コンポーネントの抽出

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

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

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

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

    ws_extract_vue_component.png

コード補完

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

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

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

    Vue.js: completion inside template tags

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

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

    Vue.js: completion for interpolations

完全なスロット名

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

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

    Completion for named Vue.js slots defined in your project
  • If you’re using Vuetify(英語) , Quasar(英語) , or BootstrapVue(英語) , code completion for slot names is also available.

    Completion for named Vue.js slots from library components

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

  • 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.

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

    Completion for templates inside template literals within a template property

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

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

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

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

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

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

パラメーターのヒント

パラメーターのヒントは、コードを読みやすくするためのメソッドや関数のパラメータ名を示します。デフォルトでは、リテラルまたは関数式であるが名前付きオブジェクトではない値に対してのみ、パラメーターヒントが表示されます。

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

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

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

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

Vue.jsライブテンプレート

With WebStorm, you can use a collection of Live templates for Vue.js adapted from the collection created by Sarah Drasner(英語).

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

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

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

    ws_vue_snippet.png

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

Prettier(英語) is a tool to format .js , .ts , .css , .less , .scss , .vue , and .json code. With WebStorm, you can format selected code fragments as well as entire files or directories using the Prettier で再フォーマット action. WebStorm adds this action as soon as you install Prettier as a dependency in your project or globally on your computer.

また、Prettierを構成して、特定のファイルが変更されるたびに再フォーマットし、変更が自動または手動で保存されるようにすることもできます。詳細については、Prettierでコードを再フォーマットするを参照してください。

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

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

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

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

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

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

    Pane above package.json: apply Prettier code style

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

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

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

Because typescript-tslint-plugin works only with TypeScript that is installed in the current project, make sure the typescript package from your project node_modules folder is selected in the TypeScript field on the TypeScript page of the 設定/環境設定 dialog Ctrl+Alt+S .

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 を使用不可にするを選択します。

Vue.jsアプリケーションの実行とデバッグ

For applications created with Vue CLI as described above, WebStorm generates two run/debug configurations with default settings:

  • An npm configuration with the default name npm serve. This configuration runs the npm serve command that launches the development server and starts your application in the development mode.

  • デフォルト名アプリケーションのデバッグJavaScript デバッグ構成。この設定はデバッグセッションを開始します。

Vue.jsアプリケーションを実行する

  • Select the npm serve run configuration from the list on the toolbar and click Run next to the list.

    Alternatively, run npm start in the ターミナル Alt+F12 or double-click the start task in the npm tool window ( 表示 | ツール・ウィンドウ | npm ).

  • Wait till the application is compiled and the development server is ready. Open your browser at http://localhost:8080/ to view the application.

開発サーバーが稼働しているときは、ソースファイルを変更して更新を保存するとすぐに、アプリケーションが自動的に再ロードされます。

Vue.jsアプリケーションをデバッグする

  1. Set the breakpoints in your code.

  2. Start the application in the development mode as described above and wait till the application is compiled and the development server is ready.

  3. To view the application, open your browser at the URL that is shown in the 実行 tool window, by default it is http://localhost:8080/

    別のポートを使用している場合、またはアプリケーションがVue CLIで作成されていない場合は、アプリケーションが実際に実行されているURLアドレスをコピーします。後でこのURLをデバッグ構成で指定します。

  4. Vue CLIを使用してアプリケーションを作成し、それがデフォルトのポート 8080で実行されている場合、WebStormはデフォルト名アプリケーションのデバッグJavaScript デバッグ構成を生成します。

    それ以外の場合は、新しいJavaScript デバッグ構成を作成します。実行 | 構成の編集に移動し、the Add iconをクリックして、リストからJavaScript デバッグを選択します。実行/デバッグ構成: JavaScript デバッグダイアログで、保存したURLをURLフィールドに貼り付けて設定を保存します。

  5. 構成のリストから、自動生成されたアプリケーションのデバッグ構成または新しく作成したカスタム構成を選択し、リストの横にある Debug をクリックしてデバッグセッションを開始します。

  6. When the first breakpoint is hit, switch to the デバッグツールウィンドウ and proceed as usual: step through the program, stop and resume program execution, examine it when suspended, explore the call stack and variables, set watches, evaluate variables, view actual HTML DOM, and so on.

最終更新日: 2020年7月08日

関連ページ:

実行/デバッグ構成: NPM

このページには、構成固有の項目の説明と、すべての実行/デバッグ構成に共通のオプションが記載されています。この構成の使用方法については、npmおよびYarnを参照してください。このダイアログで、npmおよびYarnスクリプトをローカルで実行するための構成を作成します。現在のコンテキストで「ローカルに」...

プラグインを管理する

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

プロジェクトを作成

WebStormでは、空のプロジェクトを作成したり、プロジェクトとしてフォルダーを開いたり、VCSからソースをチェックアウトしたり、プロジェクトを作成することができます。また、フレームワークテンプレートを使用してプロジェクトを生成することもできます。そのため、新しいアプリケーションは、必要なすべての...

npmおよびYarn

WebStorm integrates with thenpm,Yarn, andYarn 2, so you can install, locate, upgrade, and remove packages of reusable code from inside the IDE. TheNod...

TypeScriptサポート

WebStorm supports developing, running, and debuggingTypeScriptsource code. WebStorm recognizes.tsand.tsxfiles and provides full range of coding assist...

JavaScriptライブラリを構成する

WebStormでは、ライブラリとは、WebStormが編集したプロジェクトコードから取得する関数やメソッドに加えて、WebStormの内部知識に関数やメソッドを追加したファイルまたはファイルのセットです。プロジェクトの範囲では、そのライブラリはデフォルトで書き込み禁止になっています。WebStor...