StyleLint 规范

Stylelint 规范

安装

npm install @zhiq1/mclint-stylelint -D
# OR
yarn add @zhiq1/mclint-stylelint --dev

使用

在你的工程根目录下创建一个.stylelintrc.js配置文件

配置如下即可:

module.exports = {
  extends: '@zhiq1/mclint-stylelint',
}

如果你使用 vscode 编辑器，建议安装stylelint插件，并在设置配置文件settings.json中配置如下，在代码编写时会实时提示，保存是会自动修复

    "stylelint.validate": [
        "css",
        "scss",
        "vue", // 如果是Vue技术栈，需要加上，识别.vue文件中的style
    ],
    "css.validate": true,
    "scss.validate": true,
    "stylelint.enable": true,

:::caution 如果项目之前安装过 Stylelint 相关的包，建议卸载，避免引入不必要的包。如@stylelint、stylelint-config-standard、stylelint-order等，直接在 package.json 搜索stylelint，相关的包全部卸载 :::

规范

使用stylelint官方代码风格stylelint-config-standard；该风格是 stylelint汲取了GitHub、Google、Airbnb等；使用stylelint-order强制按照某个顺序进行编码

目的：

• 增加 css 代码的重用性和易于维护性
• 统一规范、提高协作效率
• 提升渲染性能

具体见StyleLint 规范