倾城之链

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

安装

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

使用

1
2
3
prettier --write "**/*.ux"
# or
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
2
3
4
5
6
"prettier": {
"singleQuote": true,
"semi": false,
"printWidth": 120,
"proseWrap": "never"
},

输入

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

输出

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

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

注意

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

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

Prettier 将不会将其修正,而会报出如下错误:

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/**
* @file: selfCloseInputTag.js
* @desc: 遍历指定目录下 .ux 文件,将其中 input 标签由 <input></input> 转换为 <input />
* @date: 2019-01-23
*/

const fs = require('fs')
const path = require('path')

const quickappCodePath = './src/'

const main = codePath => {
const traversing = cpath => {
const files = fs.readdirSync(cpath)
files.forEach(fileName => {
const fPath = path.join(cpath, fileName)
const stats = fs.statSync(fPath)
stats.isDirectory() && traversing(fPath)
stats.isFile() && fPath.endsWith('.ux') && matchAndReplace(fPath)
})
}
traversing(codePath)
}

const matchAndReplace = path => {
const pageContent = fs.readFileSync(path, 'UTF-8')
const newContent = pageContent.replace(/(<[\s\S]*?input\b[\s\S]*?)>([\s\S]*?)(<\/input>)/g, '$1 />')
fs.writeFile(path, newContent, error => {
if (error) throw `Something went wrong: ${error}`
})
}

main(quickappCodePath)

package.json 文件中,可将对应脚本修改为如下模样:

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

@2019-01-15 于深圳.福田 Last Modify:2018-02-02


您可能会感兴趣的文章:

打赏

广而告之


文章目录
  1. 1. 安装
  2. 2. 使用
    1. 2.1. 输入
    2. 2.2. 输出
  3. 3. 注意
    1. 3.1. 您可能会感兴趣的文章: