WebStorm 2024.1 ヘルプ

Vue.js

Vue.js(英語) は、ユーザーインターフェースと高度な単一ページアプリケーションを開発するためのフレームワークです。WebStorm は、個別のファイル、属性、プロパティ、メソッド、スロット名などで定義されたコンポーネントを含むコンポーネントの Vue.js 対応コード補完を使用して、HTML、CSS、JavaScript の Vue.js ビルドブロックのサポートを提供します。

ビルトインデバッガーを使用すると、Vue.js のコードを WebStorm で直接デバッグすることができます。WebStorm は、開発サーバーを起動して開発モードでアプリケーションを起動する npm 構成や、デバッグセッションを起動する JavaScript デバッグ設定など、必要に応じて必要な実行 / デバッグ構成を自動的に生成します。

始める前に

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

  2. プロジェクトでローカル Node.js インタープリターが構成されていることを確認します。設定ダイアログ(Ctrl+Alt+S)を開き、言語 & フレームワーク | Node.js に移動します。Node インタープリターフィールドには、デフォルトのプロジェクト Node.js インタープリターが表示されます。

    ローカル Node.js インタープリターの構成の詳細を参照してください。

  3. 設定 | プラグインページのインストール済みタブで、Vue.js および JavaScript デバッガーに必要なプラグインが有効になっていることを確認します。詳細については、「プラグインのマッピング」を参照してください。

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

新しい Vue.js アプリを作成するための推奨される方法は、create-vue(英語) 公式 Vue プロジェクトスキャフォールディングツールです。これは、WebStorm によってダウンロードされ、npx(英語) を使用して実行されます。

Vue CLI(英語) を使用することもできます。このオプションを選択すると、WebStorm もダウンロードされ、npx で実行されます。

もちろん、これらのツールを自分でダウンロードするか、プロジェクトを作成に従って空の WebStorm プロジェクトを作成し、Vue.js やその他のツール (Vite(英語)babel(英語)webpack(英語)ESLint(英語) など) でブートストラップすることができます。

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

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

  3. 右側のペインで:

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

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

    3. Vue CLI リストから、npx create-vue (推奨) または npx --package @vue/cli vue を選択します。

      または、npm バージョン 5.1 以前の場合は、コマンドラインシェルまたはターミナル Alt+F12npm install --g create-vue または npm install --g @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 から取得をクリックします。

    あるいは、メインメニューからファイル | 新規 | バージョン管理からプロジェクトGit | クローンVCS | バージョン管理から取得を選択します。

    メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。例: Mercurial または Perforce

  2. 表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。詳細については、プロジェクトをチェックアウトする (クローン) を参照してください。

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

  • ポップアップで 'npm install' の実行または実行 'yarn install' をクリックします。

    Open an application and download the dependencies

    npm(英語)Yarn 1(英語)、または Yarn 2(英語) を使用できます。詳細については、npm および Yarn を参照してください。

  • あるいは、エディターまたはプロジェクトツールウィンドウの package.json のコンテキストメニューから 'npm install' の実行または実行 'yarn install' を選択します。

プロジェクトのセキュリティ

WebStorm の外部で作成され、そこにインポートされたプロジェクトを開くと、WebStorm は、未知ソースコードを使用してこのプロジェクトを処理する方法を決定できるダイアログを表示します。

Untrusted project warning

次のいずれかのオプションを選択します。

  • セーフモードでプレビュー : この場合、WebStorm はプロジェクトをプレビューモードで開きます。これは、プロジェクトのソースを参照することはできますが、タスクやスクリプトを実行したり、プロジェクトを実行 / デバッグしたりすることはできないことを意味します。

    WebStorm はエディター領域の上部に通知を表示し、プロジェクトを信頼リンクをクリックして、いつでもプロジェクトをロードできます。

  • プロジェクトを信頼 : この場合、WebStorm はプロジェクトを開いてロードします。これは、プロジェクトが初期化され、プロジェクトのプラグインが解決され、依存関係が追加され、すべての WebStorm 機能が使用可能になることを意味します。

  • 開かない : この場合、WebStorm はプロジェクトを開きません。

プロジェクトのセキュリティの詳細を参照してください。

コードを記述して編集する

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

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

Vue.js コンポーネント

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

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

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

    Create a Vue.js component

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

コンポーネントの抽出

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

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

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

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

    ws_extract_vue_component.png

コード補完

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

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

    Vue.js: ES6  の補完機能 <script> tag
  • Inside the template tag, code completion Ctrl+Space and navigation to the definition Ctrl+B for Vue.js components and attributes is available.

    Vue.js: completion inside template tags

