Vue.js

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

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

  

コンポーネントの抽出

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

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

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

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

   

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

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

  

• Inside the template tag, code completion Ctrl+Space and navigation to the definition Ctrl+B for Vue.js components and attributes is available.

  

Complete Vue.js properties and methods

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

  

Complete slot names

• PhpStorm 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, PhpStorm shows suggestions for these names in the v-slot directive of a template tag.

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

Complete components defined in separate files

• If a component is defined in several files(英語), PhpStorm 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.

• Templates inside template literals in the template property of a component get completion just as if this code were inside a template tag.

  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, PhpStorm 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.

1. Open the HTML file with a CDN link to an external Vue.js library. PhpStorm 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.

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, PhpStorm 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.

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.

   

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, PhpStorm detects the TypeScript version used in your project and enables integration with the appropriate service.

     • For TypeScript version 5.0.0 and later, PhpStorm downloads the @vue/language-server package and uses the Vue Language Server (Volar).

     • For earlier versions of TypeScript, the TypeScript Language Service is used. Learn more from Configure integration with the TypeScript Language Service.

   • If you select Vue Language Server (Volar), PhpStorm 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 PhpStorm 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 PhpStorm internal code inspections.

   • Select Disabled to turn both the TypeScript Language Service and the Vue Language Server off and get coding assistance from the PhpStorm 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.

     

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

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, PhpStorm 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, PhpStorm 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 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 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.

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.

  

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

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

Create an npm run/debug configuration

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

   

   In the Edit Configurations dialog that opens, click 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.

   

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(英語).

   

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.

   

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.

   

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

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, PhpStorm 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.

   

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.

   

5. Click Run.

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

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

   

6. When the first breakpoint is hit, switch to the Debug tool window and proceed as usual: step through the program, pause 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.

   

3. Create a JavaScript Debug configuration. To do that, go to Run | Edit Configurations in the main menu, click , and select Javascript Debug from the list.

   If you generated your application with create-vue, PhpStorm 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.

   

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.

   

5. Click Debug.

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

   

6. When the first breakpoint is hit, switch to the Debug tool window and proceed as usual: step through the program, pause 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.

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. PhpStorm starts a debugging session with an automatically generated Debug Application configuration of the type JavaScript Debug.