Prettier 插件为更漂亮快应用代码

open

Prettier 是一个固定的代码格式化程序。此插件集成 prettier-plugin-ux 到 Prettier 中，因此为您提供了代码格式化的通用接口。.ux 通过 Prettier API 处理文件，它可以为项目和团队提供通用的样式指南，并且可以协助发现代码潜在的很多问题；使用它来编写快应用，将能极大提升开发效率和幸福感。

安装

1. yarn add --dev --exact prettier prettier-plugin-ux

复制代码

使用

1. prettier --write "**/*.ux"
2. # or
3. npx prettier --write "**/*.ux"

复制代码

您可以在 package.json 的 scripts 增加类似如下配置，即可一键美化（yarn prettier）您的快应用代码；其中包括使用到的 css、less、sass 等，当然也可以用来美化 markdown 等等，您可以在 opinionated-code-formatter看到 prettier 内置了对多种不用语言的支持。

1. "prettier": "prettier --write 'src/**/*.js' 'src/**/*.ux'",

复制代码

除此外，您还可以注入 onchange 依赖，它使用 glob 模式来监视文件，能在添加，更改或删除任何内容时运行命令。如果您在 package.json 的 scripts 增加类似如下配置，在开发时候，运行 yarn prettier-watch 命令，即可在保存后对代码进行美化，这无疑将极大提升您的开发效率和体验。

1. "prettier-watch": "onchange '**/*.md' 'src/**/*.js' 'src/**/*.ux' -- prettier --write {{changed}}"

复制代码

Prettier 包含一些可自定义的格式选项，可在 CLI 和 AP I中使用，您可以根据自己习惯，自行在 package.json 中配置。具体选项及说明，可以参见 Options | Prettier。

1. "prettier": {
2. "singleQuote": true,
3. "semi": false,
4. "printWidth": 120,
5. "proseWrap": "never"
6. },

复制代码

输入

1. export default {
2. onInit () {
3. },
4. onShow () {
5. APP_STATISTICS.page_show(this)
6. }
7. }
8. <style lang="less">
9. .page-wrapper{flex-direction: column;
10. width:6 * @size-factor;
11. }
12. </style>

复制代码

输出

1. export default {
2. onInit() {},
3. onShow() {
4. APP_STATISTICS.page_show(this)
5. }
6. }
7. <style lang="less">
8. .page-wrapper {
9. flex-direction: column;
10. width: 6 * @size-factor;
11. }
12. </style>

复制代码

Prettier可以在您的编辑器中运行- 保存，预先提交挂钩或 CI 环境中，以确保您的代码库具有一致的样式，而不必再次发布针对代码审查的挑剔评论！其中使用与配置，在 Prettier 文档中都有详尽的描述，当然您也可以参考这份── 致力于构建更为优雅的快应用开发脚手架模板：quickapp-boilerplate-template。

注意

此 prettier-plugin-quickapp 的 parser 直接使用了 Prettier 内置的 Vue Parser；而 prettier@1.15.0 以后对 Prettier Vue 进行一些格式调整，导致在快应用中写如下代码时候：

1. <input type="button" value="创建快捷方式"></input>

复制代码

Prettier 将不会将其修正，而会报出如下错误：

SyntaxError: Void elements do not have end tags “input”

1. <input type="button" value="创建快捷方式" />

复制代码

因为 Prettier (Vue & Html)对于 input 标签，期待的是如上 self-close 写法。为提升使用体验，您可以注入任意类型脚本（如下这段 node.js 版），使得在 Prettier 前，将 input 标签修正即可;

1. /**

复制代码

在 package.json 文件中，可将对应脚本修改为如下模样：

1. "script": {
2. "prettier": "node ./command/selfCloseInputTag.js && prettier --write "src/**/*.{js,ts,ux,css}""
3. }

复制代码

---

原文出处：https://www.jeffjade.com/2019/02/02/150-prettier-quickapp-plugin/