Complete Vue.js properties and methods

  • WebStorm also suggests completion for Vue.js properties, properties in the data object, computed properties, and methods.

    Vue.js: completion for interpolations

Complete slot names

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

    If your project contains a component with named slots, WebStorm shows suggestions for these names in the v-slot directive of a template tag.

    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

Complete components defined in separate files

  • 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
  • Templates inside template literals in the template property of a component get completion just as if this code were inside a template tag.

    Completion for templates inside template literals within a template property

    Completion is also available if a template is defined in a separate HTML file and then linked to the template property.

Complete code inside Vue.js injections

Within Vue.js injections inside HTML files, WebStorm recognizes Vue.js syntax and highlights your code accordingly. You can also get completion for symbols from Vue.js libraries that are linked from a CDN in an HTML file without adding these libraries to your project dependencies.

Download libraries linked via CDN
  1. Open the HTML file with a CDN link to an external Vue.js library. WebStorm highlights the link.

  2. To enable completion for the library, press Alt+Enter on the link and select Download library from the list. Alternatively, hover over the link and click Download library.

The library is added to the list of JavaScript libraries on the Settings | Languages and Frameworks | JavaScript | Libraries page. For more information, refer to Configuring a library added via a CDN link.

Parameter hints

Parameter hints show the names of parameters in methods and functions to make your code easier to read. By default, parameter hints are shown only for values that are literals or function expressions but not for named objects.

Configure parameter hints

  1. Open the Settings dialog (Ctrl+Alt+S) and go to Editor | Inlay Hints.

  2. Expand Vue under Parameter names.

  3. Specify the context in which you want parameter hints shown by selecting the corresponding checkboxes.

    The preview shows how the changes you make in the settings affect the code appearance.

  4. For some methods and functions, WebStorm does not show parameter hints in any context. Click Exclude list... to view these methods and functions, possibly enable parameter hints for them, or add new items to the list.

  5. To hide parameter hints for any value type in any context, clear the Vue template checkbox under Parameter names.

Navigate with component usages

Use inlay hints to jump from a component to its usages. If a component is used more than once, WebStorm shows a list of detected usages. Select the relevant usage to jump to it.

Show Component Usages

Show component usages hints are displayed by default. To turn them off, press Ctrl+Alt+S to open settings and select Editor | Inlay Hints. Then clear the Component usages checkbox under Code vision.

Alternatively, right-click a Show component usages hint in the editor and select Hide 'Code Vision: Component usages' Inlay Hints.

Turn off Component usages in the editor

Vue.js live templates

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

  1. Type the abbreviation of the template to use or press Ctrl+J and select it from the list of available templates.

  2. To expand the template, press Tab.

  3. To move from one variable to another inside the template, press Tab again.

    Vue.js code snippet (live template)

Nuxt.js in Vue.js applications

With WebStorm, you can use the Nuxt.js(英語) framework in your Vue.js applications. The recommended way to set up a Nuxt.js(英語) app in WebStorm is use the create-nuxt-app command. Alternatively, you can install Nuxt.js in an existing project.

Create a project with create-nuxt-app

  1. Create an empty WebStorm project.

    1. Click Create New Project on the Welcome screen or select File | New | Project from the main menu. The New Project dialog opens.

    2. In the left-hand pane, choose Empty Project. In the right-hand pane, specify the application folder and click Create.

  2. Open the embedded Terminal (Alt+F12) and type:

    npx create-nuxt-app <project name>

    or

    yarn create nuxt-app <project name>

  3. The wizard asks you some questions. After you answer them, a Nuxt project is initialized in the current folder and is ready to use in WebStorm.

Learn more from the Nuxt.js official website(英語).

Install Nuxt.js in an existing project

  • Open the embedded Terminal (Alt+F12) and type:

    npm install --save nuxt

Install the @nuxt/types package

With the @nuxt/types package, you can get better code completion.

  • If you’re using a Nuxt.js version from 2.9.0 onwards and don’t have the @nuxt/types package installed, WebStorm notifies you about it and suggests installing it as a development dependency. Click the Install @nuxt/types as dev dependency link in the notification popup.

    Notification about missing @nuxt/types

    If you close the popup, you can still install @nuxt/types by clicking the Install @nuxt/types as dev dependency link in the Event Log tool window (View | Tool windows | Event Log).

  • Alternatively, open the embedded Terminal (Alt+F12) and type:

    npm install --save-dev @nuxt/types

