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

栏目: JavaScript · 发布时间: 5年前

内容简介：您可以在 package.json 的

Prettier 是一个固定的代码格式化程序。此插件集成 prettier-plugin-ux 到 Prettier 中，因此为您提供了代码格式化的通用接口。 .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-quickapp 的 parser 直接使用了 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: 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 文件中，可将对应脚本修改为如下模样：

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

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

以上所述就是小编给大家介绍的《Prettier 插件为更漂亮快应用代码》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

互联网浪尖上的女性

田玉翠 / 人民出版社 / 2017-1 / 68.00

二十三个真实、前沿的女性创业者实例，带你走进“她世界”洞悉“她经济”。《互联网浪尖上的女性》不仅仅关于创业，更是关于女性如何追逐自己的梦想，让人生更丰满、更精彩。一起来看看《互联网浪尖上的女性》这本书的介绍吧!

码农工具

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

安装

使用

输入

输出

注意

互联网浪尖上的女性

JSON 在线解析

图片转BASE64编码

RGB HSV 转换