prettier 格式化

TIP

基于 prettier 最新版本@2.8.8 实现，感谢DCloud-HX-WKP在开发过程中提供了所遇问题的解决方案

支持读取项目根目录配置文件进行 prettier 格式化，如果没有配置文件，则会自动在项目根目录创建.prettierrc.js和.prettierignore（具体用法请查看下方）

用法

避免与官方格式化冲突：工具>设置>编辑器设置>取消勾选保存时自动格式化
插件提供一个ctrl+s命令，名为prettier格式化代码，与 HBuilderX 默认保存命令重复，在任意文件中按下ctrl+s会出现选择菜单，设置以后只选一个为prettier格式化代码
接下来就在文件中使用ctrl+s就可以了，会使用 prettier 格式化代码并在格式化后保存

插件如何工作（没有自动生成配置文件请看此处）

在 HBuilderX 左侧目录的任意项目的任意文件中ctrl+s，插件会获取该文件所在项目目录，判断所在项目根目录下是否存在 prettier 配置文件、是否存在 prettier 忽略文件.prettierignore，如果不存在，则会在项目根目录创建默认的.prettierrc.js和.prettierignore，插件会基于这两个文件进行格式化
注意！！！如果所要格式化的文件不在 HBuilderX 左侧目录的项目列表中，则不会创建配置文件与忽略文件，而是使用插件的默认配置，在 HBuilderX 工具>设置>插件配置中可以设置默认配置文件，如想使用根目录配置文件，需要先导入项目到 HBuilderX 左侧目录中，另外，默认配置文件权重小于项目根目录配置文件，这一点同 vscode 一致
因为是基于配置文件格式化，所以允许 HBuilderX 不同项目之间配置文件配置不同，进行不同配置的格式化，互不影响
如果不想使用插件创建的配置文件，比如之前已有统一团队风格的 prettier 配置文件，可以复制该文件到项目根目录下，插件则不会新建，而是直接使用该配置文件，配置文件无固定后缀名要求，属于 prettier 配置文件即可（别忘了，该项目需要在 HBuilderX 左侧目录中）

`.prettierignore`忽略文件

.prettierignore指定哪些文件或文件目录忽略 prettier 的格式化

插件默认生成的.prettierignore内容是uni_modules，表示该目录下的所有文件 prettier 会忽略，在这些文件中ctrl+s不会进行格式化

prettier 转换.editorconfig 配置

插件支持.editorconfig 转换：prettier 会转换.editorconfig 的一些配置属性为 prettier 相应的配置属性

目前 prettier 支持转换的.editorconfig 配置属性

json

[*]
indent_style = space
indent_size = 4
max_line_length = 80
end_of_line = lf

对应转换成的 prettier 配置属性

{ useTabs: false, tabWidth: 4, printWidth: 80, endOfLine: 'lf' }

配置默认不支持的文件类型的格式化

prettier 默认支持 JavaScript、 Flow、 JSX、TypeScript、 TSX、 JSON.stringify、JSON、JSON with Comments、JSON5、CSS、PostCSS、ess、SCSS、Handlebars、GraphQL、Markdown、MDX、Angular、HTML、Lightning Web Components、Vue、YAML

安装插件

对于不默认支持格式化的文件类型，需要安装 prettier 插件，并在配置文件中配置plugins属性

比如想要格式化 java 和 xml 文件，使用 node 安装 prettier 插件（对应语言插件请查看下方插件列表）

npm i -D prettier-plugin-java prettier-plugin-xml

plugins 支持绝对路径

可以使用绝对路径让 prettier 找到它的插件（可以单独使用一个文件夹存放所有插件，避免重复安装）

.prettierrc.js 设置如下

plugins: [
        'D:/uniapp-projects/示例项目/node_modules/prettier-plugin-java',
        'D:/uniapp-projects/示例项目/node_modules/prettier-plugin-xml',
    ],

相对路径

.prettierrc.js 设置如下

plugins: [
        './node_modules/prettier-plugin-java',
        './node_modules/prettier-plugin-xml',
    ],

现在 prettier 可以正常格式化 java、xml 文件了

插件列表

官方插件

社区插件

手动指定 prettier 的 parser

对于一些自定义文件，本质上仍属于 prettier 支持的文件类型，可以在 prettier 配置文件中手动指定 parser