Nuxt.js-aware coding assistance

WebStorm suggests code completion and shows quick documentation for all core Nuxt.js components(英語).

Completion and quick doc for Nuxt component

WebStorm resolves references to the Vuex store(英語) and provides highlighting and completion for them.

Code completion for Vuex store

WebStorm resolves all references to assets(英語) stored in the static folder in the <img src='/logo.png/> format.

Resolution for images from static folder

Edit nuxt.config.js

WebStorm provides proper completion suggestions for the nuxt.config.js(英語) configuration file.

Code completion in nuxt.config.js

On hover, you’ll also see the Documentation popup showing the type information for the Nuxt options used in the file.

Quick documentation popup in nuxt.config.js

Module resolution

WebStorm supports Nuxt.js-specific webpack setup. Starting with Nuxt.js 2.12.0, WebStorm automatically finds the webpack.config.js configuration file and uses the module resolution rules from it for coding assistance.

Notification about using webpack.config.js for module resolution and code completion

TypeScript in Vue.js applications

If your Vue.js project is written in TypeScript, you need to choose the service to get coding assistance for .ts and .vue files from. That can be either WebStorm integration with the TypeScript Language Service(英語), or the Vue Language server (Volar)(英語), or the internal WebStorm parser and code inspections.

For TypeScript 5.0.0 and later, the Vue Language Server (Volar) is used by default because the TypeScript Language Service is not supported for these versions.

For earlier versions, the default solution is integration with the TypeScript Language Service, but you can also use integration with the Vue Language Server (Volar).

  1. In the Settings dialog (Ctrl+Alt+S) , go to Languages & Frameworks | TypeScript | Vue.

  2. Specify the service to use.

    • By default, the Automatically option is chosen. In this mode, WebStorm detects the TypeScript version used in your project and enables integration with the appropriate service.

    • If you select Vue Language Server (Volar), WebStorm will always provide coding assistance in .ts and .vue files through integration with the Vue Language Server, no matter which version of TypeScript you are using.

      Note that the Vue Language Server coding assistance will be restricted to error highlighting only. Code completion and navigation will be provided by the WebStorm internal support.

    • Select TypeScript to always use the TypeScript Language Service in .ts and .vue files.

      Note that the TypeScript Language Service does not work with TypeScript version 5.0.0 and later. Therefore, if your project is using one of these versions, error highlighting will be provided through the WebStorm internal code inspections.

    • Select Disabled to turn both the TypeScript Language Service and the Vue Language Server off and get coding assistance from the WebStorm internal support.

  3. In the Vue Language Server field, specify the Vue Language Server version to use.

    • Accept the suggested default version.

    • If you have another version of @vue/language-server package installed, this version appears on the list. You can select it or accept the default version.

      Select a custom Vue Language Server
    • Alternatively, click Select or the Browse button and specify the path to a custom @vue/language-server package.

Formatting in Vue.js applications

Configuring formatting in Vue.js applications

Configure indentation

By default, code within top-level tags is indented uniformly, in the Vue.js-specific style. You can configure this indentation to depend on the language used, for example, be HTML or Pug-specific.

  1. In the Settings dialog (Ctrl+Alt+S) , go to Editor | Code Style | Vue Template, and open the Tabs and Indents tab.

  2. By default, the contents of all top-level tags are indented uniformly, in the Vue.js-specific style. Accept the default indentation settings or customize them using the controls on the page. As you change the settings, the Preview in the right pane shows how the changes affect code formatting.

    To have the code inside top-level tags indented with regard to its language, select Specific to the language in the block.

  3. In the Indent children of top-level tag field, specify the top-level tags where the code should have initial indentation.

    By default, only the code inside template tags has initial indentation. If necessary, add other tags using commas as separators. For example, if you specify script in the field, the code inside all script tags gets initial indentation as shown in the Preview pane.

Configure spaces

  1. By default, WebStorm automatically inserts spaces after the opening curly brace ({) and before the closing one (}) in Vue.js text interpolations with Mustache syntax(英語).

    To suppress inserting spaces automatically, open the Settings dialog (Ctrl+Alt+S) , go to Editor | Code Style | Vue Template, then open the Spaces tab and clear the Interpolations checkbox.

  2. By default, when you enclose a code fragment in a block comment, the text starts right after the opening /* characters without any spaces. Before the closing */ characters no space is inserted either.

    This default code style may conflict with some linters' rules, for example, ESLint. To improve the code style, configure enclosing block comments in leading and trailing spaces.

    In the Settings dialog (Ctrl+Alt+S) , go to Editor | Code Style | JavaScript or Editor | Code Style | TypeScript, open the Code Generation tab, and configure the spaces and formatting in the Comments area.

