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 插件为更漂亮快应用代码》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 网站代码高亮插件 prettify.js
- Istio 服务注册插件机制代码解析
- Istio 服务注册插件机制代码解析
- 项目的改造——RemoveButterKnife插件代码的重构
- IDEA 插件推荐:让你写出好代码的神器
- wp-syntax代码高亮插件使用手册
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。