Vue
In HBuilderX, the vue syntax library will be automatically mounted when you open a vue file. When adding vue code to the html file, you can click on the “Javascript Libraries” in the bottom right corner and select the vue syntax library. We recommend that developers use the vue single-file method to open vue files directly.
Notes: If a vue file does not belong to any project. Please create a new project from the project explorer on the left, then open the vue file, the vue syntax library will be loaded automatically.
Vue3 Support
HBuilderX 3.2.5 or later (including 3.2.5) provides Vue3 support. Refer to Vue3 Support for details.
Syntax Highlight
In addition to the common syntax highlighting support of Vue, HBuilderX also supports various expressions and syntax, as well as the highlighting of other languages supported by scripts and styles such as less, scss, stylus, and typescript, without installing any plugins.
Code Completions
API Hint and Help
HbuilderX provides intelligent code completion based on language semantics and source code analysis. HbuilderX knows possible completions, and IntelliSense suggestions will pop up when you type codes.
In addition to the perfect prompt, there are clear instructions on the right side of the code assistant. The api is explained clearly, and the link to the official website is attached. Click the link to jump to the specified page of the vue official website.
Identify ‘this’ Type
Syntax Hint
Vue Methods Hint
Customized Components Hint
Based on powerful component syntax analysis, HBuilderX can directly prompt component tags and attributes.
Vue Doc
Vue doc is a powerful tool for vue component developers. By writing the jsdoc class, your component can implement comprehensive code hints and help.
Compatible with the VSCode Vetur Plugin
Some vue component libraries have been produced according to the vetur
specification, such as Element UI
, Onsen UI
, Bootstrap Vue
and other frameworks.
These frameworks are installed in npm or installed in the new HBuilderX template, which can implement code prompts.
Built-in Snippets / Custom Snippets
Type v
, you can see a large number of vue snippets in hints.
You can also add more customized snippets in menu [Tools
- Snippets Settings
-Vue Snippet
].
Vue Router
Support $router and $route objects.
Vuex
Support Objects:State
, Mutation
, action
and go to definition.
Other
Also support emmet
, d.ts
.
Help Docs
Place the cursor on the api
and press F1
to open the corresponding help file directly in Web Explorer.You can change the code side by side while viewing the documentation.
Go to Definition
Press alt+mouse click
to trace the source of various variables
, style
, and methods
, and switch to related files between templates
, scripts
and styles
. Very powerful and flexible.
Refactoring or Select Same Variable
If you want to know where a variable is referenced, or select all variables to rename. Right click on the word [Select all occurrences (ctrl+shift+e)]
Example below: There are many “list” in the script, but only exact variables are selected:
ESLint Check
Firstly, please install the plugin eslint-plugin-vue
. Then there are 2 ways to check syntax, click [Tool - Validate Document], or save the vue document as it will be verified automatically when saving.
HbuilderX provides shortcuts settings and whether to automatically trigger when saving. Location is【Perferences - plugins - eslint-plugin-vue】.
Outline
- Editor top menu - view -> Show Outline.
- Editor file, right-click menu -> Toggle Outline.
- Editor bottom status bar, Click on the first icon.
Select any tag in outline will bring cursor to the corresponding section of the script.
Easy to create and run Vue project
If you don’t like node development environment, this will not affect you drive into the vue programming.
HBuilderX has built-in plugins and node environment.
You can create a new vue project through the new project wizard without cli.
In the run menu, you can visually run and build the project.
You don’t need to install node modules, you can import plugins through uni-app market (only for uni-app), more details uni-app markets