uni-app CSS 自动验证格式化排序 一行一条 [新]

发布于 1周前 作者 vueper 来自 Uni-App

uni-app CSS 自动验证格式化排序 一行一条 [新]

HBuilderX 的 CSS格式化使用 js-beautify 插件， 这玩意不能格式化成一行，现提供新的的方法。

官方插件市场安装插件
validate-stylelint
该插件在 保存时 进行语法校验，提示错误，自动修复 。我们可借助 [一行规则+自动修复]来自动格式化，并增加一个排序功能。
截至 v1.0.6 版本 没有开启【自动修复】，暂需自行修改插件。若插件更新并开启自动修复，可忽略修改步骤。

安装后 ，插件文件夹 x:\HBuilderX\plugins\validate-stylelint

1、改造插件，开启自动修复，添加排序插件
修改文件 package.json
1-1、在命令数组最后添加个 "--fix" 参数 开启修复

 "command": [  
    ....  
    "${pluginPath}",  
    "${file}", // 逗号分隔  
    "--fix"  // 这里添加    
]

1-2、添加排序插件

"dependencies": {  
    .....  
    "stylelint-config-standard": "^18.2.0",  
    "stylelint-config-recess-order": "^2.4.0"  // 添加  
}

validate-stylelint 文件夹下执行 [ npm up ] 更新依赖

2、新增排序扩展 和 一行 规则

修改规则文件 .stylelintrc.js

"extends": [  
    "stylelint-config-recommended",  
    "stylelint-config-recess-order"  // 添加  
]，  
"rules": {  
     // 自定义一行规则 见附件  
}

h1,  
h2{  
    color:#fff;  
    margin-top: 0;  
    top: 10px;  
}  
// 自动格式化+排序  
h1, h2{ top: 10px; margin-top: 0; color:#fff;}

Harmonyos Next教程
1 回复

在uni-app项目中，对CSS进行自动验证、格式化和排序是一个提升代码质量和可维护性的重要步骤。虽然uni-app本身没有直接提供内置的CSS处理工具，但我们可以借助一些流行的工具和插件来实现这些功能。以下是一个基于Stylelint、Prettier和PostCSS-Sort-Order的完整解决方案，通过配置这些工具，你可以实现CSS的自动验证、格式化和排序。

1. 安装必要的依赖

首先，你需要安装Stylelint、Prettier和相关插件。你可以在你的项目根目录下运行以下命令：

npm install --save-dev stylelint stylelint-config-standard stylelint-order stylelint-prettier prettier postcss-sort-order

2. 配置Stylelint

创建一个.stylelintrc.json文件，配置Stylelint以使用标准配置和排序规则：

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-prettier"
  ],
  "plugins": [
    "stylelint-order"
  ],
  "rules": {
    "order/order": [
      "custom-properties",
      "declarations"
    ],
    "order/properties-order": [
      {
        "emptyLineBefore": "always",
        "properties": [
          "position",
          "top",
          "right",
          "bottom",
          "left",
          // 其他属性...
        ]
      }
    ]
  }
}

3. 配置Prettier

创建一个.prettierrc文件，配置Prettier以格式化CSS：

{
  "singleQuote": true,
  "semi": false,
  "tabWidth": 2,
  "useTabs": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

4. 使用PostCSS-Sort-Order（可选）

虽然Stylelint已经能够处理排序，但如果你需要更复杂的排序逻辑，可以配置PostCSS。不过，这通常不是必需的，因为Stylelint已经足够强大。

5. 集成到构建工具

你可以在package.json中添加脚本，以便在构建或开发时自动运行这些工具：

"scripts": {
  "lint:css": "stylelint '**/*.{vue,css,scss}'",
  "format:css": "prettier --write '**/*.{vue,css,scss}'"
}

然后，你可以通过运行npm run lint:css和npm run format:css来验证和格式化你的CSS代码。

6. 自动化（可选）

你可以使用Git钩子（如pre-commit）或CI/CD工具来自动运行这些脚本，确保每次提交或部署时都保持代码的一致性和质量。

通过上述配置，你可以在uni-app项目中实现CSS的自动验证、格式化和排序，提升代码的可读性和维护性。

回到顶部