Prettier 外掛為更漂亮快應用程式碼
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；而 [email protected] 以後對 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