pai-beautify

安装

npm install -D pai-beautify

注意

建议不要对第三方样式进行美化，美化后的排序可能会影响最终效果。

使用

const PaiBeautifyWebpackPlugin = require('pai-beautify')
// ...
// webpack config
{
    plugins: [
       // ...
       new PaiBeautifyWebpackPlugin({ excludes: [/abc\.js/, /efg\.js/], includes: [/123\.js/, /456\.js/] }),
    ]
}

配置

<section>
  <table class="config">
    <tr>
      <th>配置</th>
      <th>类型</th>
      <th>默认值</th>
      <th>备注</th>
    </tr>
    <tr>
      <td>excludes</td>
      <td>Array&lt;RegExp&gt;</td>
      <td>[]</td>
      <td>排除规则（正则表达式）</td>
    </tr>
    <tr>
      <td>includes</td>
      <td>Array&lt;RegExp&gt;</td>
      <td>[]</td>
      <td>包含规则（正则表达式）</td>
    </tr>
  </table>
</section>

说明

本插件基于prettier、stylelint，定义一套推荐的美化配置，修复部分不友好的美化逻辑。

默认排除”.”开头的文件、文件夹，以及dist、node_modules文件夹。

prettier配置参考

module.exports = {
  singleQuote: true,
  semi: false,
  arrowParens: 'always',
  vueIndentScriptAndStyle: true,
  overrides: [
    {
      files: '*.wpy',
      options: {
        parser: 'vue',
      },
    },
  ],
  printWidth: 150
}

stylelint配置参考

module.exports = {
  plugins: ['stylelint-scss', 'stylelint-order'],
  rules: {
    'order/order': [['dollar-variables', 'at-rules', 'custom-properties', 'declarations', 'rules']],
    'order/properties-alphabetical-order': true,
    'order/properties-order': [
      [
        'content',
        'font-family',
        'font-size',
        'font-weight',
        'color',
        'text-align',
        'text-align-last',
        'text-indent',
        'text-decoration',
        'text-shadow',
        'letter-spacing',
        'cursor',
        'outline',
        'position',
        'top',
        'left',
        'right',
        'bottom',
        'z-index',
        'display',
        'flex',
        'flex-direction',
        'align-items',
        'justify-content',
        'flex-grow',
        'flex-shrink',
        'flex-wrap',
        'vertical-align',
        'width',
        'max-width',
        'min-width',
        'height',
        'max-height',
        'min-height',
        'line-height',
        'margin',
        'margin-top',
        'margin-bottom',
        'margin-left',
        'margin-right',
        'box-sizing',
        'padding',
        'padding-top',
        'padding-bottom',
        'padding-left',
        'padding-right',
        'background',
        'background-color',
        'background-position',
        'background-repeat',
        'background-size',
        'opacity',
        'border',
        'border-top',
        'border-top-color',
        'border-bottom',
        'border-bottom-color',
        'border-left',
        'border-left-color',
        'border-right',
        'border-right-color',
        'border-width',
        'border-radius',
        'border-color',
        'border-style',
        'box-shadow',
        'overflow',
        'overflow-x',
        'overflow-y',
        'text-overflow',
        'white-space',
        'word-break',
        'word-wrap',
        'transition',
        'transform',
        'transform-origin',
        'perspective',
        'animation',
      ],
      {
        unspecified: 'bottom',
        emptyLineBeforeUnspecified: 'always',
      },
    ]
  },
}

eslint配置参考

'indent': 'off',
'comma-dangle': 'off',
'space-before-function-paren': 'off',
'vue/html-self-closing': 'off',
'comma-spacing': 'off',

美化示例

html

<img src="@/images/html.jpg" alt="" style="max-width: 100%;" />

javascript

<img src="@/images/js.jpg" alt="" style="max-width: 100%;" />

css

<img src="@/images/style.jpg" alt="" style="max-width: 100%;" />