Vue3 -- 项目配置之stylelint【企业级项目配置保姆级教程3】

stylelint为css的lint工具。可格式化css代码，检查css语法错误与不合理的写法，指定css书写顺序等。

配置stylelint：

我们项目使用scss作为预处理器

安装依赖：

javascript 复制代码

pnpm add sass sass-loader stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D

创建.stylelintrc.cjs文件：

在根目录下创建.stylelintrc.cjs文件并配置：

javascript 复制代码

// @see: https://stylelint.io

module.exports = {
    root: true,
    // 继承某些已有的规则
    extends: [
        "stylelint-config-standard", // 配置 stylelint 拓展插件
        "stylelint-config-html/vue", // 配置 vue 中 template 样式格式化
        "stylelint-config-standard-scss", // 配置 stylelint scss 插件
        "stylelint-config-recommended-vue/scss", // 配置 vue 中 scss 样式格式化
        "stylelint-config-recess-order" // 配置 stylelint css 属性书写顺序插件,
    ],
    overrides: [
        // 扫描 .vue/html 文件中的 <style> 标签内的样式
        {
            files: ["**/*.{vue,html}"],
            customSyntax: "postcss-html"
        }
    ],
    rules: {
        "function-url-quotes": "always", // URL 的引号 "always(必须加上引号)"|"never(没有引号)"
        "color-hex-length": "long", // 指定 16 进制颜色的简写或扩写 "short(16进制简写)"|"long(16进制扩写)"
        "rule-empty-line-before": "never", // 要求或禁止在规则之前的空行 "always(规则之前必须始终有一个空行)"|"never(规则前绝不能有空行)"|"always-multi-line(多行规则之前必须始终有一个空行)"|"never-multi-line(多行规则之前绝不能有空行)"
        "font-family-no-missing-generic-family-keyword": null, // 禁止在字体族名称列表中缺少通用字体族关键字
        "scss/at-import-partial-extension": null, // 解决不能使用 @import 引入 scss 文件
        "property-no-unknown": null, // 禁止未知的属性
        "no-empty-source": null, // 禁止空源码
        "selector-class-pattern": null, // 强制选择器类名的格式
        "value-no-vendor-prefix": null, // 关闭 vendor-prefix (为了解决多行省略 -webkit-box)
        "no-descending-specificity": null, // 不允许较低特异性的选择器出现在覆盖较高特异性的选择器
        "value-keyword-case": null, // 解决在 scss 中使用 v-bind 大写单词报错
        "selector-pseudo-class-no-unknown": [
            true,
            {
                ignorePseudoClasses: ["global", "v-deep", "deep"]
            }
        ]
    },
    ignoreFiles: ["**/*.js", "**/*.jsx", "**/*.tsx", "**/*.ts"]
};

创建.stylelintignore文件：

在根目录下创建.stylelintignore文件：

javascript 复制代码

/node_modules/*
/dist/*
/html/*
/public/*

package.json文件添加运行脚本：

配置统一的prettier来格式化我买的html、css、js代码：

javascript 复制代码

"format": "prettier --write \"./**/*.{html,vue,ts,js,json,md}\"",
"lint:eslint": "eslint src/**/*.{ts,vue} --cache --fix",
"lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix",

运行脚本命令：

javascript 复制代码

pnpm run format

运行前：乱七八糟的样子

运行后：（你就是我的风景~~）