DCloud_HB_WDL
DCloud_HB_WDL
  • 发布:2019-10-30 18:04
  • 更新:2023-05-31 11:06
  • 阅读:58946

HBuilderX 格式化操作、及格式化插件配置说明

分类:HBuilderX

本帖文档已集成到: hx产品文档

1. HBuilderX的格式化插件说明

插件名称 对应插件配置中的名称 是否内置 可格式化的文件 插件市场
js-beautify format 内置插件 vue、html、js、css、json
prettier format-prettier 非内置,需要下载 less、sass、vue、stylus(vue内嵌)、ts、yaml 下载地址
stylus-supremacy format-stylus-supremacy 非内置,需要下载 格式化单独stylus文件 下载地址

特别说明:

  1. 当同时存在js-beautifyformat-prettier插件是,格式化vue文件,调用的是format-prettier插件
  2. stylus-supremacy只支持格式化独立的stylus文件,如需格式化vue文件内的stylus代码,需要同时安装prettier插件
  3. 本地插件目录:HBuilderX所有的插件,都存放于本地plugins目录下

2. 格式化插件配置

点击菜单【工具】【设置 -> 插件配置】,选择相应插件, 点击配置文件进行配置。

在格式化插件配置文件内,每项配置均有说明(或阅读插件中README.MD文件); 无说明文档的请参考插件官网配置说明。

插件配置中格式化插件 配置文件 插件官网
format format/jsbeautifyrc.js 官网
format-prettier formator-prettier/prettier.config.js 官网
format-stylus-supremacy formator-stylus-supremacy/supremacy.config.js 官网

3. 格式化快捷键

格式化菜单:【右键菜单】-->【重排代码格式】

格式化快捷键, win:ctrl + K; mac: command + K

自定义格式化快捷键: 点击菜单【工具】【自定义快捷键】,在【用户设置】中,拷贝如下代码, key为您要定义的快捷键

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

4. 格式化风格

格式化时, 使用的缩进方式,是读取的菜单【工具 --> 设置】中的配置

特别说明:
editorconfig配置会覆盖HBuilderX编辑器配置;当项目下存在.editorconfig文件时,格式化时,读取的是此配置文件。
.editorconfig使用说明文档

5. 保存文件时,自动格式化

部分小伙伴反馈, 如何实现保存文件时,自动格式化? 答: 不支持。

  1. 普通web项目不支持保存文件的同时,自动格式化。
  2. vue-cli项目,可通过配置eslint,通过eslint自动校验修复的功能,来实现相同的效果。

例如:保存时,去除分号等。

6. estlint自动修复、实时校验

eslint-js自动修复功能
eslint-vue自动修复功能

4 关注 分享
聆听心语 1***@163.com i***@126.com 帮妈妈洗碗

要回复文章请先登录注册

1***@qq.com

1***@qq.com

急求:格式化后会报错,比如:let bb=obj?.aa,格式化之后就变成 let bb=obj ? .aa了自然就报错了
2021-01-08 14:26
r***@163.com

r***@163.com

使用可选链操作符,格式化会自动分开导致程序报错怎么解决?如obj?..constructor === Object。格式化后变成obj ? .constructor === Object
2020-12-12 14:02
6***@qq.com

6***@qq.com

格式化vue文件内的stylus代码,也同时安装prettier插件,但是stylus-supremacy的配置不生效,prettier对stylus的配置难道不是读取的stylus-supremacy的配置吗?还是怎么办??
2020-10-22 18:22
砖家

砖家

js-beautify v1.12.0 支持 nullish-coalescing
不知道Hbuilder X内置的是什么版本,格式化??时会编程??导致编译出错
2020-09-23 14:27
chess99

chess99

回复 DCloud_HB_WDL :
这种不在项目里的文件右键没有"本地历史记录"啊.
本地文件那一堆jsbeautifyrc_2020xxxxxxxxxxxx.js里也没有找到最原始的.
最后我从安装包里重新复制了个原始的出来了
2020-06-15 14:52
DCloud_HB_WDL

DCloud_HB_WDL (作者)

回复 chess99 :
右键菜单,本地历史记录
2020-06-15 12:25
chess99

chess99

.jsbeautiryrc.js 文件, 修改时忘记备份, 怎么恢复默认配置
2020-06-15 11:24
DCloud_HB_WDL

DCloud_HB_WDL (作者)

回复 z***@qq.com :
感谢反馈,后期优化
2020-05-25 15:05
z***@qq.com

z***@qq.com

格式化为什么每次要展开 我原本收缩起来的代码,而且好像也不能部分格式化,我很困扰啊???代码很长的时候,每次格式化都要重新去找原来的位置。。。
2020-05-25 13:55
9***@qq.com

9***@qq.com

jsbeautifyrc格式化时如何自动在结尾加分号啊
2020-02-07 18:27