Prettier Quickapp Plugin .
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Prettier Plugin Quickapp Prettier Plugin Quickapp

Prettier Quickapp Plugin

🛠 Prettier for quickapp.

English | 中文


Prettier is an opinionated code formatter. This plugin integrates prettier-plugin-ux into Prettier, thus providing you with a universal interface to code formatting. dealing with .ux files via Prettier API, It can provide a common style guide for a project and team, and can help identify potential problems with the code. Using it to write QuickApp will greatly improve development efficiency and happiness.


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


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

You can add a configuration similar to the following in the scripts of package.json. You can use one-click landscaping (yarn prettier) for your fast application code. This includes css, less, sass, etc., which can also be used to beautify. Markdown and so on, you can see in the opinionated-code-formatter that prettier has built-in support for multiple languages.

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

In addition, you can also inject onchange dependencies, which use the glob mode to monitor files and run commands when adding, changing, or deleting anything. If you add a configuration similar to the following in the scripts of package.json, run the yarn prettier-watch command during development to beautify the code after saving, which will definitely improve your development efficiency and experience.

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

Prettier ships with a handful of customizable format options, usable in both the CLI and API. You can configure it yourself in package.json according to your own habits. Specific options and instructions can be found in Options | Prettier.

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


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


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

Prettier can be run in your editor on-save, in a pre-commit hook, or in CI environments to ensure your codebase has a consistent style without devs ever having to post a nit-picky comment on a code review ever again!

The use and configuration, there are detailed descriptions in the Prettier documentation, of course, you can also refer to this - dedicated to building a more elegant rapid application development scaffolding template: quickapp-boilerplate-template.



Copyright (c) 2018-present, nicejade