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

快应用 Jan 15, 2019

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

安装

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

使用

prettier --write "**/*.ux"
# or
npx prettier --write "**/*.ux"

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

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

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

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

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

"prettier": {
    "singleQuote": true,
    "semi": false,
    "printWidth": 120,
    "proseWrap": "never"
},

输入

export default {
onInit () {
},
onShow   () {
APP_STATISTICS.page_show(this)
}
}
<style lang="less">
.page-wrapper{flex-direction: column;
width:6 * @size-factor;
}
</style>

输出

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 进行一些格式调整,导致在快应用中写如下代码时候:

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

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

SyntaxError: Void elements do not have end tags "input"

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

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

/**
 * @file: selfClose.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]*?)(input\b[^\/]*?)>[\s\S]*?<\/input>/gm, '$1$3 />')
  fs.writeFile(path, newContent, error => {
    if (error) throw `Something went wrong: ${error}`
  })
}

main(quickappCodePath)

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

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

Tags

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.