Configure wrapping and braces

  1. In the Settings dialog (Ctrl+Alt+S) , go to Editor | Code Style | Vue Template, and open the Wrapping and Braces tab.

  2. If a JavaScript expression inside a Vue.js interpolation(英語) has line breaks, WebStorm automatically starts this JavaScript expression from a new line and adds a new line after it.

    Clear the New line after '{{' and the New line before '}}' checkboxes to change this default behavior.

  3. Configure multiple right margins as described in Vue.js code style: Visual guides.

  4. Configure wrapping in interpolations as described in Wrapping options.

Reformat Vue.js code with Prettier

You can configure Prettier to reformat specific files every time such file is changed and the changes are saved automatically or manually, refer to Run Prettier automatically on save.

Also, Prettier can be set as default formatter for specific files. It will run against such files every time you reformat your code with Ctrl+Alt+L.

For more information, refer to Reformat code with Prettier.

Reformat code with Prettier

  • In the editor, select the code fragment to reformat. To reformat a file or a folder, select it in the Project tool window. Then press Ctrl+Alt+Shift+P or select Reformat with Prettier from the context menu.

  • To run Prettier automatically against specific files, open the Settings dialog (Ctrl+Alt+S) , go to Languages & Frameworks | JavaScript | Prettier, and use the On code reformatting and On save checkboxes to specify the actions that will trigger Prettier.

    For more information, refer to Run Prettier automatically on save and Set Prettier as default formatter.

WebStorm can apply the key code style rules from the Prettier's configuration to the WebStorm Code Style settings so that generated code (for example, after refactoring or quick-fix) and the code that is already processed with Prettier are formatted consistently.

