prettier-plugin-ux

Prettier Quickapp Plugin

🛠 Prettier for quickapp.

English | 中文

Introduction

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.

Install

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

Usage

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"
},

Input

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

Output

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

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.

License

MIT

Copyright (c) 2018-present, nicejade