Format Document

Many people ignore the formatting of the code when writing code. Although this will not affect the function of the program, it will reduce the readability of the program.

“Format Document” allows the code to be indented or separated according to a specific style to make the program clearer.

On the opened file, right-click menu, and click [Format Document] to format the current file.

HBuilderX, formatting shortcut key, win: ctrl + K; mac: command + K

Plugins

HBuilderX, officially maintained formatting plugins are as follows:

Name DisplayName Whether built-in Supported file types marketplace Plugin tutorial
js-beautify format Built-in vue、html、js、css、json
prettier format-prettier Not built-in, need to download less、sass、vue、stylus(vue embedded)、ts、yaml Download Docs
stylus-supremacy format-stylus-supremacy Not built-in, need to download stylus Download Docs

Remarks:

  1. When there are both js-beautify and format-prettier plugins, the format-prettier plugin is called to format vue file.
  2. stylus-supremacy only supports formatting independent stylus files. If you need to format the stylus code in the vue file, you need to install the prettier plugin at the same time.
  3. Local plugin directory: all plugins of HBuilderX are stored in the plugins directory.

Format plugin configuration

Click the menu [Tools] [Settings -> Plugins], select the corresponding plugin, and click Configuration File to configure.

Format Document - 图1

Name Config File Official website
format(即js-beautify) jsbeautifyrc.js site
format-prettier prettier.config.js site
format-stylus-supremacy supremacy.config.js site

Format style

The indentation rule of “Format Document” is set in the configuration of the menu [Tools —> Settings].

Format Document - 图2

Remarks: The editorconfig configuration will override the HBuilderX editor configuration; when there is a .editorconfig file under the project, this configuration file is read when formatting.

.editorconfig

Custom formatting shortcuts

Click the menu [Tools] [Custom Keybingdings], in [User Settings], copy the following code, key is the shortcut key you want to define.

  1. {"key":"ctrl+k","command":"editor.action.format"}

Whether to support automatic formatting when saving a file?

How to realize automatic formatting when saving a file?

Answer: Not supported.

  1. Normal web projects do not support automatic formatting while saving a file.
  2. For the vue-cli project, the same effect can be achieved by configuring eslint and using the function of eslint automatic verification and repair. For example, remove semicolon when saving the file.