Apply Prettier code style rules

  • 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
  • To re-apply the Prettier code style (after you've clicked No in the pane or modified the code style), press Ctrl+Shift+A and select Apply Prettier Code Style Rules from the Find Action list.

Linting TypeScript in Vue.js components using TSLint

You can lint TypeScript code in your Vue.js single file components using typescript-tslint-plugin(英語).

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 Settings dialog (Ctrl+Alt+S) .

Install and configure typescript-tslint-plugin

  1. In the embedded Terminal (Alt+F12) , type:

    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. When you are using typescript-tslint-plugin, TSLint is running via the TypeScript Language Service(英語) so you can disable the TSLint integration with WebStorm to avoid duplicate error reporting.

    To do that, open the Settings dialog (Ctrl+Alt+S) , go to Languages & Frameworks | TypeScript | TSLint, and select Disable TSLint.

Run a Vue.js application

  1. Сlick the Run icon in the gutter next to the dev script in package.json, or run npm run dev in the Terminal Alt+F12, or double-click the dev task in the npm tool window (View | Tool Windows | npm).

  2. Wait till the application is compiled and the development server is ready.

    The Run tool window or the Terminal shows the URL at which your application is running. If your application was generated with create-vue, the default URL is http://localhost:5173/. Click this link to view the application.

    Vue.js app is running in the development mode

Run a Vue.js application via a run/debug configuration

For applications created with create-vue in the WebStorm New Project wizard as described above, WebStorm generates an npm configuration with the default name dev. This configuration runs the vite command that launches the development server and starts your application in the development mode.

In other cases, you need to create a run/debug configuration with the actual settings, such as, host, port, etc., manually.

Create an npm run/debug configuration

  1. Go to Run | Edit Configurations. Alternatively, select Edit Configurations from the list on the toolbar.

    Open the Edit Configurations dialog

    In the Edit Configurations dialog that opens, click the Add button (the Add button) on the toolbar and select npm from the list.

  2. In the Configuration tab of the Run/Debug Configurations: npm dialog that opens, specify the location of the package.json, the Node.js interpreter, and the package manager to use.

    In the Command field, select run from the list and then select the script to run from the Scripts list. Most likely it will be the default dev script but you can configure another one in your package.json, for example, to run the application on a custom port.

    npm run/debug configuration
  3. Optionally:

    To open the application in the browser, update the configuration as follows: in the Browser / Live Edit tab, select the After launch checkbox, select the browser to open the application in, and specify the URL address at which the application wil run.

    If you are going to debug the application, select Google Chrome(英語) or another Chromium-based browser(英語).

    Browser / Live Edit tab: select browser

Run an application

  1. From the list in the Run widget on the toolbar, select a run configuration of the type npm. This can be the autogenerated dev configuration or a custom one that you created yourself as described above.

    Select the dev configuration from the Run widget
  2. Wait till the application is compiled and the development server is ready.

    The Run tool window or the Terminal shows the URL at which your application is running. If your application was generated with create-vue, the default URL is http://localhost:5173/. Click this link to view the application.

    Vue.js app is running in the development mode

    Alternatively, enable WebStorm to open the application on start as described above.

Debug a Vue.js application

You can start a debugging session either by launching a run/debug configuration or from the Run tool window that shows the URL at which your application is running in the development mode.

Start debugging via a run/debug configuration

To debug your Vue.js application you need two run/debug configurations:

  • An npm configuration to start your application in the development mode, as described above.

  • A JavaScript Debug configuration to attach the debugger to the application that is running in the development mode.

You can create a JavaScript Debug configuration within the npm configuration to launch them at once, as described in Run and debug a Vue application with an npm run/debug configuration.

Alternatively, launch an npm and a JavaScript Debug run/debug configurations separately, as described in Start debugging with a JavaScript Debug run/debug configuration.

Run and debug a Vue.js application with a single npm run/debug configuration

  1. Set the breakpoints in your code.

  2. Create an npm configuration as described above.

    If you generated your application with create-vue, WebStorm has already created an npm configuration with the default name npm dev. The configuration is available from the Run widget and in the Run/Debug Configurations dialog.

  3. In the Configuration tab of the Run/Debug Configurations: npm dialog that opens, specify the location of the package.json, the Node.js interpreter, and the package manager to use.

    In the Command field, select run from the list and then select the script to run from the Scripts list. Most likely it will be the default dev script but you can configure another one in your package.json, for example, to run the application on a custom port.

    npm run/debug configuration
  4. In the Browser / Live Edit tab, select the After launch checkbox, select Google Chrome(英語) or another Chromium-based browser(英語) from the list, select the with JavaScript debugger checkbox, and then specify the URL at which your application will run.

    npm configuration, Browser tab
  5. Click Run.

    To re-run the configuration, select it from the list in the Run widget and click Run next to it.

    WebStorm runs the application in the development mode and at the same time launches a debugging session.

    Debugging session
  6. When the first breakpoint is hit, switch to the Debug tool window 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.

Start debugging with a JavaScript Debug run/debug configuration

  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.

    The Run tool window or the Terminal shows the URL at which your application is running. Copy this URL to specify it later in the JavaScript Debug configuration.

    Vue.js app is running in the development mode
  3. Create a JavaScript Debug configuration. To do that, go to Run | Edit Configurations in the main menu, click the Add icon, and select Javascript Debug from the list.

    If you generated your application with create-vue, WebStorm has already created a JavaScript Debug run/debug configuration with the default name Debug Application and the default URL http://localhost:5173. Select this run/debug configuration from the list under the JavaScript Debug node.

    Select the generated JavaScript debug run/debug configuration
  4. In the Run/Debug Configurations: JavaScript Debug dialog that opens, specify the name of the configuration and the URL address at which the application is running in the development mode. You can copy this URL in the Run tool window or in the Terminal, as described above.

    Create a JavaScript Debug configuration: specify the URL
  5. Click Debug.

    To re-run the configuration, select it from the list in the Run widget and click Debug next to it.

    Run a JavaScript Debug configuration from the Run widget
  6. When the first breakpoint is hit, switch to the Debug tool window 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.

Start debugging from the Run tool window or from the built-in Terminal

If your application is running in the development mode on localhost, in particular, if it was generated with create-vue, you can launch a debugging session right from the >Run tool window or from the built-in Terminal.

  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. The Run tool window or the Terminal shows the URL at which your application is running. Hold Ctrl+Shift and click this URL link. WebStorm starts a debugging session with an automatically generated Debug Application configuration of the type JavaScript Debug.

    Starting a debugging session from the Run tool window

When the first breakpoint is hit, switch to the Debug tool window 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.

Troubleshooting for Node.js 17+

In you are using Nuxt.js in the application and your Node.js version 17 or later, during a debugging session you may face network connectivity issues. That may result in problems with attaching the debugger or with loading sourcemaps.

The workaround is to pass --host 127.0.0.1 to the server by updating the dev script in your package.json as follows:

"dev": "nuxt --hostname=127.0.0.1"

Use several frameworks within a project

Sometimes you may need to use other frameworks within one Vue.js project.

To get context-aware coding assistance in each file, create a configuration file .ws-context and specify which framework should be used in each particular file or folder. The settings from this file will override the default configuration.

  1. In the project root, select New | File from the context menu and specify .ws-context as the file name.

  2. In .ws-context, use two types of properties:

    • <context-name> with the context value string

    • A GLOB pattern with a context details object

  3. Use the following context values:

    • framework: vue, angular, react, svelte, astro

    • angular-template-syntax: V_2, V_17

    • nextjs-project: nextjs

    • astro-project: astro

    • vue-store: vuex, pinia

    • vue-class-component-library: vue-class-component, vue -property-decorator, vue-facing-decorator

    • jsdoc-dialect: jsdoc-typescript, jsdoc-closure

  4. Use path nesting for simplicity.

    • The last segment of a GLOB path is the file name pattern, it only supports the * wildcard.

    • If the last segment is a ** it matches all nested directories and files.

    • Top level context properties should have the /** pattern.

  5. When several patterns match the same file name, the following rules are used for disambiguation:

    • Choose the pattern with maximum number of path segments, excluding ** segments.

    • Choose the pattern that is a pure file name pattern, which means that it does not end in ** or /.

    • Choose the pattern that was defined first.

Example

Suppose you have a project with a number of frameworks used in various folders.

A project with different frameworks

To get context-aware assistance for each file in the project, add the following code to .ws-context:

{ "framework": "vue", "angular-template-syntax": "V_2", "src/**/app/**": { "framework": null, "app.component.html" : { "framework": "angular", "angular-template-syntax": "V_17" } }, "src/**/p*-editor/*.html" : { "framework" : "angular" } }
Last modified: 26 May 2024

関連ページ:

実行 / デバッグ構成: NPM

作成: このページでは、構成固有の項目と、すべての実行 / デバッグ構成に共通のオプションについて説明します。この構成の使用方法の詳細については、「npm、pnpm、Yarn」を参照してください。このダイアログでは、npm および Yarn スクリプトをローカルで実行するための構成を作成します。現在のコンテキストにおける「ローカル」とは、WebStorm 自体がコンピューターにインストールされている Node.js を起動し、その後スクリプトの実行を開始することを意味します。npm、pnpm、Yarn の詳細...

実行 / デバッグ構成: JavaScript デバッグ

作成: このダイアログを使用して、ビルトインまたは外部 Web サーバー上で実行されているアプリケーションで JavaScript をデバッグするための構成を作成し、Dart Web アプリケーションをデバッグします。JavaScript デバッグ固有の構成設定:URLJavaScript のデバッグ: このフィールドには、デバッグする JavaScript を参照する HTML ファイルの URL アドレスを指定します。ローカルデバッグの場合は、http://localhost:<buil...

Node.js

Node.js は、サーバーやコマンドラインなど、ブラウザーの外部で JavaScript を実行するための軽量ランタイム環境です。WebStorm は Node.js と統合されており、アプリケーションの構成、編集、実行、デバッグ、テスト、プロファイリング、保守を支援します。Node.js がアプリケーションのローカルランタイムとして、または npm パッケージの管理、JavaScript リンターの実行、ツールのビルド、フレームワークのテストなどにのみ必要な場合は、Node.js をインストール...

プラグインのインストール

プラグインは WebStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。デフォルトでは、WebStorm には多数のプラグインがバンドルされています。バンドルされたプラグインを無効にするこ...

プロジェクトを作成

WebStorm では、空のプロジェクトを作成したり、プロジェクトとしてフォルダーを開いたり、VCS からソースをチェックアウトしたり、プロジェクトを作成することができます。また、フレームワークテンプレートを使用してプロジェクトを生成することもできます。そのため、新しいアプリケーションは、必要なすべてのパッケージと構成ですでにブートストラップされています。WebStorm はまたあらゆるプロジェクトの設定、ファイルおよびホールダーを保存し、新しいプロジェクトを作成するときテンプレートとして使用す...

GitHub でホストされているプロジェクトを管理する

プロジェクトをチェックアウトする (クローン):WebStorm から直接貢献したいリポジトリのクローンを作成し、それに基づいて新しいプロジェクトを作成できます。メインメニューで、に移動します。Git メニューが使用できない場合は、を選択します。バージョン管理から取得ダイアログで、左側の GitHub を選択します。次のいずれかを実行して、GitHub にログインします。トークンがある場合は、トークンを使用するをクリックし、トークンをトークンフィールドに貼り付けて、ログインをクリックします。それ以外の...