比如后缀名是.jql，但本质上是 js，可以手动指定为 babel

比如后缀名是.nvue，但本质上是 vue，可以手动指定为 vue（这里仅做示例，nvue 的 parser 插件已内置，无需在配置文件加入）

json

"parsers": {
    ".jql": "babel",
    ".nvue": "vue"
  }

所有支持的 parser

TIP

js的 parser 是babel，ts的 parser 对应babel-ts或者typescript

"babel" (via @babel/parser) Named "babylon" until v1.16.0
"babel-flow" (same as "babel" but enables Flow parsing explicitly to avoid ambiguity) First available in v1.16.0
"babel-ts" (similar to "typescript" but uses Babel and its TypeScript plugin) First available in v2.0.0
"flow" (via flow-parser)
"typescript" (via @typescript-eslint/typescript-estree) First available in v1.4.0
"espree" (via espree) First available in v2.2.0
"meriyah" (via meriyah) First available in v2.2.0
"acorn" (via acorn) First available in v2.6.0
"css" (via postcss-scss and postcss-less, autodetects which to use) First available in v1.7.1
"scss" (same parsers as "css", prefers postcss-scss) First available in v1.7.1
"less" (same parsers as "css", prefers postcss-less) First available in v1.7.1
"json" (via @babel/parser parseExpression) First available in v1.5.0
"json5" (same parser as "json", but outputs as json5) First available in v1.13.0
"json-stringify" (same parser as "json", but outputs like JSON.stringify) First available in v1.13.0
"graphql" (via graphql/language) First available in v1.5.0
"markdown" (via remark-parse) First available in v1.8.0
"mdx" (via remark-parse and @mdx-js/mdx) First available in v1.15.0
"html" (via angular-html-parser) First available in 1.15.0
"vue" (same parser as "html", but also formats vue-specific syntax) First available in 1.10.0
"angular" (same parser as "html", but also formats angular-specific syntax via angular-estree-parser) First available in 1.15.0
"lwc" (same parser as "html", but also formats LWC-specific syntax for unquoted template attributes) First available in 1.17.0
"yaml" (via yaml and yaml-unist-parser) First available in 1.14.0

自行设置快捷键

HBuilderX 上方菜单>工具>自定义快捷键>更改插件快捷键

json

{ "key": "Ctrl+S", "command": "extension.prettier", "override": true }

旧版本(0.0.14 之前)`formatAndSave`命令迁移

如果使用的是旧版本的formatAndSave命令，HBuilderX 上方菜单>工具>自定义快捷键>删除以下代码
json
```
{ "key": "ctrl+s", "command": "extension.formatAndSave", "override": true }
```
1
任意文件中按下ctrl+s设置以后只选一个为prettier格式化代码，工具>自定义快捷键>将会自动生成下方代码
json
```
{ "key": "ctrl+s", "command": "extension.prettier", "override": true }
```
1

为什么不使用onWillSaveTextDocument

HBuilderX 插件开发提供了保存事件onWillSaveTextDocument，为什么不使用该事件触发格式化，而是创建一个ctrl+s命令来替换 HBuilderX 默认保存命令？

因为该事件只有编辑后保存才会触发，文件未发生更改情况下不会触发

prettier 格式化 ​

用法 ​

插件如何工作（没有自动生成配置文件请看此处） ​

.prettierignore忽略文件 ​

prettier 转换.editorconfig 配置 ​

配置默认不支持的文件类型的格式化 ​

安装插件 ​

plugins 支持绝对路径 ​

相对路径 ​

插件列表 ​

官方插件 ​

社区插件 ​

手动指定 prettier 的 parser ​

所有支持的 parser ​

自行设置快捷键 ​

旧版本(0.0.14 之前)formatAndSave命令迁移 ​

为什么不使用onWillSaveTextDocument ​

prettier 格式化

用法

插件如何工作（没有自动生成配置文件请看此处）

`.prettierignore`忽略文件

prettier 转换.editorconfig 配置

配置默认不支持的文件类型的格式化

安装插件

plugins 支持绝对路径

相对路径

插件列表

官方插件

社区插件

手动指定 prettier 的 parser

所有支持的 parser

自行设置快捷键

旧版本(0.0.14 之前)`formatAndSave`命令迁移

为什么不使用onWillSaveTextDocument