Vue.js

Create a Vue.js component

• In the Project tool window, select the parent folder for the new component, and then choose Vue Component from the list.

  

Extract components

1. Select the template fragment to extract and invoke component extraction:

   • To use the intention action, press Alt+Enter, and then choose Extract Vue Component from the list.

   • To use the refactoring, choose Refactor | Extract | Extract Vue Component from the main menu or from the context menu of the selection.

2. Type the name of the new component. If this name is already used or invalid, RubyMine shows a warning. Otherwise a new single-file component is created and imported into the parent component.

   

   Gif

note

The Extract Vue Component refactoring works only in-place, so make sure the In the editor refactoring option is selected on the Editor | Code Editing page of the IDE settings Ctrl+Alt+S.

Complete code inside script, style, and template blocks

• By default, RubyMine provides code completion for ECMAScript 6 inside script blocks and for CSS inside style blocks.

  

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

  

  Gif

Complete Vue.js properties and methods

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

  

  Gif

Complete slot names

• RubyMine 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, RubyMine 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, RubyMine 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, RubyMine 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. RubyMine 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 the mouse over the link and click Download library.

The library is added to the list of JavaScript libraries on the Settings/Preferences | Languages and Frameworks | JavaScript | Libraries page, see Configuring a library added via a CDN link for details.

Configure parameter hints

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

2. Select Parameter hints from the list, make sure the Show parameter hints checkbox is selected, and then specify the context where you want parameter hints shown.

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

3. For some methods and functions, RubyMine 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.

tip

To hide parameter hints for all types of values, clear the Show parameter name hints checkbox. Learn more from Parameter info.

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.

   

   Gif

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/Preferences 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-hand pane shows how the 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, RubyMine 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/Preferences 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/Preferences 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/Preferences 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, RubyMine 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.

   tip

   These checkboxes do not affect JavaScript expressions without line breaks inside. For example, {{ foo }} will not be split automatically anyway.

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/Preferences 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 details, see 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 RubyMine to avoid duplicate error reporting.

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

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

   Alternatively, run npm start in the Terminal Alt+F12 or double-click the start 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, by default it is http://localhost:8080/. Click this link to view the application.

   

When the development server is running, your application is automatically reloaded as soon as you change any of the source files and save the updates.

Debug applications created with Vue CLI

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. Select the autogenerated Debug Application configuration from the list and click next to the list.

   

   Gif

Debug applications running on localhost

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, by default it is http://localhost:8080/. Hold Ctrl+Shift and click this URL link. RubyMine starts a debugging session with an automatically generated Debug Application configuration of the type JavaScript Debug.

   

   Gif

Debug applications running on custom URLs

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. Copy this URL address, you will later specify it in a debug configuration. To view your application, just click the link.

4. Create a JavaScript Debug configuration. To do that, go to Run | Edit Configurations on the main menu, click , and select JavaScript Debug from the list. In the Run/Debug Configuration: JavaScript Debug dialog, paste the saved URL in the URL field and save the configuration.

5. To launch your newly created configuration, select it from the list of configurations and click next to the list.